cordova混合App開發：Cordova+Vue實現Android APP開發 (熱更新) (六)

第一步

在已有項目目錄下添加插件 cordova plugin add cordova-hot-code-push-plugin

第二步

全局安裝npm install -g cordova-hot-code-push-cli(前提是node環境已經配置好)，安裝完成后執行cordova-hcp server查看是否正常。如果運行報錯則有可能是因為端口占用。

第三步

在服務器可訪問路徑下創建一個目錄，比如：hotcode 或者其他目錄都行

第四步

在項目的根目錄app下新建一個cordova-hcp.json的文件添加以下內容：

{
  "name": "test",
  "autogenerated": true,
  "release": "2016.11.08-15.13.26",
  "content_url": "你的服務器訪問路徑/hotcode",
  "update": "resume"
}

 

【name】：項目名稱

【autogenerated】：不設置或者false不會自動更新

【ios_identifier】：ios開發者識別號

【android_identifier】：android包名

【update】：何時觸發進行安裝（install）代碼熱更新

Tips：
代碼熱更新涉及兩個主要過程：fetch update 和 install update。前者獲取熱更新變更文件，后者將獲取到的更新文件安裝到 App 中生效。此字段是針對后者，何時 install update，可選值：
i、 start：應用啟動，默認項（install update when application is launched）
ii、 resume：應用從后台恢復（install the update when application is resumed from background state）【推薦】
iii、 now：下載更新后立即執行（install update as soon as it has been downloaded）

【content_url】：web 項目文件在服務器上的存儲路徑（即 www 目錄在雲存儲中的目錄路徑），熱更新插件將此 URL 作為 base url，用於下載配置文件和項目更新文件（必需的配置項）

 

修改vue項目

(一)增加cordova.js引用 

打包會copy www目錄下的文件到下圖路徑 並備份到 \platforms\android\app\src\main\assets\www 目錄 所以 上圖的引用是找得到的

 

 

 

 

(二) vue項目src目錄下增加update.js文件

相關事件參考插件的wiki    https://github.com/nordnet/cordova-hot-code-push/wiki/Check-if-update-was-loaded-and-ready-to-be-installed

 

var app = {
    // Application Constructor
    initialize: function () {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
        document.addEventListener("resume", this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function () {

        let chcp = window.chcp;
        // 檢測更新
        chcp.fetchUpdate((error, data) => {
            console.log("進度條", data.progress);
            //檢測是否是否可以進行安裝了，雙重判斷吧，有時候會出現有更新版本但是暫時無法安裝的情況（也可以去掉這一層）
            chcp.isUpdateAvailableForInstallation((error, ckeckData) => {
                if (error) {
                    console.log('Nothing to install. Executing fetch.');
                    return
                }

                chcp.fetchUpdate((error, data) => {
                    if (error) {
                        console.log('Failed to load the update with error code: ' + error.code);
                        console.log(error.description);
                        return;
                    }
                    console.log("fetchUpdate:" + data);
                    let msg = `當前版本:${ckeckData.currentVersion}, 新版本:${ckeckData.currentVersion}`
                    console.log(msg);
                    
                    chcp.installUpdate((error) => {
                        if (error) {
                            console.log('Failed to install the update with error code: ' + error.code);
                            console.log(error.description);
                        } else {
                            console.log('Update installed!');
                        }
                    })
                });

            });
        });

    },
};

export default app;

 

 

 

 

 

 

然后再main.js 調用下 或者直接寫在main.js也行

import up from './update'
up.initialize();

 

 

第五步：

在vue路徑下 執行 yarn build 會在父級目錄(也就是cordova根目錄下的www文件夾下生成打包后的html,css,js文件)

在cordova項目根目錄下運行 cordova-hcp build，運行后會在www目錄下生成chcp.json和chcp.manifest文件

第六步：

將cordova項目中的www目錄下所有文件上傳到服務器剛才新建的目錄hotcode下面

第七步：

將以下代碼加入項目的config.xml中，然后運行cordova build

<chcp>
    <config-file url="你的服務器訪問路徑/hotcode/chcp.json" />
    <auto-download enabled="true" />
    <auto-install enabled="true" />
    <native-interface version="1" 
</chcp>

【config-file】：配置文件chcp.json從服務器上加載的路徑（必填）

【auto-download】：是否自動下載熱更新代碼，默認是 true

【auto-install】：是否自動安裝熱更新代碼，默認是 true

【native-interface】：當前 native side 的版本號

 

第八步：

每次代碼更新 就重復56步驟, app就會熱更新

 

---

之前基本是在客戶端打開后自動請求后台自動更新，如果想要客戶端提示更新...

第九步

將第七步中加入的代碼 進行修改如下:

插件的wiki都給出了詳細的步驟   https://github.com/nordnet/cordova-hot-code-push/wiki/Check-if-update-was-loaded-and-ready-to-be-installed

<chcp>
    <config-file url="你的服務器訪問路徑/hotcode/chcp.json" />
    <auto-download enabled="false" />
    <auto-install enabled="false" />
    <native-interface version="1" 
</chcp>

 

update.js中的代碼就可以這樣寫  提示框可以換成自己的ui框架中的

var app = {
    // Application Constructor
    initialize: function () {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
        document.addEventListener("resume", this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function () {

        let chcp = window.chcp;
        // 檢測更新
        chcp.fetchUpdate(() => {
            //檢測是否是否可以進行安裝了，雙重判斷吧，有時候會出現有更新版本但是暫時無法安裝的情況（也可以去掉這一層）
            chcp.isUpdateAvailableForInstallation((error, ckeckData) => {
                if (error) {
                    console.log('Nothing to install. Executing fetch.');
                    return
                }

                chcp.fetchUpdate((error, data) => {
                    if (error) {
                        console.log('Failed to load the update with error code: ' + error.code);
                        console.log(error.description);
                        return;
                    }
                    console.log("fetchUpdate:" + data);
                    let msg = `更新提示\n當前版本:${ckeckData.currentVersion}, 新版本:${ckeckData.currentVersion}`
                    console.log(msg);

                    var r = confirm(msg);
                    if(r == true){
                        chcp.installUpdate((error) => {
                            if (error) {
                                console.log('Failed to install the update with error code: ' + error.code);
                                console.log(error.description);
                            } else {
                                console.log('Update installed!');
                            }
                        })
                    }
                });

            });
        });

    },
};

export default app;

 

 

 

參考 https://github.com/Kelichao/cordova/issues/6