小程序怎么实现下载图片并且显示进度的页面效果

本篇内容介绍了"小程序怎么实现下载图片并且显示进度的页面效果"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

图片效果

wxml

js

1 downImg: function(e) {2 var _this = this;34 // 获取图片地址(http://www.playsort.cn/...)5 var img = e.currentTarget.dataset.src;67 // 下载监听进度8 const downloadTask = wx.downloadFile({9 url: img,10 success: function(res) {11 // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容12 console.log(res)13 if (res.statusCode === 200) {14 wx.saveImageToPhotosAlbum({15 filePath: res.tempFilePath,16 success: function(res) {17 wx.showToast({18 title: '保存图片成功!~',19 });20 },21 fail: function(res) {22 wx.showToast({23 title: '保存图片失败!~',24 });25 }26 })27 }28 }29 });30 downloadTask.onProgressUpdate((res) => {31 if (res.progress === 100) {32 this.setData({33 progress: ''34 });35 } else {36 this.setData({37 progress: res.progress + '%'38 });39 }40 });41 }

"小程序怎么实现下载图片并且显示进度的页面效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！