热更新插件地址:https://github.com/nordnet/cordova-hot-code-push
准备工作:安装cordova hot code push客户端工具
npm install -g cordova-hot-code-push-cli
一、本地热更新开发
1、创建一个新的测试demo工程并进入该项目
2、添加热更新插件:cordova plugin add cordova-hot-code-push-plugin
3、添加本地调试插件:cordova plugin add cordova-hot-code-push-local-dev-addon
4、启动热更新服务:cordova-hcp server,要先打开另一个命令窗口进入此项目根目录然后运行
5,检查项目根目录下面的config.xml文件下信息,是否有如下信息
<chcp>
<config-file url="https://8ca0caa8.ngrok.io/chcp.json" />
<local-development enabled="true" />
</chcp>
没有则需要手动添加,确保config-file的url属性值是运行热更新服务端的地址
6,修改www中的文件,比如修改主页中的文字,修改保存之后,在启动服务的终端中应该可以看见log,真机中的效果会发生改变,这是因为代码实时的改变了
二:搭建远程服务器热更新环境
1,搭建一个远程服务平台,可以用Tomcat或Nginx服务器,在服务器中能访问的位置里放一个www文件夹,到时候将项目中运行后的www文件放到这里来即可
2、在开发端创建一个cordova工程,添加平台
3、添加热更新插件:cordova plugin add cordova-hot-code-push-plugin
4、在项目根目录下的config.xml文件中添加一下内容:
<chcp>
<auto-download enabled="false" /> // 是否自动下载更新
<auto-install enabled="false" /> // 是否自动安装更新
<config-file url="http://x.x.x.x:8888/xxx/chcp.json"/>
// app在检查更新(有自动检查更新和手动检查更新,我这里使用的是手动检查更新,能够自己控制会更好一点)的时候,会将app中www文件夹下的chcp.json与服务器中content_url访问的目录下的chcp.json比较,好像是当两个release时间不相等(不会比较大小)的时候,就会更新。
</chcp>
客户端app的www文件下的chcp.json文件
{
"autogenerated": true, // 自动编译,相等于文件修改之后,自动执行cordova-hcp build命令。编译完之后,会在chcp.manifest文件中生成www文件夹中每个文件的hash码
"release": "2017.11.09-14.14.49", // 用来和服务端的chcp.json文件的release时间做比较,不相同就会触发更新
"content_url": "https://4b007e7f.ngrok.io", // 服务端地址
"update": "now" // 更新时间
}
chcp.minifest文件:
{
"file": ".idea/inspectionProfiles/Project_Default.xml",
"hash": "ca39aae2553e263f6545d7364a7aa0d4"
}
由此种对象组成的数组,热更新插件会比对app本地和服务器上的同一个文件的hash码判断是否需要更新
4、在项目的根目录下添加一个文件,文件名为cordova-hcp.json(该文件与config.xml文件目录位置同级),文件内容:
{
"update": "start",
"content_url": "http://x.x.x.x:8888/xxx"
}
以后每次cordova-hcp build的时候,都会以cordova-hcp.json文件为模板,比如现在添加完这个文件之后,执行cordova-hcp build,chcp.json的文件的内容就回变成:
{
"update": "start",
"content_url": "http://x.x.x.x:8888/xxx",
"release": "2017.11.09-15.01.03"
}
5、app中调用代码手动更新,此处用的是vuxUI组件:
chcp.fetchUpdate(function (fetchError, data) {
if (!fetchError) {
_this.$vux.confirm.show({
// 组件除show外的属性
title: '更新提示',
content: '更新已经下载完毕,确认安装更新?',
confirmText: '确定',
cancelText: '取消',
onCancel () {
console.log("取消安装更新...");
},
onConfirm () {
chcp.installUpdate(function (installError) {
if (installError != null) {
_this.$vux.alert.show({
title: '提示',
content: '安装更新失败...'+JSON.stringify(installError)
})
} else {
_this.$vux.alert.show({
title: '提示',
content: '安装更新完成...'
})
}
});
}
})
} else { // shi bai
_this.$vux.alert.show({
title: '提示',
content: '下载更新失败...'+JSON.stringify(fetchError)
})
}
});
7,在vue + cordova中的执行顺序: 1, npm run build 2, cordova-hcp build 3, cordova build android
8,将打好包的app装到真机中,将项目的www文件替换服务器的www文件
9, 改变app内的文件,重新npm run build然后cordova-hcp build,最后将项目的www文件替换服务器的www文件,主动触发更新事件,就可以热更新了
报错: 遇到一次报-9的错误,后面把热更新插件版本升级之后就没了