- 前言 近期進行
Uniapp的開發過程，最后需要實現版本的自動檢測和更新下載操作 特地在此進行文章的整理，以方便道友們減少前進道路上的坎坷，多謝指摘 … 注： 本次指導，以更新 安卓應用為案例，ios、小程序等可舉一反三，稍作優化！ - 設計思路
1. 在服務端配置一個最新的應用版本號； 並將打包生成的 apk(安卓應用) 置於服務器，保證可成功訪問的鏈接 2. 在前端 Uniapp 的最常用的訪問頁面 (比如，鄙人選取的是 首頁vue); 設置當前應用的版本號； 並進行代碼編寫，判斷緩存時間和版本號的大小； 進而通過提示窗口，指導用戶實現版本的更新下載等 ...
- 服務端代碼配置 以我的 PHP實現方式為例如下，注意：補充了一下鄙人自定義使用的函數
showMsg()
/**
* 檢測安卓版本的請求鏈接
* @param Request $request
*/
public function checkAndroidVersion(Request $request){ //此處 version 為配置的一個版本號，整數，例：102 $version = config("app.android_app_version"); return showMsg(1,"checkAndroidVersion",['version'=>$version,'timestamp'=>time()]); } //TODO 補充自定義函數 showMsg() /** * 公用的方法 返回json數據，進行信息的提示 * @param $status 狀態 * @param string $message 提示信息 * @param array $data 返回數據 */ function showMsg($status,$message = '',$data = array()){ $result = array( 'status' => $status, 'message' =>$message, 'data' =>$data ); exit(json_encode($result)); }
- UniAPP 前端代碼配置指導
- 首先進行當前版本號的設置 一般每次確定發布前進行更新即可，同事保證和服務器中的版本號一致（建議使用整數）
data() { return { version:101, } },
- 然后進行檢測操作 為保證版本檢測的即時性，我選擇將方法配置於
onShow()中
onShow(){ uni.getSystemInfo({ success:(res) => { //檢測當前平台，如果是安卓則啟動安卓更新 if(res.platform=="android"){ this.AndroidCheckUpdate(); } } }) },
- 后面就是具體的自定義方法 建議閱讀代碼，參考我的注釋進行理解即可，不算麻煩
methods: { /** * 安卓應用的檢測更新實現 */ AndroidCheckUpdate:function(){ var _this = this; uni.request({ //請求地址，設置為自己的服務器鏈接 url: GLOBAL.DOMAIN_URL+'/uniapi/checkAndroidVersion.html', //method: 'GET', data: {}, success: resMz => { var server_version = resMz.data.data.version; var currTimeStamp = resMz.data.data.timestamp; // 判斷緩存時間 uni.getStorage({ key: 'tip_version_update_time', success: function (res) { var lastTimeStamp = res.data; if((lastTimeStamp+10) > currTimeStamp){ //避免多次提醒，不要更新 console.log("避免多次提醒，不要更新"); }else{ //重新設置時間戳 _this.setStorageForAppVersion(currTimeStamp); //進行版本型號的比對 以及下載更新請求 _this.checkVersionToLoadUpdate(server_version, _this.version); } }, fail:function(res){ _this.setStorageForAppVersion(currTimeStamp); } }); }, fail: () => {}, complete: () => {} }); }, /** * //設置應用版本號對應的緩存信息 * @param {Object} currTimeStamp 當前獲取的時間戳 */ setStorageForAppVersion:function(currTimeStamp){ uni.setStorage({ key: 'tip_version_update_time', data: currTimeStamp, success: function () { console.log('setStorage-success'); } }); }, /** * 進行版本型號的比對 以及下載更新請求 * @param {Object} server_version 服務器最新 應用版本號 * @param {Object} curr_version 當前應用版本號 */ checkVersionToLoadUpdate:function(server_version,curr_version){ console.log(server_version+'---'+curr_version); if(server_version > curr_version){ //TODO 此處判斷是否為 WIFI連接狀態 if(plus.networkinfo.getCurrentType()!=3){ uni.showToast({ title: '有新的版本發布，檢測到您目前非Wifi連接，為節約您的流量，程序已停止自動更新，將在您連接WIFI之后重新檢測更新', mask: true, duration: 5000, icon:"none" }); return; }else{ uni.showModal({ title: "版本更新", content: '有新的版本發布，檢測到您當前為Wifi連接，是否立即進行新版本下載？', confirmText:'立即更新', cancelText:'稍后進行', success: function (res) { if (res.confirm) { uni.showToast({ icon