我的使用
1.在首页引入插件
<yomol-upgrade ref="yomolUpgrade"></yomol-upgrade>
在mounted中调用yomolUpgrade中的方法
this.$refs.yomolUpgrade.show() //可以检测是否需要更新
<template>
<view class="mark" v-if="visible || cmdProgressShow" :style="{background:((visible || cmdProgressShow) ?'rgba(0,0,0,0.6)':'')}">
//是否要更新的弹框
<u-modal v-if="visible" :show="visible" confirmText="更新" :title="title" :showCancelButton='showCancelButton' @confirm="onSureClick" @cancel="visible = false"></u-modal>
//更新进度弹框
<cmd-progress v-if="cmdProgressShow" class="progress" type="circle" stroke-color="#a9bcff" :stroke-width="12" :percent="progress"></cmd-progress>
</view>
</template>
<script>
//cmd-progress进度条组件 - DCloud 插件市场 （更新时显示的）进度条组件
import cmdProgress from '../cmd-progress/cmd-progress.vue'
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
}
},
methods: {
show() {
setTimeout(() => {
if(this.success){
this.yomolMark = true
let that = this;
plus.runtime.getProperty(plus.runtime.appid, async (widgetInfo) => { //通过api获取appId，版本号
// console.log(plus.runtime.appid);
var platform = uni.getSystemInfoSync().platform
var info = {
platform: platform, //android
version: widgetInfo.version, //版本号
name: widgetInfo.name //子网格App
};
var res
uni.request({
url: url, //调用后端获取更新地址
method: 'GET',
data: info,
success: (request) => {
// console.log(request);
uni.hideLoading();
res = request.data.data || request.data
// console.log(res);
this.upDataUrl = res.url
// console.log('热更新', "当前版本:" + info.version, "最新版本:" + res.code, res)
// console.log(res.code!==1);
if(res.code!==1){
if(res.url.indexOf('.wgt') >= 0){ //热更新
uni.showLoading({
title: '加载中',
mask:true
});
//下载更新文件
uni.downloadFile({
url: res.url,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult.tempFilePath, {
force: false
}, function() {
console.log('install success...');
uni.hideLoading();
plus.runtime.restart();
}, function(e) {
uni.showToast({
title: '升级失败',
icon: 'none'
})
});
}
this.yomolMark = false
}
});
}else if(res.url.indexOf('.apk') >= 0){ //冷更新
that.upgradeType = 'apk'
that.upgradeContent = res.remark
that.upgradeUrl = res.url
this.visible = true
if(res.isForce === 0){ //非强制更新
this.showCancelButton = true //显示取消按钮
}else if(res.isForce === 1){ //强制更新
this.showCancelButton = false //不显示取消按钮
}
}
}else {
// console.log(this.showStyle);
if(this.showStyle!==''){
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
}
}
},
fail: function(err) {
console.error(err)
uni.showToast({
title: err.message,
icon: 'none',
duration: 2000
});
uni.hideLoading();
}
});
})
}
}, 100);
},
//冷更新会有弹框，用户可选择是否需要更新，点击确认按钮后，调用此方法
onSureClick(){
var platform = uni.getSystemInfoSync().platform //android
this.visible = false
console.log(platform);
// if(platform == 'ios' && this.type == 'pkg'){
// plus.runtime.openURL(this.url);
// }else{
// this.downloading = true
console.log(this.upDataUrl);
var downloadTask = uni.downloadFile({
url: this.upDataUrl,
success: (downloadResult) => {
console.log(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>
<style>
.mark{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1000;
}
.view{
width: 80vw;
height: 70vw;
background-color: white;
border-radius: 15upx;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: center;
}
.title{
margin-top: 20upx;
color: #C40000;
font-weight: bold;
font-size: 38upx;
text-align: center;
}
.tip{
margin-top: 20upx;
margin-left: 30upx;
align-self: flex-start;
font-size: 32upx;
font-weight: 600;
color: black;
}
.scroll{
width: 100%;
height: 300upx;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
}
.item{
margin-left: 50upx;
text-align: left;
font-size: 30upx;
}
.btns{
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 10upx;
}
.icon{
width: 45upx;
height: 45upx;
margin-right: 10upx;
}
.sure{
padding: 10upx 0;
text-align: center;
color: #C40000;
font-size: 30upx;
font-weight: 500;
}
.progress{
margin-bottom: 20upx;
}
</style>