微信小程序canvas重复调用，二次渲染失败

最新推荐文章于 2023-03-17 08:48:33 发布

敲敲打打

最新推荐文章于 2023-03-17 08:48:33 发布

阅读量1.5k

点赞数

分类专栏：微信小程序文章标签： canvas 渲染二维码时间戳动态id

本文链接：https://blog.csdn.net/bosris/article/details/127484835

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

击列表触发canvas内容层显示，根据传值显示不同内容，第一次点击时canvas正常显示，后续点击canvas内容不显示，渲染失败。

canvas二次调用后canvas-id重复了，重复的id对应的画布就不正常工作了，解决办法就是给重复调用的canvas-id不同的值进行调用。

 <view class="dingdan_list_a_bot" bindtap="showCode" data-code="{{item.scan_code}}">  
  <view class="dingdan_list_a_bot_fl">
      <view class="text1">取餐码</view>
          <view class="text2">{{item.code}}</view>
      </view>
  <view class="dingdan_list_a_bot_fr">立即使用</view>
</view>

利用canvas-id='canvas{{owner}}' 区别不同canvas

<view wx:if="{{isShow}}" class="ruleZhezhao">
  <view class='ruleZhezhaoContent'>
    <view class='ruleZhezhaoText'>
      <canvas class='canvas' canvas-id='canvas{{owner}}'></canvas>
    </view>
    <view bindtap="toBack" class="toBack"></view>
  </view>
</view>

timeStamp=Date.parse(new Date)，时间戳确定调用的id进行操作，保证每次调用的canvas-id是唯一的

showCode:function(e){
    var code=e.currentTarget.dataset.code
    var timeStamp=Date.parse(new Date)

    this.setData({owner:timeStamp/1000})

    qrcode = new QRCode('canvas'+(timeStamp/1000), {
      text: code, //需要转化为二维码的字符串
      width: thatwidth,
      height: thatwidth,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    })

    this.setData({
      isShow:true
    })
}