微信小程序---生成二维码

最新推荐文章于 2025-06-17 09:13:46 发布

小小小小小菜鸟~

最新推荐文章于 2025-06-17 09:13:46 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/2301_76625070/article/details/130186252

本文介绍了如何在微信小程序中实现生成二维码的功能，利用canvas组件和weapp-qrcode-canvas-2d.js包，通过引入并配置，可以提升生成图片的速度，实现二维码的高效创建。

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

微信小程序实现生成二维码功能。需要用到canvas组件，设置 type为2d. 需要使用js包

话不多说,直接开始

1.wxml文件：

<view>
  <button bindtap='createQrcode' type="primary">生成二维码</button>
  <canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;margin-top: 30rpx;margin-left: 100rpx;' ></canvas>
</view>

2.js文件

// 生成二维码
createQrcode() {
  var that = this;
  const query = wx.createSelectorQuery()
  query.select('#qrcode')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      var canvas = res[0].node
 
      // 调用方法drawQrcode生成二维码
      QRCode({
        canvas: canvas,
        canvasId: 'qrcode',
        // width:that.createRpx