前言
不知各位遇沒遇到過，剛剛發布的應用，突然發現了一個隱藏極深的“碧油雞(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("當前是最新版本");
}
})
});
}
}
復制代碼
復制代碼
打包測試
總結
Cordova實現熱更新，必須要注意的幾點：
①安裝插件
②修改config.xml
③添加cordova-hcp.json模板
④cordova-hcp build
文中的熱更新為手動觸發，源代碼中還有定時自動更新的js實現。另外還可以集合特定程序通過后台進行控制，當然這些擴展性的實現功能，只能各位看官自己去實現了。
源碼地址
1.我的github
2.我的碼雲
歡迎關注，歡迎Star。當然，如果你直接下載了源碼並不star，我也沒辦法(手動滑稽o(╯╰)o)。
