小程序頁面效果開發(fā) - 下載圖片并且顯示進(jìn)度

以下這篇關(guān)于小程序頁面效果的開發(fā)，為大家介紹如何實現(xiàn) 下載圖片并且顯示進(jìn)度 

 圖片效果

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 // 下載監(jiān)聽進(jìn)度
8. 8 const downloadTask = wx.downloadFile({
9. 9 url: img,
10. 10 success: function(res) {
11. 11 // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
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 }

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店