微信小程序 二维码canvas绘制实例详解

一、前言

在微信小程序中，我们经常需要使用二维码来扫描获取数据或者分享给其他人，而在实际开发中，我们经常需要动态生成二维码并将其展示在页面上。在实现该功能时，可以使用canvas来绘制二维码，本文将详细讲解如何使用canvas来生成二维码的功能。

二、实现步骤

1. 引入QRCode.js文件

QRCode.js是一个专门用于生成二维码的库，我们首先需要将其引入到小程序中。可以在github上搜索QRCode.js库，将其下载后解压缩，然后将qrcode.js文件复制到小程序的根目录下。

2.在wxml文件中添加canvas标签

<canvas canvas-id="canvas"></canvas>

3.在js文件中编写生成二维码的代码

//引入QRCode.js文件
var QRCode = require('../../utils/qrcode.js');

Page({
  data: {
    qrcodeUrl: ''  //二维码图片地址
  },

  onLoad: function (options) {
    //生成二维码
    var that = this;
    var size = that.setCanvasSize();
    var url = 'https://www.baidu.com'; //二维码内容
    that.createQrCode(url, "canvas", size.w, size.h);
  },

  //获取手机屏幕宽高
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width;//canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },

  //生成二维码
  createQrCode: function (url, canvasId, cavW, cavH) {
    //调用插件中的draw方法，绘制二维码图片
    QRCode.draw(url, canvasId, cavW, cavH);
  }
})

4.渲染二维码图片

最后一步，我们需要将生成二维码的图片渲染到canvas中：

<canvas canvas-id="canvas" style="width:{{size.w}}px;height:{{size.w}}px;"></canvas>

Page({
  data: {
    size: {}
  },

  onReady: function () {
    //生成二维码
    var size = this.setCanvasSize();
    var url = 'https://www.baidu.com';  //二维码内容
    this.createQrCode(url, "canvas", size.w, size.h);
    this.setData({
      size: size
    })
  },

  createQrCode: function (url, canvasId, cavW, cavH) {
    QRCode.draw(url, canvasId, cavW, cavH);
  },

  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width;//canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  }
})

三、示例说明

示例一：生成指定数据的二维码

需求：在小程序中生成固定的二维码图片，例如：http://www.baidu.com。

实现方法：在二维码生成代码中，将url改为'http://www.baidu.com'即可。

示例二：生成动态数据的二维码

需求：在小程序中使用用户输入的数据生成二维码图片。

实现方法：将用户输入的数据作为url的值传入生成二维码的函数中即可。例如：

<view>
  <input type="text" bindinput="onInput"></input>
  <button type="primary" bindtap="onCreateQrCode">生成二维码</button>
  <canvas canvas-id="canvas" style="width:{{size.w}}px;height:{{size.w}}px;"></canvas>
</view>

Page({
  data: {
    size: {},
    inputValue: ''
  },

  onInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  onCreateQrCode: function () {
    var size = this.setCanvasSize();
    var url = this.data.inputValue;  //获取用户输入
    this.createQrCode(url, "canvas", size.w, size.h);
    this.setData({
      size: size
    })
  },

  createQrCode: function (url, canvasId, cavW, cavH) {
    QRCode.draw(url, canvasId, cavW, cavH);
  },

  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width;//canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  }
})

上述代码中，我们在wxml文件中添加了一个input框和一个button按钮，当用户输入数据后，点击该按钮即可动态生成二维码。生成二维码的url值是从用户输入的数据中获取的。