1、热更新的好处?
通常ionic源码包括(html、javaScript css文件和其他资源)往常我们必须通过提交程序到应用市场、经过漫长的审核用户更新、每一个更改的小地方都需要从新打包编译。现在ionic通过使用cordova插件cordova-hot-code-push
实现ios与Android端代码功能、可不必要应用市场平台审核、便可以实现动态的app源码的目的。
2、热更新实现原理
3、基础实现方式
3.1、安装cordova-hot-code-push-cli
使用命令安装
npm install -g cordova-hot-code-push-cli
主要是生成检测配置文件,通常在www目录下动态生成chcp.json
和chcp.manifest
生成两个文件、插件源码地址:https://github.com/nordnet/cordova-hot-code-push
3.2、创建项目
包含www目录的项目、已经有的项目无需创建
3.3、安装热更新插件
使用命令安装
ionic plugin add cordova-hot-code-push-plugin
ionic plugin add cordova-hot-code-push-local-dev-addon
4、打包封装
执行命令cordova-hcp build
或者cordova build
5、启动hcp server服务
从新打开一个终端窗口,cd到项目目录(包含www目录的父级项目目录
)执行命令
cordova-hcp server
稍后会www目录下动态生成chcp.json
和chcp.manifest
生成两个文件
6、正常运行完成前4个步骤在config.xml
动态加入如图所示的连接地址
图中链接地址https://1980480f.ngrok.io/chcp.json
,修改为在第8步www目录里chcp.json
文件可访问的地址:例如:http://kaibin.me/hotcode/chcp.json
7、运行代码或打包我们的App
8、修改我们想要更新的代码
然后修改 chcp.json
文件的 content_url
,此地址为我们项目放置的地址
{
"autogenerated": true,
"release": "2018.05.30-11.36.13",
"content_url": "http://kaibin.me/hotcode",
"update": "now"
}
9、将项目www目录代码上传到服务器可访问的目录里
例如在服务器根目录创建hotcode命名的目录将项目www里的文件上传上去
10、 关闭我们的应用重新打开,看看代码是否更新成功
11、创建cordova-hcp
模板
11.1、线上测试可卸载掉 cordova-hot-code-push-local-dev-addon防止每次自动更新新版本,可通过命令卸载:
cordova plugin remove cordova-hot-code-push-local-dev-addon
可以在 cordova
项目根目录下放一个 cordova-hcp.json
,这是个模板文件
这样每次执行 cordova-hcp build
就会利用这个模板生成新的 chcp.json
,而不用手动更改 www/chcp.json
了。
cordova-hcp.json
内容如下:
{
"autogenerated": true,
"content_url": "http://kaibin.me/hotcode",
"min_native_interface": 1, // app内核版本号
"ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上线后的地址,用于内核版本更新后的确认跳转
"update": "now"
}
12、Build options build
设置,配置开发环境、测试环境与生产环境
在 /Cordova/Testproject/ 下创建 chcpbuild.options 文件,文件内容如下:
{
"dev": {
"config-file": "https://dev.kaibin.me/hotcode/www/chcp.json"
},
"production": {
"config-file": "https://kaibin.me/hotcode/chcp.json"
},
"QA": {
"config-file": "https://test.kaibin.me/hotcode/chcp.json"
}
}
这样在build app
的时候, 转为开发要用的服务器, 可执行:
ionic build -- chcp-dev
结果就是, 特定拍下的 config.xml
文件(比如, /Cordova/TestProject/platforms/android/res/xml/config.xml
) 变成了这样:
<chcp>
<config-file url="https://dev.kaibin.me/hotcode/chcp.json"/>
</chcp>
当我们需要上架app的时候 (Google Play, App Store
) - 我们正常build
ionic build --release
这样 config.xml
不会改变
如果没有使用 chcpbuild.options
插件会使用 config.xml
里面默认的值。
文件必须位于 Cordova 项目根目录. 在这个文件里面,指定(JSON格式) 所有想改变 config.xml 文件的配置,源文件 config.xml (Cordova项目根目录) 不会发生变动, 改变的是 特定平台下的 config.xml (在cordova build过程的 after_prepare 阶段)。