小程序页面效果 - 下载图片并且显示进度

图片效果

wxml

js

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

作者：Sunsin
链接：http://www.wxapp-union.com/portal.php?mod=view&aid=4363
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

相关文章：

• 微信小程序：一个json帮你完成分享朋友圈图片
• 微信小程序设置图片固定比例
• 微信小程序带图片弹窗简单实现