问答

如何让这个弹窗只执行一次?

作者:admin 2021-08-20 我要评论

list里面有8张图片 只在保存完最后一张时才弹窗提示 而不是保存一张就弹窗一次 请问这个应该怎么改? this.data.list.map((res,index)={ wx.downloadFile({ url:...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

list里面有8张图片 只在保存完最后一张时才弹窗提示 而不是保存一张就弹窗一次 请问这个应该怎么改?

this.data.list.map((res,index)=>{
      wx.downloadFile({
          url: res.image,
          success: function (res) {
            var that = index
            if (res.statusCode === 200) {
              let img = res.tempFilePath;
              wx.saveImageToPhotosAlbum({
                filePath: img,
                success(res) {
                  console.log(that)
                  tt.showToast({
                    title: '保存成功',
                    icon: 'none',
                    duration: 500
                  })
                }
              });
            }
          }
      })
    })
###

转为 Promise 形式后利用 Promise.all 统一处理。

wx.downloadFileAsync = (options = {}) => {
    return new Promise((resolve, reject) => {
        let successFunc = options.success,
            failFunc = options.fail;
        options.success = (res) => {
            successFunc && successFunc(res);
            resolve(res);
        };
        options.fail = (err) => {
            failFunc && failFunc(err);
            reject(err);
        };
        wx.downloadFile(options);
    });
}

Promise.all(
    this.data.list.map(res => wx.downloadFileAsync({ url: res.image })
).then(reses => {
    if (reses.every(res => res.statusCode === 200)) {
        console.log('全部下载成功');
    }
});

P.S. 徒手写的,没测,思路能看懂就行。只写了 downloadFileAsync 的部分,saveImageToPhotosAlbum 你自己照着写。

徒手写怕有问题的话,微信小程序官方自带了 Promise 化工具库:https://developers.weixin.qq....

第三方实现的话可以看:https://github.com/fudiwei/wx...

###

写个flag,每保存成功一次加一,flag为list.length的时候弹框,最简单的思路

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器