微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑

摘要:
上周六下午16点左右,公司研发群中扔来一张bug截图。当天21点,群里又扔来bug截图,研发团队二话不说开始查找bug如何复现。22点20分左右,我终于复现了bug。随后就是看源码、搜索、跳坑、爬坑,周日同其他研发小伙伴一样,又是奉献了一天,那个表单规则功能也被搁置。现在,我该写一篇笔记,记录一下那两天发生的狗血过程了…

文章目录

    • 一、起因
    • 二、爬坑之路
      • 2.1、如何复现bug?
      • 2.2、另一种骚操作让bug复现,但这是一个误区!
      • 2.3、scope.writePhotosAlbum保存到相册跟系统存储空间是两个概念!
      • 2.4、查看曾经笔记尝试使用wx.getImageInfo
      • 2.5、非常规操作:频繁点击
      • 2.6、demo复现bug
      • 2.7、解决方案之一:布尔开关
    • 三、验证存储权限
    • 四、demo源码
    • 五、其他说明

一、起因

时间倒退到上周六下午16点23分,产品在公司研发群扔来一张bug截图。如图:周六下午16点多公司群内发来一张bug截图.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第1张图片
随即我在项目中进行了搜索,初步定位到了提示信息所在位置。如图:搜索源码找到了提示信息所在位置.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第2张图片
此时第一反应就是:this.data.poster.qrCode没值呗,接口返回的锅。然后我就没管这事儿了,继续写那个表单规则去了,但事情并没有结束!当晚21点左右,群里又在提获取头像失败的bug。如图:当晚21点左右群里又在提获取头像失败的bug.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第3张图片
一搜索提示,又是前端的提示。如图:在源码中搜索获取头像失败并定位代码.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第4张图片

二、爬坑之路

2.1、如何复现bug?

要想解决问题,必须要先知道如何复现或是找到引起bug的代码。从上面的截图来看,此处是调用了微信小程序中的wx.downloadFile方法下载用户头像。请求进了fail,一般只有两种情况:

  1. 情况一:请求成功,但是success中的代码异常导致报错,此时会进入fail
  2. 情况二:这个请求异常,直接进入fail

于是,艺灵我先是看了下success中的代码,乍眼一看并没有发现异常,里面又是两个wx.downloadFile,全部请求成功后才进行画布的操作。然后我把目标锁在了方案二,即:假设此请求不成功的情况。那么此时的url链接是存在问题的。即:originPoster.headimgurl异常。官方文档说仅支持httpsget请求,在微信小程序开发者工具中进行调试发现都符合要求,而且也不报“获取头像失败”的提示!这就难搞了啊,bug无法复现,咋解决问题呢?

这时看了下群里的聊天,发现他小伙伴也说无法复现bug。但是我们老板张总却能复现此bug!!!我不禁一脸懵逼了起来,心想:这都是什么骚操作才会触发了bug???

一晃又是1个小时,此时已经22点多了,还是没有结果。然后我想了想以往的经历,尝试了一下非常规操作,结果bug复现了!!!经过进一步的尝试,已经可以大概率的触发此bug了!激动的我直接在群里截图报喜!如图:当晚22点24分我终于复现了bug.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第5张图片

你们是不是想知道我是如何复现的?先卖个关子,后面放答案。下面继续讲述爬坑经历,不想看过程的看官拉到下面看答案。

解决还是有点困难的,毕竟刚才是非常规操作导致bug复现。如果是正常操作,要怎么解决呢?此时已经23点了,一时也没有思路,于是我便洗洗睡觉了。

2.2、另一种骚操作让bug复现,但这是一个误区!

次日再看群消息时发现:@鸿恩大神在昨晚23:30分发消息说百分百复现bug了!如图:昨晚23点30分群消息中说百分百复现bug.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第6张图片激动的我立马尝试了一下,结果真是百分百复现啊!什么操作呢?安卓手机关闭微信的存储空间 即可,此时再点分享百分百弹窗!然后,我就被带到了这个误区里面,一直折腾到下午。最后我自己都感觉到这是个误区了,后来便放弃了这个骚操作。

2.3、scope.writePhotosAlbum保存到相册跟系统存储空间是两个概念!

刚刚说了,@鸿恩大神在群里提到关闭微信的存储空间可以百分百复现bug。于是我就顺着产品的思路:“前端去验证有没有授权”。然后在微信官方文档·小程序中进行了搜索,结果找到了一个接口scope.writePhotosAlbum。官方的描述是:“保存到相册”。然后我就开始摸索这个scope.writePhotosAlbum了,事实证明:我再次掉进坑中!

其实判断这个scope.writePhotosAlbum也挺坑的,只在用户未授权的情况下显示一次,当用户拒绝后,就不再弹窗提醒了。然后我花了很长时间在这个坑上面,当时还在纳闷:怎么一会儿有弹窗一会儿又没弹窗,缓存吗???关于如何正确使用scope.writePhotosAlbum,这里参考一篇网络文章《微信小程序授权保存到相册功能》,亲测有效!

当我把代码放项目里成功跑起来后,天真的认为bug已经得到了解决!于是,关闭了系统的存储空间进行测试结果发现翻车了!!!弹窗竟然存在!我瞬间凌乱了…

不知过了多久,我再仔细的审题了一下,这才意识到:**保存到相册跟系统的存储空间完全是两个概念!**然后我果断放弃检测scope.writePhotosAlbum这个方法了。

2.4、查看曾经笔记尝试使用wx.getImageInfo

2018年的时候,艺灵我也折腾过一翻微信小程序,当时也写了一系列的踩坑文章。于是我进行了搜索,找到了几篇相关文章:

  • 微信小程序从入坑到放弃之坑九:canvas合成自定义分享图时wx.getImageInfo的坑
  • 微信小程序从入坑到放弃之坑十:canvas画布缩放的坑
  • 微信小程序从入坑到放弃之坑十一:wx.canvasToTempFilePath的坑
  • 微信小程序实战教程之canvas绘画板+保存图片

但这些文章中并没有建议使用wx.downloadFile来下载图片,然后我觉得这里应该是当时遇到了坑。所以,我把现项目中的wx.downloadFile全换成了wx.getImageInfo进行测试。常规情况下的确没有复现bug,但非常规情况下还是跟wx.downloadFile一样会复现bug。所以,综合考虑了下,先解决非常规操作问题吧!

2.5、非常规操作:频繁点击

好了,到这里也该提示非常规操作的答案了,答案就是:频繁点击!其实,99.9%的项目在正常情况下都扛不住这种骚操作的,如果不用 节流防抖 等技术进行拦截,出现bug是家常便饭!

2.6、demo复现bug

为了证明不管是使用wx.downloadFile还是使用wx.getImageInfo,在频繁点击的情况下都能复现bug,此处艺灵我特意写了一个简单的demo模拟了一个项目中的场景,大致代码长这个样子。如图:wx.downloadFile三层嵌套模拟项目中的代码.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第7张图片

同样,wx.getImageInfo也是这样调用了三次,在微信小程序中初始界面长这个样子。如图:微信小程序demo界面.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第8张图片

接下来,在微信开发者工具中点击预览,然后手机扫码访问。待手机进入demo后,快速点击上面两个按钮中的任意一个,此时会看到若干个弹窗downloadFile:fail download fail。为了让看官更直接的理解,艺灵特意录制了一个小视频。戳我观看 快速点击按钮复现bug.mp4

2.7、解决方案之一:布尔开关

不管是布尔开关还是加个loading还是css中的pointer-events都可以解决上面视频中存在的问题。像一些表单提交、验证码发送等场景也都可以使用刚刚提到的方法进行拦截。其原理就是:当用户点击时立即设置一个禁用状态,等到要执行的事件处理完成后,再清除禁用状态。 这样一来,就能阻止用户的频繁点击操作了。需要注意的是:如果用户直接请求接口,那么刚提到的方法都是拦截不住的。下面来修改下上面的代码,核心代码如下:

// js代码:
/* wx.downloadFile方法下载图片 */
handleDownloadFile() {
  wx.showLoading({
    title: '正在生成海报'
  });
  this.setDisabled(true); /* 设置禁用状态,配合css */
  wx.downloadFile({
    url: this.data.poster.avatar, /* 头像地址 */
    success: (res) => {
      this.setData({
        'tempFilePath.avatar': res.tempFilePath
      });
      wx.downloadFile({
        url: this.data.poster.bg, /* 背景地址 */
        success: (res) => {
          this.setData({
            'tempFilePath.bg': res.tempFilePath
          });
          wx.downloadFile({
            url: this.data.poster.qrCode, /* 二维码 */
            success: (res) => {
              this.setData({
                'tempFilePath.qrCode': res.tempFilePath,
                res: JSON.stringify(res)
              });
              this.draw(); /* 调用封闭的绘图方法 */
            },
            fail: (err) => {
              console.log('qrCode fail=', err); /* 打印二维码的错误信息 */
              const errMsg = this.formatError(err); /* 封闭一个转换err错误信息的函数,方便弹窗中显示 */
              wx.hideLoading(); /* 隐藏loading提示 */
              this.setDisabled(false); /* 清除禁用状态,用户可再次点击 */
              wx.showModal({
                title: '提示',
                content: 'qrCode fail=' + errMsg,
                showCancel: false
              });
            }
          });
        },
        fail: (err) => {
          console.log('bg fail=', err);
          const errMsg = this.formatError(err);
          wx.hideLoading();
          this.setDisabled(false);
          wx.showModal({
            title: '提示',
            content: 'bg fail=' + errMsg,
            showCancel: false
          });
        }
      });
    },
    fail: (err) => {
      console.log('avatar fail=', err);
      const errMsg = this.formatError(err);
      wx.hideLoading();
      this.setDisabled(false);
      wx.showModal({
        title: '提示',
        content: 'avatar fail=' + errMsg,
        showCancel: false
      });
    }
  });
},
/* 设置禁用状态 */
setDisabled(status) {
  this.setData({
    isDisabled: status /* WXML页面中调用样式*/
  });
},
/* 把图片绘到画布上 */
draw() {
  const poster = this.data.tempFilePath;
  const ctx = wx.createCanvasContext('my-canvas', this);
  ctx.width = this.data.canvasWidth;
  ctx.height = this.data.canvasHeight;
  ctx.fillRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
  ctx.drawImage(poster.bg, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
  ctx.drawImage(poster.avatar, 20, 500, 40, 40);
  ctx.drawImage(poster.qrCode, 140, 350, 100, 100);
  ctx.draw(false, () => {
    this.handleCanvasToTempFilePath();
  });
},
/* 将画布导出成图片 */
handleCanvasToTempFilePath() {
  wx.canvasToTempFilePath({
    canvasId: 'my-canvas',
    width: this.data.canvasWidth,
    height: this.data.canvasHeight,
    success: (res) => {
      wx.previewImage({ /* 预览图片 */
        urls: [res.tempFilePath],
        current: res.tempFilePath
      });
      wx.hideLoading();
      this.setDisabled(false);
    },
    fail: (err) => {
      this.setDisabled(false);
      wx.showModal({
        title: '提示',
        content: '生成商品海报失败',
        showCancel: false,
        success: () => {
          wx.hideLoading();
        }
      });
    }
  }, this); /* 若canvas在组件中,必须带上this! */
},
/* 格式化错误信息 */
formatError(err) {
  let errMsg = err;
  if (typeof err === 'object') {
    errMsg = JSON.stringify(err);
  }
  return errMsg;
}

保存上面的代码并运行,再也不怕用户频繁点击了。哈哈哈!但是,如果再出现弹窗失败的错误,那我就真不知道到底是不是接口返回的问题了。。。。。。

三、验证存储权限

当安卓用户关闭了微信的存储权限后再点击按钮时会进入fail,弹窗提示为:downloadFile:fail download fail:1001。所以,我们可以对上面的代码进行补充。不过这种情况应该很少发生,毕竟禁用存储空间权限后,使用微信聊天时是连图片都发不了的。如图:安卓用户关闭微信存储空间权限后无法使用图片功能.png 微信小程序从入坑到放弃二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑_第9张图片

四、demo源码

demo源码已上传到了github上,如果看官需要研究源码,可以点击下面的链接进行访问并下载。前往github仓库下载源码

源码中会有必要注释和本篇文章的所有示例。若有疑问可与艺灵联系,方式见下方二维码或右侧。

五、其他说明

原文首发于艺灵设计,转载请注明来源,谢谢。

你可能感兴趣的:(微信小程序-日常踩坑,小程序,前端,bug)