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

雪酒呀

于 2021-08-16 19:50:27 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序 javaScript习题文章标签：小程序 canvas js

本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/119740570

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

32 篇文章

订阅专栏

javaScript习题

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
      })
    })

  },