省流：用了uView组件步骤简单，看步骤1、4即可，没有用的分两种情况，(1)要出弹窗告知用户需要版本更新，要就看步骤1、2、3 (2)不要通知就看步骤1、2，步骤3主要内容是没有用uView组件，用了其它组件的实现流程(思路)
1、需要先获取当前app版本信息
注意：plus只能在手机端app上才可以运行，运行下面的代码需要进行真机调试，将对应的值打印到页面即可
plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
// appInfo为当前应用程序的所有信息
console.log(JSON.stringify(appInfo));
// 获取版本名称
console.log(appInfo.version);
// 获取版本号
console.log(appInfo.versionCode);
// 获取当前应用id
console.log(appInfo.appid);
});2、一个版本更新的接口
axios({
url: '后端接口',
params: {
// '需要携带的参数'
}
}).then(res => {
let url = res.url
var dtask = plus.downloader.createDownload(url, {},
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
});
}
});
try {
console.log('开始下载');
dtask.start(); // 开启下载的任务
var prg = 0;
var showLoading = plus.nativeUI.showWaiting(
"正在下载"); //创建一个showWaiting对象
dtask.addEventListener('statechanged', function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
showLoading.setTitle("正在下载");
break;
case 2:
showLoading.setTitle("已连接到服务器");
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100
);
showLoading.setTitle(" 正在下载" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
//下载完成
break;
}
});
} catch (err) {
plus.nativeUI.closeWaiting();
uni.showToast({
title: '更新失败-03',
mask: false,
duration: 1500
});
}
})3、上诉代码有改进的地方，一般我们都会app更新会出现一个更新的模态框，告知用户需要更新
这边模态框利用uView组件实现效果，详细地址
如果不想使用，按照上方第二部即可，或者用一些其它组件的模态框，大抵过程就是
- 调取后端接口，检验版本号是否与当前用户app版本一致，获取当前app版本号的方法在第一步
- 不一致便进入我们提前设置好的弹窗，告知用户当前的更新内容有什么，此时弹窗有两个事件，确认事件、取消事件，点击确实事件便是用户确定更新，拿到该按钮的函数回调，执行下载流程即可
- 下载流程：是上方我们调取节后拿到res后执行的内容，只需要把安装包url替换掉即可使用。亦可将其封装为工具函数。
4、下面便是使用uview组件的实现，如果不想使用uview，看我上面文字的流程即可：
找到uview-ui文件下的components/u-full-screen/u-full-screen.vue文件
将其修改为下面的内容，此时表示我们像该页面传递url参数和content参数即可实现完整下载功能，url是安装包地址，content是版本更新的内容描述
<template>
<u-modal v-model="show" confirm-text="升级" title="发现新版本" @confirm="confirm">
<view class="u-update-content">
<rich-text :nodes="content"></rich-text>
</view>
</u-modal>
</template>
<script>
export default {
data() {
return {
show: false,
content: ``,
}
},
onLoad(option) {
this.content = decodeURIComponent(option.content)
this.url = option.url
console.log(option)
},
onReady() {
this.show = true;
},
methods: {
confirm() {
this.closeModal();
var downloadApkUrl = this.url
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
});
}
});
try {
dtask.start(); // 开启下载的任务
var prg = 0;
var showLoading = plus.nativeUI.showWaiting(
"正在下载"); //创建一个showWaiting对象
dtask.addEventListener('statechanged', function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
showLoading.setTitle("正在下载");
break;
case 2:
showLoading.setTitle("已连接到服务器");
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100
);
showLoading.setTitle(" 正在下载" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
//下载完成
break;
}
});
} catch (err) {
plus.nativeUI.closeWaiting();
uni.showToast({
title: '更新失败-03',
mask: false,
duration: 1500
});
}
},
closeModal() {
uni.navigateBack();
}
}
}
</script>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
.u-full-content {
background-color: #00C777;
}
.u-update-content {
font-size: 26rpx;
color: $u-content-color;
line-height: 1.7;
padding: 30rpx;
}
</style>上诉组件改造完成后，我们的第二部代码便可以变成
axios({
url: '后端接口',
params: {
// '需要携带的参数'
}
}).then(res => {
//判断一下后端给的最新版本号返回值是否与当前一致
//判断......if()
//判断......{}else
//判断......{}
//千万不能无脑cv，看下是否符合下面的返回值形式，url新包地址，content更新描述内容
let url = res.data.url
let content = res.data.content
//this.$u.route，引入uview的时候便会自动挂载，没有就用正常的页面跳转
this.$u.route(`/uview-ui/components/u-full-screen/u-full-screen?url=${url}&content=${content}`);
})结尾：别忘记了app关于界面，也需要一个更新，不过这个相对简单一些
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
