
uni-app中实现安卓端应用更新和安装的两种进度展示方式
文章摘要
MxGPT
本文介绍了在uniapp开发项目中实现安卓端的更新和安装,并提供了两种进度展示方式供选择。首先通过判断客户端平台确定使用哪种更新方式。然后介绍了根据后台返回的版本号进行更新的逻辑。接下来展示了使用u-line-progress组件和plus.nativeUI方式展示更新进度的代码示例。最后强调代码可能不够严谨,仅供参考使用。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉前言
使用
uniapp
开发的项目,使用的uview1.0
,需要在安卓端实现更新、安装,并带有进度条
介绍两种进度展示方式,各位自行选择:
1、plus.nativeUI方式
2、u-line-progress组件
判断客户端
1
2
3
4
5
6
7uni.getSystemInfo({ //获取系统信息
success: (res) => {
if (res.platform == "android") {
//此处业务逻辑省略
}
}
})更新版本
说明:由于我这里和后台的逻辑是,首次请求后台时,后台将
版本号
、下载url
、版本信息
等
返给前端,前端将版本号进行缓存,然后下次检查版本时,将版本号传给后端,后端通过返回状态,
判断是否需要更新(方式比较low,毕竟后台就是这么写的,咱是前端只能按他的来😅)使用u-line-progress和plus.nativeUI方式
1
2
3
4
5
6
7<u-modal v-model="showProcess" :show-cancel-button="true" :show-confirm-button="false" title="软件更新" @cancel="cancelDown" cancel-text="取消更新">
<view class="u-update-content">
<u-line-progress :percent="percent" :show-percent="true" :striped-active="true" :striped="true">
</u-line-progress>
<p class="tipSpan">软件更新中,请勿断开相框电源</p>
</view>
</u-modal>核心代码
此处去掉注释,就是第二种方式,默认使用进度条方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46this.dtask = plus.downloader.createDownload(this.downloadUrl, {}, function(d, status) { //新建下载任务
if (status == 200) { //当下载完成
plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(error) { //安装应用
uni.showToast({
title: '安装失败',
duration: 1500,
icon: 'none'
});
})
} else {
uni.showToast({
title: '更新失败',
duration: 1500,
icon: 'none'
});
}
})
this.dtask.start();
var prg = 0;
// var showLoading = plus.nativeUI.showWaiting("正在下载");
this.showProcess = true;
let _this = this;
this.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 + "% ");
_this.percent = prg;
console.log(prg);
break;
case 4:
// plus.nativeUI.closeWaiting(); //关闭系统提示框
this.showProcess = false;
//下载完成
break;
}
});
做的比较粗糙,可能不太严谨,仅供参考
- 感谢你赐予我前进的力量
打赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用CC BY-NC-ND 4.0协议,完整转载请注明来自满心记
评论
匿名评论
隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果