- 前言 近期进行
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