uniapp APP项目提示用户有新版本更新
自己想的更新思路,有较好办法的欢迎指出 !
我的思路是,通过接口判断,当前是否为最新版本,如果不是最新版本提示用户是否更新.这块版本判断是前端判断还是后端判断都无所谓,我这边例子是后端判断的,逻辑都是一样的,可以自行修改.
首先判断获取接口判断当前是否为最新版本
onLoad() {
this.updateApp();//检测是否有新版本
},
methods:{
//检查软件更新
updateApp() {
let _this = this;
//plus.runtime.getProperty 这块是获取当前版本号的
plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
//这块是自己封装的请求接口 你们直接按照自己的请求修改即可
this.$api.post(global.apiUrls.publicUpdateAPP, {
version_name: widgetInfo.version,//这块是我给后端传的当前版本号
type: 1,//因为我们分 员工端和用户端这块是用来做区分的 你们传参和后端订好字段 按需修改即可
}).then(res => {
if (res.data.code == 1 && res.data.data.is_new == 1) {
//检测当前处于安卓 还是ios
if (uni.getSystemInfoSync().platform === 'android') {
//如果要做热更新的话可以自己在这块写逻辑,选择性的赋值下载地址,可以赋值wgt包也可以赋值apk包都是可以的
_this.upDataUrl= res.data.data.version_url;//赋值最新版本下载地址
_this.version = res.data.data.version;//赋值最新版本号
_this.updata = true;//显示更新弹框
} else {
_this.iosupdata = true;//显示苹果更新弹框
_this.version = res.data.data.version;//赋值最新版本号
}
}
})
});
},
}
目前主流app分为,安卓和苹果两大类.
咱们先说安卓版本更新!
安卓因为各家手机都有自己的应用平台,所以想直接跳转到应用市场上面更新的办法,我这边没有想到.有大佬实现的可以评论学习.既然没办法跳转应用市场进行更新,那么我们就需要拿到一个可以下载最新包的地址.拿到后下载,然后跳转到安装界面.
html界面 此处使用了uview ui组件 ,想复制粘贴html的兄弟需要,引用uview.
<u-popup v-model="updata" mode="center" :mask-close-able="false" :mask-custom-style='styles' border-radius="14">
<view class="update-box" v-show="!isupdate">
<view class="update-text">
检测到有新版本{{version}},是否现在更新?
view>
<view class="update-button">
<view class="no-button" @tap.stop="noUpdate">
暂不更新
view>
<view class="ok-button" @tap.stop="okUpdate">
立即更新
view>
view>
view>
<view class="update-box" v-show="isupdate">
<view class="update-text">
更新增请勿退出!
view>
<view class="schedule">
<u-line-progress :striped-active="true" :striped="true" :percent="schedule" active-color="#ff9900">u-line-progress>
view>
view>
u-popup>
一个是提示用户是否更新,如果用户点击更新按钮后,显示下载进度,如果用户取消更新,关闭提示弹框.
data需要用到的值 苹果安卓共用
data() {
return {
updata: false, //更新弹框显示
version:'',//版本号
styles:{background: 'rgba(0, 0, 0, 0.1)'},
schedule:'',//进度
isupdate:false,//是否更新
upDataUrl:0,//下载地址
iosupdata:false,//苹果更新
}
},
methods:{
//安卓界面用户点击更新
okUpdate(){
this.isupdate = true;
const downloadTask = uni.downloadFile({
url: this.upDataUrl, //这块地址就是后端返回的最新版本安装包地址
success: (res) => {
if (res.statusCode === 200) {
console.log('下载成功');
//安装
plus.runtime.install(res.tempFilePath, {
force: false
}, function() {
console.log('install success...');
plus.runtime.restart();
}, function(e) {
console.error('install fail...');
});
} else {
uni.saveFile({
tempFilePath: res.tempFilePath,
success: function(red) {
// console.log('保存成功')
console.log('下载失败，中断下载任务')
downloadTask.abort() //中断下载任务
}
});
}
},
});
downloadTask.onProgressUpdate((res) => {
console.log(res.progress)
this.schedule = res.progress;
// setTimeout(() => {
// }, 1000);
// _this.schedule = res.progress;
// console.log(_this.schedule)
// 测试条件，取消下载任务。
if (res.progress > 99) {
this.updata = false;
}
});
},
//用户点击取消 不更新
noUpdate(){
this.updata = false;
},
}
苹果端的话咱们可以引导客户调转苹果appstore进行更新
html
因为苹果不需要有下载进度所以html中没有进度条
<u-popup v-model="iosupdata" mode="center" :mask-close-able="false" :mask-custom-style='styles' border-radius="14">
<view class="update-box" v-show="!isupdate">
<view class="update-text">
检测到有新版本{{version}},是否现在更新?
view>
<view class="update-button">
<view class="no-button" @tap.stop="iosNoUpdata">
暂不更新
view>
<view class="ok-button" @tap.stop="iosOkUpdate">
立即更新
view>
view>
view>
u-popup>
data所需的参数在上方安卓更新的data中已经包含
method:{
// ios端点击取消更新
iosNoUpdata(){
this.iosupdata = false;
},
//ios 更新
iosOkUpdate(){
//这块是appleId 获取方式可参考下方链接 这块可以使用变量数据也从后端接口获取 为了方便读者理解此处没有用变量
let appleId=1549**8327 //app的appleId
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
}, function(e) {
console.log('Open system default browser failed: ' + e.message);
});
},
}
ios获取appleId的方法参考如下链接
appleId获取
https://blog.csdn.net/SLife4599/article/details/114033109