[Android教程] Cordova开发App入门（二）使用热更新插件

　　前言

　　不知各位遇没遇到过，刚刚发布的应用，忽然发现了一个隐藏极深的“碧油鸡(BUG)”，肿么办!肿么办!肿么办!若是被老板发现，必定会让程序员哥哥去“吃鸡”。可是想要修复这个“碧油鸡”，就必需要从新打包、从新测试、从新部署等等。重点是在这个从新打包、测试、部署的时候，可能已经有用户发现了这个“碧油鸡”，接下来就是承受用户的投诉、举报 + 漫骂。若是这仅仅只是一个无关痛痒的“碧油鸡”，那还到无可厚非。怕就怕这是一个很是严重的错误，好比会泄露用户隐私等。这时候就不仅仅是被请“吃鸡”了，还有可能被请“吃鱼”。(ps：反正受伤的老是程序员~~~)

　　那么若是咱们的应用可以实现“热更新”的话，那就能很轻松+easy的修复“碧油鸡”了。

　　热更新

　　有同窗就问了：什么是“热更新”?

　　其实“热更新”说简单点就是不关软件直接更新,更新期间软件的使用不受影响,如今大部分软件是冷更新,要退出才能更新。在举个简单的例子就是：手机SD卡，能够直接在开机状态下插入或拔出，无须关机后再插拔。

　　又有同窗问了：怎么才能实现“热更新”?

　　这就是接下来要说的内容。

　　实践

　　上一篇介绍了>>如何使用Cordova建立Android项目<< ，这一篇文章主要记录：如何使用Cordova实现App的热更新

　　该篇文章须要用到静态文件服务器，博主使用的nginx搭建的，具体搭建方式可参考：使用nginx搭建文件服务器。

　　添加chcp客户端

　　# 用于编译项目文件，生成对应的hash码

　　npm install -g cordova-hot-code-push-cli

　　复制代码

　　添加chcp自动更新的插件

　　D:\zhyd-project\app\cordova-study\platforms\android>cordova plugin add cordova-hot-code-push-plugin

　　Installing "cordova-hot-code-push-plugin" for android

　　Installing dependency packages:

　　{

　　"xml2js": "^0.4"

　　}

　　Checking cordova-hcp CLI client...

　　---------CHCP-------------

　　To make the development process easier for you - we developed a CLI client for our plugin.

　　To install it, please, use command:

　　npm install -g cordova-hot-code-push-cli

　　For more information please visit https://github.com/nordnet/cordova-hot-code-push-cli

　　--------------------------

　　Android Studio project detected

　　Subproject Path: CordovaLib

　　Subproject Path: app

　　Adding cordova-hot-code-push-plugin to package.json

　　Saved plugin info for "cordova-hot-code-push-plugin" to config.xml

　　复制代码

　　插件安装完成后，会自动配置到app>src>main>res>xml>config.xml文件中。当前项目的config.xml以下

　　

　　cordova-study

　　

　　A sample Apache Cordova application that responds to the deviceready event.

　　

　　

　　Apache Cordova Team

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　复制代码

　　config.xml配置文件各节点介绍：

　　widget：根节点。四个必填配置属性：id(建立项目时默认指定包名)、version(版本号-主.次.补丁)、xmlns、xmlns:cdv

　　name：项目名

　　descriptin：项目介绍

　　author：项目做者(项目若是发布到应用商店后，可能会使用该联系信息)

　　content*：项目启动首页(重要，若是项目的首页不是index.html，则必需要要在config.xml文件中修改为对应的文件)

　　access：跨域访问设置，“*”表示容许全部

　　allow-intent：白名单。控制哪些url可让应用程序打开。默认状况下，不容许使用外部url。

　　preference：项目偏好设置。sdk、日志等等

　　feature：cordova插件，安装插件时自动配置

　　修改config.xml

　　在config.xml中添加以下配置

　　

　　

　　

　　

　　

　　复制代码

　　注：该配置和feature节点是同级的，即：都是widget的子级节点。修改后的config文件以下：

　　

　　...省略

　　

　　

　　

　　

　　

　　

　　

　　...省略

　　

　　

　　复制代码

　　注：【1】为静态服务器的地址(下同)，须要提早配置好，若是使用nginx的话能够参考>使用nginx搭建文件服务器

　　该连接指向的json文件为热更新的配置文件，具体生成方式见下一步

　　此时，项目的文件目录结构如图

　　经过Terminal或者cmd，cd到app>src>main>assets目录下，执行cordova-hcp build

　　该命令执行完毕后，会在assets>www目录下生成两个文件：chcp.json(热更新配置文件)和chcp.manifest(www目录下的全部文件的hash码清单)

　　chcp.json文件内容

　　{

　　"autogenerated": true,

　　"release": "2018.04.16-11.32.11"

　　}

　　复制代码

　　注：若是使用cordova-hcp build命令初始化项目，则生成的chcp.json中缺乏content_url(用于指向服务器端app源码)和update(app更新方式)属性。固然，能够手动添加o(╯╰)o。

　　# update可选值

　　start : app启动时安装更新. 默认值.

　　resume : app从后台切换过来的时候安装更新.

　　now : web内容下载完毕即安装更新.

　　复制代码

　　本地测试可使用cordova-hcp server命令建立一个服务端，该命令生成的chcp.json文件中会有content_url和update参数。因本文主要涉及服务端的热更新，因此本地测试的具体方式不作赘述。

　　虽然对cordova-hcp server命令不作过多介绍，但为了更方便的生成chcp.json文件，咱们能够在asstes目录下建立一个corova-hcp.json模板文件，内容以下

　　{

　　"autogenerated": true,

　　"update": "start",

　　"content_url": "http://【1】/hot-update-app/zyd-test"

　　}

　　复制代码

　　再次执行cordova-hcp build命令

　　能够看到chcp.json中的内容已被cordova-hcp.json文件替换掉了。

　　服务端配置

　　每次修改完代码文件后，先执行cordova-hcp build 而后将www目录中的全部文件copy到服务器上对应的目录中(本文对应/hot-update-app/zyd-test目录下)

　　Javascript调用插件

　　var zyd = window.zyd || {

　　// ...

　　}

　　zyd.bindUpdate = {

　　init : function () {

　　$(".update").click(function(){

　　//说明：这里的使用了Framework7

　　chcp.fetchUpdate(function(error, data) {

　　if(!error) {

　　alert("有更新");

　　chcp.installUpdate(function(error) {

　　alert("更新完成");

　　})

　　} else {

　　alert("当前是最新版本");

　　}

　　})

　　});

　　}

　　}

　　复制代码

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

 

　　

•  

  　　手动更新APP

  　　

 

　　

 

　　

　　

　　

　　复制代码

　　打包测试

　　总结

　　Cordova实现热更新，必需要注意的几点：

　　①安装插件

　　②修改config.xml

　　③添加cordova-hcp.json模板

　　④cordova-hcp build

　　文中的热更新为手动触发，源代码中还有定时自动更新的js实现。另外还能够集合特定程序经过后台进行控制，固然这些扩展性的实现功能，只能各位看官本身去实现了。

　　源码地址

　　1.个人github

　　2.个人码云

　　欢迎关注，欢迎Star。固然，若是你直接下载了源码并不star，我也没办法(手动滑稽o(╯╰)o)。