ionic3 android热更新

1.安装ionic,cordova框架

npm install -g ionic@latest

npm install -g cordova ionic

2.新建ionic项目

ionic start myapp tabs

会显示选项列表
tabs：创建一个选项卡项目
blank：创建一个空白项目
sidemenu：创建一个侧边菜单项目
super: 创建一个预制的完整项目，提供ionic开发最佳实践
conference：创建一个展示真是应用的项目
tutorial：创建一个基于ionic文档的教程项目
aws: 创建一个移动集成器启动项目

任意选择一个新建即可

3.ios目前已不支持热更新，只对Android平台进行设置
设置Android平台
ionic cordova platform add android
设置安卓版本需修改下面文件内容
platforms/android/project.properties
和platforms/android/CordovaLib/project.properties
中的target=“你有的sdk版本”

安装热更新插件
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

4.在config.xml配置文件中加入下面节点
<chcp>
<config-file url="http://192.168.1.42:8085/chcp.json" />
<native-interface version="1" />
</chcp>
第一个子节点是需要发布在iis上的文件地址(服务器地址)

第二个子节点是当前版本号

5.新开一个终端执行下面命令
cordova-hcp server
如果能够正常输出类似
Running server
Checking: /ionic/myapp/www/
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2017.10.27-10.17.48 created in ionic/myapp/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://5027caf9.ngrok.com

检查/项目名称/www 路径下有chcp.json和chcp.manifest表示热更新服务启动正常

6.在项目根目录下新建模板 cordova-hcp.json
{
"content_url": "http://192.168.1.42:8085/hotUpdate/www", /*这里是项目发布的地址(服务器地址) 指到www文件夹*/
"autogenerated": true,
"update": "now"
}
以后发布时只需执行

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

chcp.json内容如下:

{
  "content_url": "http://192.168.1.42:8085/hotUpdate/www",
  "autogenerated": true,
  "update": "now",
  "release": "2018.03.07-11.39.06"
}

7.生成apk
ionic cordova build android
此时热更新服务不能停止（第五步打开的服务），一个终端执保持热更新服务，另一个终端执行其它命令

生成后执行

将apk安装到手机

cordova-hcp build (复制模板文件)
然后通过iis访问地址，检查页面显示是否正常，json文件是否可以访问，json文件内的ip地址是否是iis的发布地址

在手机上安装此apk

一定要先生成apk(ionic cordova build android) 在复制模板文件(cordova-hcp build ) 否则build之后模板文件可能会恢复默认值

8.构建iis 将项目放到iis上检查chcp.json文件是否可以访问，若不能，针对iis7+ 在iis的站点属性的HTTP头设置里，选择MIME映射中点击”文件类型“-”新类型“，添加一个文件类型，关联扩展名：.json，内容类型(MIME):application/x-javascript

9.对项目界面或者功能进行修改
然后对配置文件config.xml的chcp节点的版本号进行修改
<native-interface version="2" />
重新生成apk
ionic cordova build android

执行 cordova-hcp build

将项目上传到iis

检查iis上项目界面是否更改，chcp.json文件是否更改

关闭app，重新打开app，界面已经更新

demo下载地址:https://pan.baidu.com/s/1ne-bmNE0uP8jkbLbCJUVSA

ionic3 android热更新

猜你喜欢