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

发布时间:2023-08-09 21:54:53 作者:xiaoai1234 阅读量:6605

以下这篇关于小程序页面效果的开发,为大家介绍如何实现 下载图片并且显示进度 

 图片效果

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 }

多程序小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店

***本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。

我要评论

网友评论


评论时间:2024-03-19 05:00:03

app开发人员经过多年积累,具所有app开发 备丰富的专业经验和敏锐的市场洞察力,对客户需求有着深入了解哈尔滨手机app制作 需求有着深入了解

回复
秒制作
Catfish(鲶鱼) Blog V 4.7.3