1. 程式人生 > >Cordova 熱更新(Android)

Cordova 熱更新(Android)

研究Cordova一段時間了,其中酷斃(苦逼)的學習真實無fuck說,官方文件,中文,各種度娘,各種驗證,沒辦法學習就是積累的過程鑑於學習過程的艱辛,想想還有更多的Cordova學習者的困擾,便開始寫文章,希望能給一些人的幫助。由於本人是Android開發的,研究混合開發,必然要著重幾個點一、cordova環境配置二、cordova元件開發(自定義元件)三、打包四、熱更新五、javascript的基本學習今天主要記錄cordova熱更新外掛的學習
1、建立專案 cordova create CordovaHotCode 2、新增android平臺(要在建立專案的根目錄下否則會報錯)cordova platform add androidcordova platform add ios新增後會在專案根目錄下platforms出現android平臺

3、新增自動更新外掛cordova plugin add cordova-hot-code-push-plugin

4、新增cordova hot code push客戶端,用於生成www目錄下檔案的hash碼,更新的時候對比使用。npm install -g cordova-hot-code-push-cli新增成功 有WARN 警告可以忽略

5.配置config.xml(注意是專案根目錄下的config.xml)在沒有配置之前我們執行一下 cordova build 命令會提示 CHCP plugiin after perpare hook:congfig-file preference is not set 個人理解:其實熱更新的原理就是通過本地檔案與伺服器檔案做對比 發現新的版本然後到伺服器指定位置(專案/www)下載新的檔案實現個更新,因此必須打包的配置中要找到這個對比檔案,相信大家有所領悟配置檔案全域性的部分平臺那就是根目錄下的config.xml中以上步驟可以隨意百度到,或者到github 上檢視 <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" /> </chcp> <config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" />
這個就是服務端對比檔案的地址配置config.xml完後執行cordova build會顯示如下結果:接下來生成本地的chcp.json 檔案5和6的順序不能顛倒 否則chcp.json 檔案不會生成content-url,和 update 引數{ "autogenerated": true, "release": "2017.12.06-22.46.15"}6.開啟本地服務 重新開啟一個命令列視窗cordova-hcp server(執行命令要在專案的根目錄下進行否則不能檔案改動不能正常生成chcp.json 和chcp.manifest 檔案)在研究過程中這個卡了好久,這個本地服務非常重要,執行後結果

build 後生成的檔案在www目錄下上面這個地址非常重要 public server availalbe 這個就是伺服器地址,客戶端會到這個地址查詢對比檔案 這個地址我們要替換成自己的地址在chcp.json 中替換成我們自己的地址

注意每次 www中檔案變化 後content_url 會被覆蓋,要在複製www檔案到服務端前修改content_url執行完cordova-hcp server 專案\www 目錄下成功chcp.json 和chcp.manifest 檔案chcp.json 檔案如下, release 是檔案更新時間,移動端會根據這個時間進行比較"content_url": "https://c94aeec5.ngrok.io", 如果有更新則到服務端該地址下載www 資料夾的所有檔案 "update": "now" now 更新型別,立即更新{ "autogenerated": true, "release": "2017.12.06-19.55.29", "content_url": "https://c94aeec5.ngrok.io", "update": "now"}
chcp.manifest 開始測試

cordova run 安裝apk安裝後效果開始更改inidex.xml 檔案

注意根目錄下檔案的時間變化更改前:更改後:修改www下的檔案 ,chcp.json 和chcp.mainifest檔案隨之更新開啟chcp.json 發現content_url被重寫,我們要更改回來

然後重新開啟應用結果更新為:重要的事情強調三遍注意修改 chcp.json 檔案下的content_url注意修改 chcp.json 檔案下的content_url注意修改 chcp.json 檔案下的content_url在 執行 cordova build 命令前保證 cordova-hcp server 執行,否則無法生成chcp.json 和chcpmainifest.json 檔案後來發現原因是執行了cordova-hcp build 後會重置chcp.json檔案,為了不讓content-url 每次執行cordova-hcp build 後被覆蓋,方便以後操作我們在根目錄下建立cordova-hcp.json檔案
最後總結:步驟1.建立cordova專案 cordova create CordovaHotCode 2.在建立的專案下新增androd 平臺 cordova platform add android3.新增自動更新外掛 cordova plugin add cordova-hot-code-push-plugin4.新增cordova hot code push客戶端,npm install -g cordova-hot-code-push-cli 用於生成www目錄下檔案的hash碼,更新的時候對比使用。5.配置config.xml(注意是專案根目錄下的config.xml) <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" /> </chcp>6.開啟本地服務 重新開啟一個命令列視窗 cordova-hcp server(執行命令要在專案的根目錄下進行否則不能檔案改動不能正常生成chcp.json 和chcp.manifest 檔案)7.chcp.json 檔案下的content_url{ "autogenerated": true, "release": "2017.12.06-22.07.23", "content_url": "http://192.168.1.68:8020/Hot/www", "update": "now"}8.cordova build 生成apk 9.cordova run 安裝apk10.修改根目錄下www 中的index.xml <div class="app"> <h1>Apache Cordova Success</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div>11.重新檢查chcp.json 檔案發現content_url 地址發生變化,修改成我們的伺服器地址,每次修改很麻煩所以(在專案根目錄下建立cordova-hcp.json 修改www檔案後要 執行 cordova-hcp build,原因我們修改檔案後,cordova server 會自動執行初始化我們的配置,我們需要執行cordova-hcp build會將我們的配置再次更新到cordova-hcp.json中)12.將專案根目錄www 檔案拷貝覆蓋到我們伺服器工程下www13.重啟應用即可發現更新我們修改後的效果最後感謝那些無私的分享者,第一次寫部落格如有什麼不妥地方望指教。參考文章:待研讀