微信小程序 - 生成二维码

前言：通过小程序端生成二维码也是很有必要的，可以为后台减压。

本文介绍三个插件，其中各有不同，各有优点。

1、可以生成带图标的二维码

图示：

下载：链接: https://pan.baidu.com/s/198L7DrILfc5M7nQ_il179g   提取码: peuw

示例：

// index.wxml
<canvas canvas-id="qrcode" style="height: 200px;width: 200px"></canvas>

// index.js
import drawQrcode from '../../utils/test/weapp.qrcode.esm.js'
Page({
  data: {},
  onLoad: function () {
    drawQrcode({
      width: 200, // 二维码宽度
      height: 200,  // 二维码高度
      canvasId: 'qrcode', // canvasid
      text: 'https://www.baidu.com',  // 用于生成二维码的文本
      image: {
        imageResource: '/images/change.png',  // 二维码上的图标
        dx: 70, // 在二维码中位置x坐标
        dy: 70,  // 在二维码中位置y坐标
        dWidth: 60, // 宽度
        dHeight: 60 // 高度
      }
    })
  },
})

api参数：

参数	说明	示例
width	必须，二维码宽度，与canvas的width保持一致	200
height	必须，二维码高度，与canvas的height保持一致	200
canvasId	非必须，绘制的canvasId	'myQrcode'
ctx	非必须，绘图上下文，可通过 wx.createCanvasContext('canvasId') 获取，v1.0.0+版本支持	'wx.createCanvasContext('canvasId')'
text	必须，二维码内容	'http://www.baidu.com'
typeNumber	非必须，二维码的计算模式，默认值-1	8
correctLevel	非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }	1
background	非必须，二维码背景颜色，默认值白色	'#ffffff'
foreground	非必须，二维码前景色，默认值黑色	'#000000'
_this	非必须，若在组件中使用，需要传入，v0.7.0+版本支持	this
callback	非必须，绘制完成后的回调函数，v0.8.0+版本支持。安卓手机兼容性问题，可通过自行设置计时器来解决，更多可以参考 issue #18	function (e) { console.log('e', e) }
x	非必须，二维码绘制的 x 轴起始位置，默认值0，v1.0.0+版本支持	100
y	非必须，二维码绘制的 y 轴起始位置，默认值0，v1.0.0+版本支持	100
image	非必须，在 canvas 上绘制图片，层级高于二维码，v1.0.0+版本支持，更多可参考drawImage	{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

 

2、此插件base64码形式返回

返回的是base64码，不用依赖canvas

下载：链接: https://pan.baidu.com/s/11morheOk5kDsgOFtZr-48Q 提取码: xvf5

<image src="{{imgData }}"></image>

import qrCreate from '../../utils/weapp-qrcode-base64.js'; // 插件路径，以实际路径为准

Page({
  data: {
    imgData: ''
  },
  onLoad: function () {
    // 返回的base64码
    var imgData = qrCreate.drawImg('这是二维码文本内容', {
      typeNumber: 4, // 取值范围：1-40，数字越大，码点越小，显得越密集
      errorCorrectLevel: 'M', // 纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来
      size: 500
    })
    this.setData({
      imgData
    })
  },
})

如果想将base64码转换为图片路径，可以使用以下方法

// base64转换成图片
function base64src(base64data, callback) {
  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
  let fsm = wx.getFileSystemManager();//文件管理器
  if (!format) {
    return (new Error('ERROR_BASE64SRC_PARSE'));
  }
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success() {
      callback(filePath);
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'));
    },
  });
};

 

3、可以生成条形码和二维码

图示：

下载：链接: https://pan.baidu.com/s/1hF3gIvWI8cYca2Bj935nBg 提取码: etst

<canvas canvas-id="qrcode" style="height: 200px;width: 200px"></canvas>
<canvas canvas-id="barcode" style="height: 200px;width: 200px"></canvas>

import wxbarcode from '../../utils/qrcode-barcode/index.js'

Page({
  data: {},
  onLoad: function () {
    wxbarcode.barcode('barcode', 'http://www.baidu.com', 600, 150);
    wxbarcode.qrcode('qrcode', 'http://www.baidu.com', 375, 375);
  },
})

 

 

注：本人并非插件生产者，而是搬运工。本人立志做一名出色的搬运工！