一. 前言
近期進(jìn)行 Uniapp 的開(kāi)發(fā)哼丈，在項(xiàng)目發(fā)布的最后需要實(shí)現(xiàn)版本的自動(dòng)檢測(cè)和更新下載功能
特地在此進(jìn)行文章的整理，以方便道友們減少前進(jìn)道路上的坎坷，多謝指摘 ...
注： 本次指導(dǎo)匈棘，以更新
安卓應(yīng)用為案例（非熱更新）鹃愤，ios馍资、小程序等可舉一反三使兔，稍作優(yōu)化泽艘！
二. 設(shè)計(jì)思路
1. 在服務(wù)端配置一個(gè)最新的應(yīng)用版本號(hào)槐壳；
并將打包生成的 apk(安卓應(yīng)用) 置于服務(wù)器，保證可成功訪問(wèn)的鏈接
2. 在前端 Uniapp 的最常用的訪問(wèn)頁(yè)面 (比如吨灭，鄙人選取的是 首頁(yè)vue);
設(shè)置當(dāng)前應(yīng)用的版本號(hào)；
并進(jìn)行代碼編寫(xiě)刑巧，判斷緩存時(shí)間和版本號(hào)的大行帧繁莹；
進(jìn)而通過(guò)提示窗口特幔，指導(dǎo)用戶實(shí)現(xiàn)版本的更新下載等 ...
三. 代碼配置實(shí)現(xiàn)
- 代碼的編寫(xiě)與配置遭赂，需要分服務(wù)端和UniAPP前端的修改，不要混亂锌畸，按部就班就好
①? 服務(wù)端代碼配置
- 首先需要配置一下最新的應(yīng)用版本
以我的ThinkPHP5.1框架結(jié)構(gòu)為例，參考如下：
- 定義檢測(cè)安卓版本的請(qǐng)求鏈接
以我的PHP實(shí)現(xiàn)方式為例如下靖避，注意：補(bǔ)充了一下鄙人自定義使用的函數(shù)showMsg()
/**
* 檢測(cè)安卓版本的請(qǐng)求鏈接
* @param Request $request
*/
public function checkAndroidVersion(Request $request){
//此處 version 為配置的一個(gè)版本號(hào)盆犁，整數(shù)命咐，例：102
$version = config("app.android_app_version");
return showMsg(1,"checkAndroidVersion",['version'=>$version,'timestamp'=>time()]);
}
//TODO 補(bǔ)充自定義函數(shù) showMsg()
/**
* 公用的方法 返回json數(shù)據(jù)，進(jìn)行信息的提示
* @param $status 狀態(tài)
* @param string $message 提示信息
* @param array $data 返回?cái)?shù)據(jù)
*/
function showMsg($status,$message = '',$data = array()){
$result = array(
'status' => $status,
'message' =>$message,
'data' =>$data
);
exit(json_encode($result));
}
②? UniAPP 前端代碼配置指導(dǎo)
- 首先進(jìn)行當(dāng)前版本號(hào)的設(shè)置
一般在每次確定發(fā)布前進(jìn)行更新即可谐岁，同時(shí)要保證和服務(wù)器中的版本號(hào)一致（建議使用整數(shù)侈百，遞增 ↑）
data() {
return {
version:101,
}
},
- 然后進(jìn)行檢測(cè)操作
為保證版本檢測(cè)的即時(shí)性，我選擇將方法配置于onShow()中
onShow(){
uni.getSystemInfo({
success:(res) => {
//檢測(cè)當(dāng)前平臺(tái)翰铡，如果是安卓則啟動(dòng)安卓更新
if(res.platform=="android"){
this.AndroidCheckUpdate();
}
}
})
},
- 后面就是處理上面一步中所調(diào)用的自定義方法 ——
AndroidCheckUpdate()等
建議閱讀代碼，參考我的注釋進(jìn)行理解即可讽坏，不算麻煩
methods: {
/**
* 安卓應(yīng)用的檢測(cè)更新實(shí)現(xiàn)
*/
AndroidCheckUpdate:function(){
var _this = this;
uni.request({
//請(qǐng)求地址锭魔，設(shè)置為自己的服務(wù)器鏈接
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;
// 判斷緩存時(shí)間
uni.getStorage({
key: 'tip_version_update_time',
success: function (res) {
var lastTimeStamp = res.data;
//定義提醒的時(shí)間間隔，避免煩人的一直提示路呜，一個(gè)小時(shí)：3600迷捧；一天：86400
var tipTimeLength = 3600;
if((lastTimeStamp+tipTimeLength) > currTimeStamp){
//避免多次提醒，不要更新
console.log("避免多次提醒胀葱，不要更新");
}else{
//重新設(shè)置時(shí)間戳
_this.setStorageForAppVersion(currTimeStamp);
//進(jìn)行版本型號(hào)的比對(duì) 以及下載更新請(qǐng)求
_this.checkVersionToLoadUpdate(server_version, _this.version);
}
},
fail:function(res){
_this.setStorageForAppVersion(currTimeStamp);
}
});
},
fail: () => {},
complete: () => {}
});
},
/**
* //設(shè)置應(yīng)用版本號(hào)對(duì)應(yīng)的緩存信息
* @param {Object} currTimeStamp 當(dāng)前獲取的時(shí)間戳
*/
setStorageForAppVersion:function(currTimeStamp){
uni.setStorage({
key: 'tip_version_update_time',
data: currTimeStamp,
success: function () {
console.log('setStorage-success');
}
});
},
/**
* 進(jìn)行版本型號(hào)的比對(duì) 以及下載更新請(qǐng)求
* @param {Object} server_version 服務(wù)器最新 應(yīng)用版本號(hào)
* @param {Object} curr_version 當(dāng)前應(yīng)用版本號(hào)
*/
checkVersionToLoadUpdate:function(server_version,curr_version){
if(server_version > curr_version){
//TODO 此處判斷是否為 WIFI連接狀態(tài)
if(plus.networkinfo.getCurrentType()!=3){
uni.showToast({
title: '有新的版本發(fā)布漠秋，檢測(cè)到您目前非Wifi連接，為節(jié)約您的流量抵屿，程序已停止自動(dòng)更新庆锦，將在您連接WIFI之后重新檢測(cè)更新',
mask: true,
duration: 5000,
icon:"none"
});
return;
}else{
uni.showModal({
title: "版本更新",
content: '有新的版本發(fā)布，檢測(cè)到您當(dāng)前為Wifi連接轧葛，是否立即進(jìn)行新版本下載搂抒？',
confirmText:'立即更新',
cancelText:'稍后進(jìn)行',
success: function (res) {
if (res.confirm) {
uni.showToast({
icon:"none",
mask: true,
title: '有新的版本發(fā)布，檢測(cè)到您目前為Wifi連接尿扯，程序已啟動(dòng)自動(dòng)更新求晶。新版本下載完成后將自動(dòng)彈出安裝程序',
duration: 5000,
});
//設(shè)置 最新版本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('稍后更新');
}
}
});
}
}
},
}
四. 運(yùn)行效果：
附錄：
①? 如果 測(cè)試遇到報(bào)錯(cuò) :ReferenceError: plus is not defined
那是因?yàn)闆](méi)有使用安卓真機(jī)、虛擬機(jī)測(cè)試衷笋，如果使用了谷歌瀏覽器是不支持的哦
②? 注意事項(xiàng)：
①. AndroidCheckUpdate() 中的請(qǐng)求地址 url 不要錯(cuò)哦
②. AndroidCheckUpdate() 中的 tipTimeLength 需要自定義設(shè)置芳杏，以秒為單位
③. checkVersionToLoadUpdate() 中最新版本apk的下載鏈接 downloadApkUrl 不要配置錯(cuò)
③? 使用步驟：
①. 前端代碼更新完成后，確定修改一下 當(dāng)前版本號(hào) version辟宗，可以遞增加一就好
②. 代碼打包（我是云打包）后爵赵，將得到的 打包文件（apk 等） 準(zhǔn)確放置于 下載鏈接 downloadApkUrl 下
③. 更新服務(wù)端配置項(xiàng)：android_app_version，確認(rèn)與第①步中的版本號(hào)一致
