微信小程式--多張圖片下載問題--for迴圈出現 漏下,亂序。最多下載5張圖片的問題解決(附帶個人開發小程式原始碼)
阿新 • • 發佈:2018-11-15
微信小程式多圖下載,之前肯定對單張圖片下載瞭解了。這裡就不再多說。
首先,多圖下載肯定是用到迴圈了。那麼問題就出在迴圈這裡。在迴圈裡呼叫單圖下載方法。這樣就會出現一個問題,就是下載時先遍歷完了,然後再依次執行wx.downloadfile 獲取到下載的臨時檔案路徑,再使用wx.saveImageToAlbum這個API。如果除錯過的話,你就發現這兩個api是非同步執行的,也就是各執行各的。這樣就會出現問題。無法掌握下載的具體情況,是否完成,還是失敗。
在下載前,小程式平臺域名配置等工作要做好。還有就是要獲取使用者的下載許可權。
那麼如何解決這個問題呢?
那就是使用回撥函式,這樣就可以確保每次都執行正確後,再執行下一次迴圈。參考部落格:微信小程式學習2.js基本使用之block回撥函式使用
這就是要點。。。
2018-08-10 09 38 修改完善
看下我的程式碼吧。。記得借鑑就可以,一定不要貼上。
//下載內容 dow_temp: function (str, i, all_n,callback){ var that = this; wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 使用者已經同意小程式使 const downloadTask =wx.downloadFile({ url: str, success: function (res) { var temp = res.tempFilePath wx.saveImageToPhotosAlbum({ filePath: temp, success: function () { }, fail:function(){ wx.showToast({ title: '第' + i +'下載失敗', }) } }) }, fail: function (res) { wx.showToast({ title: '下載失敗', }) } }) downloadTask.onProgressUpdate((res) => { if(res.progress == 100){ callback(res.progress); var count = that.data.percent_n;//統計下載多少次了 that.setData({ percent_n:count+1 }) if (that.data.percent_n == all_n){//判斷是否下載完成 that.setData({//完成後,清空percent-N,防止多次下載後,出錯 percent_n: 0 }) that.dowNum(); } } }) }, fail:function(){ wx.showToast({ title: '獲取授權失敗', }) } }) }, download:function(){ var that = this; var data = that.data.itemData.pic_essey; var dow_arr = that.data.dow_arr; wx.showLoading({ title: '圖片下載中..', }) var all_n = data.length; for(let i=0,j=1;i<all_n;i++,j++){ that.dow_temp(data[i],j,all_n,(text)=>{ if(text == 100){ wx.showLoading({ title: j + '/'+ all_n + '下載中', duration:10000 }) if(j == all_n){ wx.showToast({ title: '下載完成', duration:1000 }) } }else{ wx.showToast({ title: '下載失敗', }) } console.log('拿到值了是'+text); }) } },
好了,如果電腦上測試的話,出現下載只能下載5張,,就改成遠端手機測試。還有就是可能部分手機不能下載。那就是沒有獲取使用者下載許可權的原因了。。如果有其他的原因,請留言。
請多看看下面的程式碼:
for(let i=0,j=1;i<all_n;i++,j++){
that.dow_temp(data[i],j,all_n,(text)=>{
if(text == 100){
wx.showLoading({
title: j + '/'+ all_n + '下載中',
duration:10000
})
if(j == all_n){
wx.showToast({
title: '下載完成',
duration:1000
})
}
}else{
wx.showToast({
title: '下載失敗',
})
}
console.log('拿到值了是'+text);
})
}
這裡放上我小程式的原始碼:歡迎提出修改意見。中玉玉器微商平臺
就基於回撥,在一次下載成功後,再執行下一次。