Ionic开发文档

ionic3热更新

发布时间 2018-7-12 9:28:36   浏览量(341)   收藏(1)

1、安装ionic native 热更新插件

1
2
3
4
5
ionic cordova plugin add cordova-hot-code-push-plugin
 
ionic cordova plugin add cordova-hot-code-push-local-dev-addon
 
npm install -g cordova-hot-code-push-cli

当然了还要确保自己已经安装了android平台(没安装可以执行 ionic cordova platform add android)


2、在config.xml配置文件中加入下面节点

1
2
3
4
<chcp>
     <config-file url="http://www.chinayabisi.com/www/chcp.json" />
     <native-interface version="1" />
</chcp>

上面那个地址是你远程服务器存放www文件夹路径的地址


检查chcp.json文件是否能访问,若不能访问

针对iis7+

在IIS的站点属性的HTTP头设置里,选MIME 映射中点击”文件类型”-”新类型”,添加一个文件类型:

关联扩展名:.json

内容类型(MIME):application/x-javascript

阿里云配置方式:

6.png

3、新开个cmd窗口  

运行命令热更新服务开启 cordova-hcp server 还有如果运行命令正常www目录下会有 有chcp.json和chcp.manifest文件出现。到这一步你就知道为什么第三步要配这个地址了。

5.png

4、在项目根目录下新建模板 cordova-hcp.json

1
2
3
4
5
{
  "content_url": "http://www.chinayabisi.com/www",
  "autogenerated": true,
  "update": "now"
}

这一步配置完后访问下面链接,

http://www.chinayabisi.com/www 访问的是ionic项目的首页

http://www.chinayabisi.com/www/chcp.json 也要能访问到


以后发布执行cordova-hcp build命令,就可以把模板内容替换到chcp.json文件内,因为每次更新或者发布app都会使热更新服务重新生成chcp.json文件内容

值得注意的是,这条命令一运行,热更新服务的运行窗口也会报相应的日志

7.png

可见这条命令不仅生成chcp.json内容这么简单。然后再说我发现的一个问题,执行ionic serve 就会chcp.json又改回原来的了,所以打包build的时候要小心一点。

在热更新服务启动的情况下, ionic serve 编译,跑在浏览器上我们的页面内容确实改变了。我们再运行cordova-hcp bulid

广告会让浏览体验不好,可这是网站的唯一收入,请点击下面的百度广告,支持老高的开源行动吧!