评论

小程序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);
  },
最后一次编辑于  2019-08-08  
点赞 1
收藏
评论

6 个评论

  • lzsh
    lzsh
    2020-08-09

    第一次渲染canvas 时,用 wx.canvasToTempFilePath 获取 tempFilePath:res.tempFilePath;第二次展示用 tempFilePath 渲染到 image 标签里面(不用canvas)

    2020-08-09
    赞同 1
    回复
  • 子非鱼
    子非鱼
    01-24

    兄弟,有更好的解决方法了么?

    01-24
    赞同
    回复
  • 洲
    2020-04-16

    你好 我是导入的echarts 发的体验版 第一次没有问题 第二此直接不显示 但是数据请求到了 想问一下 是不是可能也是这个问题


    2020-04-16
    赞同
    回复 1
    • pscj
      pscj
      2020-05-15
      不要用wx:if,换成hidden就好了
      2020-05-15
      回复
  • 邱一欢
    邱一欢
    2019-08-09

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

    2019-08-09
    赞同
    回复 9
    • 大又元
      大又元
      2019-08-09
      确实是浪费资源了,不环保,我调整下改出新的分享,谢谢你
      2019-08-09
      回复
    • 朝花夕拾🌸
      朝花夕拾🌸
      2019-09-05
      你好,请教下,如图上页面 点开第一个画布,关了,再点或者点下边的确实不能用同一个啦,不用很多画布的话,兄弟有啥好的解决方案?
      2019-09-05
      回复
    • 邱一欢
      邱一欢
      2019-09-05回复朝花夕拾🌸

      最外层放一个画布,点了以后把图画上去画布显示出来, 点关闭画布隐藏。

      2019-09-05
      回复
    • 朝花夕拾🌸
      朝花夕拾🌸
      2019-09-05回复邱一欢

      不行滴,兄弟你可以自己试试,渲染完隐藏,再显示是空白的

      2019-09-05
      回复
    • 邱一欢
      邱一欢
      2019-09-05回复朝花夕拾🌸

      每次显示画布的时候就重画, 不可能是空白的,我们自己的小程序就是这样做的。

      2019-09-05
      回复
    查看更多(4)
  • 高高高高高高高
    高高高高高高高
    2019-08-08

    何必呢

    2019-08-08
    赞同
    回复
  • zzc
    zzc
    2019-08-08

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

    2019-08-08
    赞同
    回复 2
    • 大又元
      大又元
      2019-08-08
      这也只是办法之一,一定存在更好的办法,哈哈
      2019-08-08
      回复
    • Dream
      Dream
      2019-08-22回复大又元
      兄弟 还有好的办法吗?
      2019-08-22
      回复
登录 后发表内容