0
收藏
评论

小程序canvas第二次渲染不成功问题解决

正在开发一款在北美使用的家政平台小程序,用户线上选择商家下单,线下享受服务

需求场景

因为微信只能使用人民币结算,在海外使用就无法使用线上支付,所以这里只给用户生成的订单展示,在每个订单上会将所使用的优惠券以QRCode的方式展现给线下到场的服务人员

开发遇到的问题

在使用canvas生成二维码过程中,第一次点击二维码很顺利渲染,但是第二次就不会显示

问题定位及解决

经过360°问题定位以及扣官方文档的字眼[/手动捂脸]

canvas的渲染对id有唯一性的要求,如果一个id重复渲染就会出现画布隐藏并不再正常工作的问题,在实现过程中,我把优惠券的id和每次点击时间的时间戳拼接起来以保证canvas-id唯一性

<canvas canvas-id="{{couponqr.id+timestamp}}" class='qr' />
onyh:function(e){
    var that = this
    that.setData({
      showqrbox: true,
      timestamp: e.timeStamp,
      couponqr: e.currentTarget.dataset.qr,
    })
    wxbarcode.qrcode(e.currentTarget.dataset.qr.id + e.timeStamp, 'http://www.mohennet.com/', 230, 230);
  },
最后一次编辑于  08-08  (未经腾讯允许,不得转载)
复制链接赞 0收藏评论

5 个评论

  • zzc
    zzc
    08-08

    天秀,哪有这样加时间戳的,我猜这肯定不是最佳解决方法

    08-08
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      08-08
      这也只是办法之一,一定存在更好的办法,哈哈
      08-08
      赞同
      回复
  • I-S
    I-S
    08-08

    何必呢

    08-08
    赞同
    回复
  • 邱一欢
    邱一欢
    08-09

    始终在一个画布上画不可以吗?你这样太奢侈了。 用了好多画布。

    08-09
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      08-09
      确实是浪费资源了,不环保,我调整下改出新的分享,谢谢你
      08-09
      赞同
      回复