一. 前言
近期進行 Uniapp 的開發，在項目發布的最后需要實現版本的自動檢測和更新下載功能
特地在此進行文章的整理，以方便道友們減少前進道路上的坎坷，多謝指摘 ...
注： 本次指導，以更新
安卓應用為案例（非熱更新），ios、小程序等可舉一反三，稍作優化！
二. 設計思路
1. 在服務端配置一個最新的應用版本號；
并將打包生成的 apk(安卓應用) 置于服務器，保證可成功訪問的鏈接
2. 在前端 Uniapp 的最常用的訪問頁面 (比如，鄙人選取的是 首頁vue);
設置當前應用的版本號；
并進行代碼編寫，判斷緩存時間和版本號的大小；
進而通過提示窗口，指導用戶實現版本的更新下載等 ...
三. 代碼配置實現
- 代碼的編寫與配置，需要分服務端和UniAPP前端的修改，不要混亂，按部就班就好
①? 服務端代碼配置
- 首先需要配置一下最新的應用版本
以我的ThinkPHP5.1框架結構為例，參考如下：
- 定義檢測安卓版本的請求鏈接
以我的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();
}
}
})
},
- 后面就是處理上面一步中所調用的自定義方法 ——
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;
//定義提醒的時間間隔，避免煩人的一直提示，一個小時：3600；一天：86400
var tipTimeLength = 3600;
if((lastTimeStamp+tipTimeLength) > 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){
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:"none",
mask: true,
title: '有新的版本發布，檢測到您目前為Wifi連接，程序已啟動自動更新。新版本下載完成后將自動彈出安裝程序',
duration: 5000,
});
//設置 最新版本apk的下載鏈接
var downloadApkUrl = GLOBAL.DOMAIN_URL+"/apk/mzz2.apk";
var dtask = plus.downloader.createDownload( downloadApkUrl, {}, function ( d, status ) {
// 下載完成
if ( status == 200 ) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){
uni.showToast({
title: '安裝失敗',
duration: 1500
});
})
} else {
uni.showToast({
title: '更新失敗',
duration: 1500
});
}
});
dtask.start();
} else if (res.cancel) {
console.log('稍后更新');
}
}
});
}
}
},
}
四. 運行效果：
附錄：
①? 如果 測試遇到報錯 :ReferenceError: plus is not defined
那是因為沒有使用安卓真機、虛擬機測試，如果使用了谷歌瀏覽器是不支持的哦
②? 注意事項：
①. AndroidCheckUpdate() 中的請求地址 url 不要錯哦
②. AndroidCheckUpdate() 中的 tipTimeLength 需要自定義設置，以秒為單位
③. checkVersionToLoadUpdate() 中最新版本apk的下載鏈接 downloadApkUrl 不要配置錯
③? 使用步驟：
①. 前端代碼更新完成后，確定修改一下 當前版本號 version，可以遞增加一就好
②. 代碼打包（我是云打包）后，將得到的 打包文件（apk 等） 準確放置于 下載鏈接 downloadApkUrl 下
③. 更新服務端配置項：android_app_version，確認與第①步中的版本號一致
