html:这边的进度条用的是vant框架的进度条，不要问为什么不用小程序的Progress，因为反应迟钝
不了解vant的也可以顺便了解vant很好的框架，地址：https://youzan.github.io/vant-weapp/#/progress
<view class="bili"> <view style="width:35%;line-height:60rpx;text-align: left;">下载状态：</view> <view style="width:65%;margin-top:28rpx"><van-progress percentage="{{add}}" /></view> </view> <view class="btn" bindtap="downloadFile" data-url="{{message.url}}" data-type="{{message.imagetype}}"> 下载文件 </view>
js:data声明的参数就不写了，这个type没用到，因为我们后端比较良心带了后缀，你们的后端如果不带就要自己拼接一下格式
downloadFile: function(e) { var that=this console.log(e); let type = e.currentTarget.dataset.type; let url = e.currentTarget.dataset.url; const downloadTask = wx.downloadFile({ url: url, header: {}, success: function(res) { var filePath = res.tempFilePath; that.setData({//通过setData来修改 filePath: filePath, }); console.log(filePath); wx.openDocument({ filePath: filePath, success: function(res) { console.log(‘打开文档成功‘) }, fail: function(res) { console.log(res); }, complete: function(res) { console.log(res); } }) }, fail: function(res) { console.log(‘文件下载失败‘); }, complete: function(res) {}, }) downloadTask.onProgressUpdate((res) => { if (res.progress === 100) { this.setData({ add: ‘100‘ }); } else { this.setData({ add: res.progress }); } }); },
原文：https://www.cnblogs.com/hurenjie/p/13280501.html