小程序怎么實(shí)現(xiàn)下載圖片并且顯示進(jìn)度的頁(yè)面效果

本篇內(nèi)容介紹了“小程序怎么實(shí)現(xiàn)下載圖片并且顯示進(jìn)度的頁(yè)面效果”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 圖片效果

wxml

js

1 downImg: function(e) {2 var _this = this;34 // 獲取圖片地址(http://www.playsort.cn/...)5 var img = e.currentTarget.dataset.src;67 // 下載監(jiān)聽(tīng)進(jìn)度8 const downloadTask = wx.downloadFile({9 url: img,10 success: function(res) {11 // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會(huì)把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容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 }

“小程序怎么實(shí)現(xiàn)下載圖片并且顯示進(jìn)度的頁(yè)面效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！