微信小程序--多张图片下载问题--for循环出现漏下，乱序。最多下载5张图片的问题解决（附带个人开发小程序源码）

微信小程序多图下载，之前肯定对单张图片下载了解了。这里就不再多说。

首先，多图下载肯定是用到循环了。那么问题就出在循环这里。在循环里调用单图下载方法。这样就会出现一个问题，就是下载时先遍历完了，然后再依次执行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);
    })
  }

这里放上我小程序的源代码：欢迎提出修改意见。中玉玉器微商平台

就基于回调，在一次下载成功后，再执行下一次。

微信小程序--多张图片下载问题--for循环出现 漏下，乱序。最多下载5张图片的问题解决（附带个人开发小程序源码）

猜你喜欢

微信小程序--多张图片下载问题--for循环出现漏下，乱序。最多下载5张图片的问题解决（附带个人开发小程序源码）