cordova混合App开发：Cordova+Vue实现Android APP开发 (热更新) (六)

商界观察员 發表於 2020-11-11 19:44:00

cordova混合App开发：Cordova+Vue实现Android APP开发 (热更新) (六)

<h3>第一步</h3>
<blockquote>
在已有项目目录下添加插件 cordova plugin add cordova-hot-code-push-plugin
</blockquote>
<h3>第二步</h3>
<blockquote>
全局安装npm install -g cordova-hot-code-push-cli(前提是node环境已经配置好)，安装完成后执行cordova-hcp server查看是否正常。如果运行报错则有可能是因为端口占用。
</blockquote>
<h3>第三步</h3>
<blockquote>
在服务器可访问路径下创建一个目录，比如：hotcode 或者其他目录都行
</blockquote>
<h3>第四步</h3>
<blockquote>
在项目的根目录app下新建一个cordova-hcp.json的文件添加以下内容：
</blockquote>
<div class="cnblogs_code">
<pre>{
"name": "test",
"autogenerated": true,
"release": "2016.11.08-15.13.26",
"content_url": "你的服务器访问路径/hotcode",
"update": "resume"
}</pre>
</div>
 
【name】：项目名称
【autogenerated】：不设置或者false不会自动更新
【ios_identifier】：ios开发者识别号
【android_identifier】：android包名
【update】：何时触发进行安装（install）代码热更新
<blockquote>Tips： 代码热更新涉及两个主要过程：fetch update 和 install update。前者获取热更新变更文件，后者将获取到的更新文件安装到 App 中生效。此字段是针对后者，何时 install update，可选值： i、<code>start</code>：应用启动，默认项（install update when application is launched） ii、<code>resume</code>：应用从后台恢复（install the update when application is resumed from background state）【推荐】 iii、<code>now</code>：下载更新后立即执行（install update as soon as it has been downloaded）</blockquote>
【content_url】：web 项目文件在服务器上的存储路径（即 www 目录在云存储中的目录路径），热更新插件将此 URL 作为 base url，用于下载配置文件和项目更新文件（必需的配置项）
 
修改vue项目 
(一)增加cordova.js引用  
<img src="https://img2020.cnblogs.com/blog/782227/202011/782227-20201111112341917-18960444.png">
打包会copy www目录下的文件到下图路径并备份到 \platforms\android\app\src\main\assets\www 目录所以上图的引用是找得到的
 
<img src="https://img2020.cnblogs.com/blog/782227/202011/782227-20201111124100247-1802389067.png">
 
 
 
(二) vue项目src目录下增加update.js文件 
相关事件参考插件的wiki    https://github.com/nordnet/cordova-hot-code-push/wiki/Check-if-update-was-loaded-and-ready-to-be-installed
 
<div class="cnblogs_code">
<pre>var app = {
// Application Constructor
 initialize: function () {
 document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
 document.addEventListener("resume", this.onDeviceReady.bind(this), false);
},
onDeviceReady: function () {

 let chcp = window.chcp;
 // 检测更新
 chcp.fetchUpdate((error, data) => {
 console.log("进度条", data.progress);
 //检测是否是否可以进行安装了，双重判断吧，有时候会出现有更新版本但是暂时无法安装的情况（也可以去掉这一层）
 chcp.isUpdateAvailableForInstallation((error, ckeckData) => {
 if (error) {
 console.log('Nothing to install. Executing fetch.');
 return
 }

 chcp.fetchUpdate((error, data) => {
 if (error) {
 console.log('Failed to load the update with error code: ' + error.code);
 console.log(error.description);
 return;
 }
 console.log("fetchUpdate:" + data);
 let msg = `当前版本:${ckeckData.currentVersion}, 新版本:${ckeckData.currentVersion}`
 console.log(msg);

 chcp.installUpdate((error) => {
 if (error) {
 console.log('Failed to install the update with error code: ' + error.code);
 console.log(error.description);
 } else {
 console.log('Update installed!');
 }
 })
 });

 });
 });

},
};

export default app;</pre>
</div>
 
 
 
 
 
 
然后再main.js 调用下或者直接写在main.js也行
<div class="cnblogs_code">
<pre>import up from './update'
up.initialize();</pre>
</div>
 
 
<h3>第五步：</h3>
<blockquote>
在vue路径下执行 yarn build 会在父级目录(也就是cordova根目录下的www文件夹下生成打包后的html,css,js文件)
在cordova项目根目录下运行 cordova-hcp build，运行后会在www目录下生成chcp.json和chcp.manifest文件
</blockquote>
<h3>第六步：</h3>
<blockquote>
将cordova项目中的www目录下所有文件上传到服务器刚才新建的目录hotcode下面
</blockquote>
<h3>第七步：</h3>
<blockquote>
将以下代码加入项目的config.xml中，然后运行cordova build
</blockquote>
<div class="cnblogs_code">
<pre><chcp>
<config-file url="你的服务器访问路径/hotcode/chcp.json" />
<auto-download enabled="true" />
<auto-install enabled="true" />
<native-interface version="1"
</chcp></pre>
</div>
【config-file】：配置文件chcp.json从服务器上加载的路径（必填）
【auto-download】：是否自动下载热更新代码，默认是 true
【auto-install】：是否自动安装热更新代码，默认是 true
【native-interface】：当前 native side 的版本号
 
<h3>第八步：</h3>
<blockquote>
每次代码更新就重复56步骤, app就会热更新
</blockquote>
 
<hr>
<h2>之前基本是在客户端打开后自动请求后台自动更新，如果想要客户端提示更新...</h2>
<h3>第九步</h3>
<blockquote>
将第七步中加入的代码进行修改如下:
插件的wiki都给出了详细的步骤   https://github.com/nordnet/cordova-hot-code-push/wiki/Check-if-update-was-loaded-and-ready-to-be-installed
</blockquote>
<div class="cnblogs_code">
<pre><chcp>
<config-file url="你的服务器访问路径/hotcode/chcp.json" />
<auto-download enabled="false" />
<auto-install enabled="false" />
<native-interface version="1"
</chcp></pre>
</div>
 
<blockquote>
update.js中的代码就可以这样写  提示框可以换成自己的ui框架中的
</blockquote>
<div class="cnblogs_code">
<pre>var app = {
// Application Constructor
 initialize: function () {
 document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
 document.addEventListener("resume", this.onDeviceReady.bind(this), false);
},
onDeviceReady: function () {

 let chcp = window.chcp;
 // 检测更新
 chcp.fetchUpdate(() => {
 //检测是否是否可以进行安装了，双重判断吧，有时候会出现有更新版本但是暂时无法安装的情况（也可以去掉这一层）
 chcp.isUpdateAvailableForInstallation((error, ckeckData) => {
 if (error) {
 console.log('Nothing to install. Executing fetch.');
 return
 }

 chcp.fetchUpdate((error, data) => {
 if (error) {
 console.log('Failed to load the update with error code: ' + error.code);
 console.log(error.description);
 return;
 }
 console.log("fetchUpdate:" + data);
 let msg = `更新提示\n当前版本:${ckeckData.currentVersion}, 新版本:${ckeckData.currentVersion}`
 console.log(msg);

 var r = confirm(msg);
 if(r == true){
 chcp.installUpdate((error) => {
 if (error) {
 console.log('Failed to install the update with error code: ' + error.code);
 console.log(error.description);
 } else {
 console.log('Update installed!');
 }
 })
 }
 });

 });
 });

},
};

export default app;</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/782227/202011/782227-20201111194958562-453693900.png">
 
 
 
参考 https://github.com/Kelichao/cordova/issues/6 
来源：https://www.cnblogs.com/xtxtx/p/13960548.html

頁: [1]

琼殿技术论坛's Archiver

cordova混合App开发：Cordova+Vue实现Android APP开发 (热更新) (六)