[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)。