实现思路
移动端：获取当前系统的版本号，与后台管理中的版本号比较，比较两个版本号不一致，则更新。
后台管理：上传uniapp打包后的.apk文件，自定义版本号。
移动端代码
下载插件
在首页引入插件 yomol-upgrade
<yomol-upgrade ref="yomolUpgrade"></yomol-upgrade>
import yomolUpgrade from "@/components/yomol-upgrade/yomol-upgrade.vue"
export default {
components:{
yomolUpgrade,
},
data() {
return {
yomolMark:false, //本页内容是否可见
}
},
mounted() {
this.$refs.yomolUpgrade.show() //可以检测是否需要更新
},
}
yomol-upgrade插件代码
<template>
<view class="mark" v-if="visible || cmdProgressShow" :style="{background:((visible || cmdProgressShow) ?'rgba(202,208,247,0.6)':'')}">
<cmd-progress v-if="cmdProgressShow" class="progress" type="circle" stroke-color="#a9bcff" :stroke-width="12" :percent="progress">下载中</cmd-progress>
<view style="font-size:32rpx; color: #8696ca;">下载中</view>
<view style="color: #1e005b">更新版本：{{newVersion}}</view>
<view style="color: #ffda81;">当前版本：{{nowVersion}}</view>
</view>
</template>
<script> //cmd-progress进度条组件 - DCloud 插件市场 （更新时显示的）进度条组件
import cmdProgress from '../cmd-progress/cmd-progress.vue';
import {getValidVersion} from '@/api/system/user.js';
import config from '@/config';
const baseUrl = config.baseUrl;
export default {
props:{
showStyle:{
type:String,
default:''
}
},
components: {
cmdProgress
},
data() {
return {
yomolMark:false, //本页内容是否可见
visible: false, //弹框是否可见
title:'发现新版本', //弹框标题
showCancelButton:false, //是否显示取消按钮
isForce:0, //是否强制更新
upDataUrl:'', //更新地址
cmdProgressShow:false, //更新进度是否显示
progress: 0,
contents: [],
downloading: false,
success: true,
newVersion:'',
nowVersion:'',
}
},
methods: {
show() {
setTimeout(() => {
if(this.success){
this.yomolMark = true
let that = this;
plus.runtime.getProperty(plus.runtime.appid, async (widgetInfo) => { //通过api获取appId，版本号
var platform = uni.getSystemInfoSync().platform
var info = {
platform: platform, //android
version: widgetInfo.version, //版本号
name: widgetInfo.name //子网格App
};
var res
this.nowVersion = info.version
//调接口 后台会返回一个版本号和一个下载地址
getValidVersion().then(request => {
uni.hideLoading();
res = request.data
const baseurl = baseUrl.slice(0,-5) //config.js中的地址， 截取掉“:”和四位端口号
this.upDataUrl = baseurl + res.filePath //地址前缀拼接后台返回的地址
//判断当前版本号和后台返回的版本号是否一致
if(info.version != res.versionCode){
//downloadUrl接口返回的应用下载地址
var dtask = plus.downloader.createDownload( this.upDataUrl, {
filename:"_downloads/"+info.name
}, function ( d, status ) {
// 下载完成
if ( status == 200 ) {
uni.showModal({
content:'有新的版本发布，检测到您目前为Wifi连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序。',
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
this.cmdProgressShow = true;
that.onSureClick();
}
}
});
} else {
uni.showToast({
title: '更新失败',
mask: false,
duration: 1500
});
}
});
dtask.start();
}
})
})
}
}, 100);
},
//冷更新会有弹框，用户可选择是否需要更新，点击确认按钮后，调用此方法
onSureClick(){
var platform = uni.getSystemInfoSync().platform //android
this.visible = false
var downloadTask = uni.downloadFile({
url: this.upDataUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult.tempFilePath, {
force: false
}, function() {
plus.runtime.restart();
}, (e) => {
console.log(e);
this.success = false
uni.showToast({
title: '安装升级包失败',
icon: 'none'
})
});
}
}
});
// 下载进度变化事件的监听函数
downloadTask.onProgressUpdate((e)=>{
this.cmdProgressShow = true
this.progress = e.progress
})
}
},
}
</script>
后台管理
后台管理是一个表格 就是一个简单的上传文件的操作，不多赘述啦~
