微信小程序======canvas绘制二维码

使用canvas绘制二维码

最新推荐文章于 2024-05-08 10:43:24 发布

原创最新推荐文章于 2024-05-08 10:43:24 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #canvas #js

微信小程序同时被 2 个专栏收录

32 篇文章

订阅专栏

javaScript习题

10 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中利用canvas绘制二维码。首先，需要在wxml中添加canvas标签，并设置其id和canvas-id。接着，在js文件中引入绘制二维码的工具库，然后定义绘制二维码的方法，通过wx.createSelectorQuery获取canvas节点的宽高，最后调用工具库的函数进行绘制，传入相应的参数如宽度、高度、二维码文本等。

canvas绘制二维码

一、导入绘制依赖的文件

在这里插入图片描述

二、在wxml中写入canvas标签

id、canvas-id不要丢

<canvas class="codeContent" canvas-id="qrcode" id="qrcode"></canvas>

三、在js文件中引入依赖

import mycode from '../../../utils/weapp.qrcode'

四、绘制二维码的方法

// 绘制二维码
  drawCode() {
    wx.createSelectorQuery().select('#qrcode').fields({
      node: true,
      size: true
    }).exec((res) => {
      console.log(res);
      let {
        width,
        height
      } = res[0]
      console.log("绘制",  this.data.code);
      mycode({
        width: width,
        height: height,
        x: 0,
        y: 0,
        canvasId: 'qrcode',
        text: this.data.code,
      })
    })

  },