1. 程式人生 > >cordova熱更新外掛的使用

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
      ,這個工具會把根據根目錄下的 www 目錄內容生成 chcp.manifestchcp.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("你當前是最新版本", ["提示"]);
        }
    })