查看: 196|回复: 0

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

发表于 2018-5-7 08:00:02
前言

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

那么如果我们的应用能够实现“热更新”的话,那就能很轻松+easy的修复“碧油鸡”了。

热更新

有同学就问了:什么是“热更新”?

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

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

这就是接下来要说的内容。
图片描述

实践

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

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

添加chcp客户端
  1. # 用于编译项目文件,生成对应的hash码
  2. npm install -g cordova-hot-code-push-cli
复制代码
添加chcp自动更新的插件
  1. D:\zhyd-project\app\cordova-study\platforms\android>cordova plugin add cordova-hot-code-push-plugin
  2. Installing "cordova-hot-code-push-plugin" for android
  3. Installing dependency packages:
  4. {
  5. "xml2js": "^0.4"
  6. }
  7. Checking cordova-hcp CLI client...
  8. ---------CHCP-------------
  9. To make the development process easier for you - we developed a CLI client for our plugin.
  10. To install it, please, use command:
  11. npm install -g cordova-hot-code-push-cli
  12. For more information please visit https://github.com/nordnet/cordova-hot-code-push-cli
  13. --------------------------
  14. Android Studio project detected
  15. Subproject Path: CordovaLib
  16. Subproject Path: app
  17. Adding cordova-hot-code-push-plugin to package.json
  18. Saved plugin info for "cordova-hot-code-push-plugin" to config.xml
复制代码

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

  1. <widget id="com.zyd.cordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  2. <name>cordova-study</name>
  3. <description>
  4. A sample Apache Cordova application that responds to the deviceready event.
  5. </description>
  6. <author email="dev@cordova.apache.org" href="http://cordova.io">
  7. Apache Cordova Team
  8. </author>
  9. <content src="index.html" />
  10. <access origin="*" />
  11. <allow-intent href="http://*/*" />
  12. <allow-intent href="https://*/*" />
  13. <allow-intent href="tel:*" />
  14. <allow-intent href="sms:*" />
  15. <allow-intent href="mailto:*" />
  16. <allow-intent href="geo:*" />
  17. <allow-intent href="market:*" />
  18. <preference name="loglevel" value="DEBUG" />
  19. <preference name="loadUrlTimeoutValue" value="60000" />
  20. <feature name="Whitelist">
  21. <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
  22. <param name="onload" value="true" />
  23. </feature>
  24. <feature name="HotCodePush">
  25. <param name="android-package" value="com.nordnetab.chcp.main.HotCodePushPlugin" />
  26. <param name="onload" value="true" />
  27. </feature>
  28. </widget>
复制代码

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中添加如下配置

  1. <chcp>
  2. <auto-download enabled="true" />
  3. <auto-install enabled="true" />
  4. <config-file url="http://【1】/hot-update-app/zyd-test/chcp.json" />
  5. </chcp>
复制代码

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

  1. <widget id="com.zyd.cordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  2. ...省略
  3. <preference name="loadUrlTimeoutValue" value="60000" />
  4. <chcp>
  5. <auto-download enabled="true" />
  6. <auto-install enabled="true" />
  7. <config-file url="http://【1】/hot-update-app/zyd-test/chcp.json" />
  8. </chcp>
  9. <feature name="Whitelist">
  10. ...省略
  11. </feature>
  12. </widget>
复制代码

注:【1】为静态服务器的地址(下同),需要提前配置好,如果使用nginx的话可以参考>使用nginx搭建文件服务器

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

此时,项目的文件目录结构如图
图片描述

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

该命令执行完毕后,会在assets>www目录下生成两个文件:chcp.json(热更新配置文件)和chcp.manifest(www目录下的所有文件的hash码清单)
图片描述

chcp.json文件内容

  1. {
  2. "autogenerated": true,
  3. "release": "2018.04.16-11.32.11"
  4. }
复制代码

注:如果使用cordova-hcp build命令初始化项目,则生成的chcp.json中缺少content_url(用于指向服务器端app源码)和update(app更新方式)属性。当然,可以手动添加o(╯╰)o。

  1. # update可选值
  2. start : app启动时安装更新. 默认值.
  3. resume : app从后台切换过来的时候安装更新.
  4. now : web内容下载完毕即安装更新.
复制代码

本地测试可以使用cordova-hcp server命令创建一个服务端,该命令生成的chcp.json文件中会有content_urlupdate参数。因本文主要涉及服务端的热更新,所以本地测试的具体方式不做赘述。
图片描述

虽然对cordova-hcp server命令不做过多介绍,但为了更方便的生成chcp.json文件,我们可以在asstes目录下创建一个corova-hcp.json模板文件,内容如下

  1. {
  2. "autogenerated": true,
  3. "update": "start",
  4. "content_url": "http://【1】/hot-update-app/zyd-test"
  5. }
复制代码

再次执行cordova-hcp build命令
图片描述

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

服务端配置

每次修改完代码文件后,先执行cordova-hcp build 然后将www目录中的所有文件copy到服务器上对应的目录中(本文对应/hot-update-app/zyd-test目录下)
图片描述

Javascript调用插件
  1. var zyd = window.zyd || {
  2. // ...
  3. }
  4. zyd.bindUpdate = {
  5. init : function () {
  6. $(".update").click(function(){
  7. //说明:这里的使用了Framework7
  8. chcp.fetchUpdate(function(error, data) {
  9. if(!error) {
  10. alert("有更新");
  11. chcp.installUpdate(function(error) {
  12. alert("更新完成");
  13. })
  14. } else {
  15. alert("当前是最新版本");
  16. }
  17. })
  18. });
  19. }
  20. }
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  6. <title>Cordova学习-测试页面</title>
  7. <!--Inject JS -->
  8. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  9. <script type="text/javascript" src="js/biz.common.js"></script>
  10. <!--for cordova package app-->
  11. <script type="text/javascript" src="cordova.js"></script>
  12. </head>
  13. <body class="android" style="text-align: center;">
  14. <img src="img/logo.png" alt="" width="200px" style="margin: 0 auto;"><br>
  15. <ul>
  16. <li>
  17. <button class="update" style="margin: 0 auto;">手动更新APP</button>
  18. </li>
  19. </ul>
  20. </body>
  21. <script type="text/javascript">
  22. zyd.bindUpdate.init();
  23. // zyd.bindAutoUpdate.init();
  24. </script>
  25. </html>
复制代码
打包测试

图片描述

总结

Cordova实现热更新,必须要注意的几点:

①安装插件

②修改config.xml

③添加cordova-hcp.json模板

④cordova-hcp build

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

源码地址

1.我的github

2.我的码云

欢迎关注,欢迎Star。当然,如果你直接下载了源码并不star,我也没办法(手动滑稽o(╯╰)o)。
图片描述



回复

使用道具 举报