cordova熱更新外掛的使用
- cordova常用命令
cordova plugin add plugin_name --save
cordova plugin rm plugin_id --save
cordova platform add android|ios|windows --save
cordova platform rm android|ios|windows --save
新增外掛
說明:在這個步驟裡面,以下的命令需要在專案根目錄下執行
- 新建Cordova專案
- cordova create project_name package_id
- cordova create CordovaHotCode com.ezample.hotcode
- 新增android平臺
cordova platform add android --save
新增iOS平臺
cordova platform add ios --save
新增自動更新外掛
cordova plugin add cordova-hot-code-push-plugin --save
新增cordova hot code push客戶端,用於生成www目錄下檔案的hash碼,更新的時候對比使用。(注意:安裝過就不用在安裝了)
npm install -g cordova-hot-code-push-cli
- 使用方法,在專案根目錄下面執行
cordova-hcp build
chcp.manifest
和chcp.json
2個檔案,chcp.json 這個檔案裡面包含了更新方式、內容地址、release版本等內容,chcp.manifest 檔案是記錄了每個檔案對應的hash碼,用於比對,實現增量更新
配置外掛:
修改config.xml
修改內容如圖:
//程式碼為
<chcp>
<auto-download enabled="true" />
<auto-install enabled="true" />
< config-file url="http://172.16.1.245:8080/cordova-hot-update/cordova/www/chcp.json" />
</chcp>
auto-download:自動下載
auto-install:下載完成後自動安裝,就是下載完成之後立即重新載入頁面
config-file:chcp.json在伺服器的地址
說明:
一般情況下,auto-download 和 auto-install是設成false的,然後通過程式碼的方式呼叫,比如在設定功能中的檢查更新,或者在應用啟動後,如果有新的版本,給使用者一個提示,是否安裝新的更新(這個時候已經把改變的檔案下載到本地了,外掛會複製一份當前使用的 www 檔案,然後把下載的增量檔案複製到 www 中,然後把 webview 的地址指向這個新的)
正式開始:
要按照下面的順序做
1.在專案的根目錄下新建一個檔案,cordova-hcp.json
{
"update": "start",
"content_url": "http://192.168.40.203:8080/cordova/www"
}
2.執行 cordova-hcp build
,生成比對檔案
3.執行 cordova prepare
- 這句話的作用是把專案根目錄下的www檔案的內容複製到android下的assets目錄,或者 iOS專案下的 www 目錄
上面執行完之後,可以將專案匯入到android studio中或者直接在根目錄執行cordova build,然後在CordovaHotCode\platforms\android\build\outputs\apk這個目錄下生成了apk檔案,直接安裝就行。
4.將專案根目錄下的 www 檔案上傳到伺服器,這一步如果不做的話,應用啟動後就崩潰了。www目錄上傳的地址是 http://192.168.40.203:8080/cordova/
(本例子中的地址,實際情況要根據你自己應用配置)
程式碼呼叫外掛方法
//說明:這裡的使用了Framework7
chcp.fetchUpdate(function(error, data) {
if(!error) {
myApp.modal({
title: "提示",
text: "有更新,確定更新嗎?",
buttons: [{
text: '不更新'
}, {
text: "立即更新",
onClick: function() {
myApp.showPreloader('正在升級,升級完畢應用將自動重啟...');
chcp.installUpdate(function(error) {
myApp.alert("更新完成", ["提示"]);
})
}
}]
})
} else {
myApp.alert("你當前是最新版本", ["提示"]);
}
})