微信小程序中生成二维码

Posted 2022-06-30 低代码布道师

一般在微信小程序中，生成二维码是一个很常见的场景，但是查阅官方文档，却没有一个现成的可以使用的组件。

经过搜索，生成二维码组件一般是需要借助第三方库来实现。实现的步骤分为：

1. 下载第三方库
2. 安装第三方库
3. wxml中生成二维码
4. js中引入

下载第三方库

目前有一个现成的库，可以生成二维码。我一般习惯用gitee下载。在浏览器里输入下载地址

https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d

下载方法是点击克隆按钮

下载完了之后解压缩，dist目录里的文件就是我们需要的

安装第三方库

库安装的方法也比较简单，我们可以现在小程序目录下新建一个utils文件夹

将dist目录下的js全部拷贝到utils目录下

这样就完成了库的安装

wxml中生成二维码

二维码使用canvas组件生成，所以需要在wxml文件中添加canvas组件

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

js中引入第三方库

第三方库如果希望使用需要使用import语句引入，具体代码如下

// pages/test/index.js
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
Page(

  /**
   * 页面的初始数据
   */
  data: 

  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) 
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
        .fields(
            node: true,
            size: true
        )
        .exec((res) => 
            var canvas = res[0].node
    
            // 调用方法drawQrcode生成二维码
            drawQrcode(
                canvas: canvas,
                canvasId: 'myQrcode',
                width: 260,
                padding: 30,
                background: '#ffffff',
                foreground: '#000000',
                text: '个人二维码信息',
            )
    
            // 获取临时路径（得到之后，想干嘛就干嘛了）
            wx.canvasToTempFilePath(
                canvasId: 'myQrcode',
                canvas: canvas,
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 260,
                destHeight: 260,
                success(res) 
                    console.log('二维码临时路径：', res.tempFilePath)
                ,
                fail(res) 
                    console.error(res)
                
            )
        )
  ,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() 

  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() 

  ,

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() 

  ,

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() 

  ,

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() 

  ,

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() 

  ,

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() 

  
)

我们只需要修改text属性中的值就可以

总结

我们本篇介绍了小程序二维码生成的方法，借助第三方库无疑可以大大的提高开发速度。