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
阿里云配置方式:
3、新开个cmd窗口
运行命令热更新服务开启 cordova-hcp server 还有如果运行命令正常www目录下会有 有chcp.json和chcp.manifest文件出现。到这一步你就知道为什么第三步要配这个地址了。
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文件内容
值得注意的是,这条命令一运行,热更新服务的运行窗口也会报相应的日志
可见这条命令不仅生成chcp.json内容这么简单。然后再说我发现的一个问题,执行ionic serve 就会chcp.json又改回原来的了,所以打包build的时候要小心一点。
在热更新服务启动的情况下, ionic serve 编译,跑在浏览器上我们的页面内容确实改变了。我们再运行cordova-hcp bulid