跨平台应用开发进阶(十五) ：uni-app 自定义 showToast并实现下载进度条

本文主要是介绍跨平台应用开发进阶(十五) ：uni-app 自定义 showToast并实现下载进度条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

在《跨平台应用开发进阶(七) ：uni-app 自定义 showToast》中讲解了利用uni-app跨平台开发框架开发多终端APP时，应用HBuilder自身提供的弹窗不满足业务需求，故开发自定义弹窗组件showToast。

二、代码实现

应用自定义 showToast在实现版本更新时，需要实现检测到APP发新版时，可以更新下载新版本，并显示下载进度条。状态管理模块实现如下：

// 开始下载任务
const downloadTask = uni.downloadFile({url: data.url,// 接口调用成功success: (downloadResult) => {uni.hideLoading();if (downloadResult.statusCode === 200) {plus.runtime.install(downloadResult.tempFilePath, {force: false}, function() {plus.runtime.restart();}, function(e) {console.error('install fail...');});}},// 接口调用失败fail: (err) => {uni.showToast({icon:'none',mask:true,title: '安装失败，请重新下载',});},// 接口调用结束complete: () => {downloadTask.offProgressUpdate(); //取消监听加载进度}});//监听下载进度downloadTask.onProgressUpdate(res => {state.percent = res.progress;// console.log('下载进度百分比:' + res.progress); // 下载进度百分比// console.log('已经下载的数据长度:' + res.totalBytesWritten); // 已经下载的数据长度，单位 Bytes// console.log('预期需要下载的数据总长度:' + res.totalBytesExpectedToWrite); // 预期需要下载的数据总长度，单位 Bytes});

视图部分实现如下：

<view v-if="downLineShow" style="width: 80%; height: 30rpx;"><text>新版本下载中，请稍等</text><progress :percent="percent" font-size='24rpx' border-radius='44rpx' activeColor='#D52424' show-info stroke-width="10"></progress>
</view>