适用于小程序的二维码生成器（支持中文，多框架使用）
最近在开发中，需要生成自定义的二维码，于是做了一个包出来，分享给大家一起使用。适用于微信小程序的二维码生成器，基于Canvas生成，支持中文的输入。可在原生小程序，mpvue，taro中使用。（文末有一个使用示例）[图片]
github地址(wxmp-qrcode)[https://github.com/Z-HNAN/wxmp-qrcode]
安装
[代码]npm install wxmp-qrcode
[代码]
使用
创建一个canvas,设置其[代码]id[代码],与[代码]canvas-id[代码]， 并设置canvas的样式，二维码基于其大小生成并居中
[代码]<canvas id="cav-qrcode" canvas-id="cav-qrcode"></canvas>
[代码]
引入包并使用
[代码]import QR from 'wxmp-qrcode'
QR.draw(str, canvasId, () => {
console.log('draw success')
} )
[代码]
api
[代码]/**
* 根据canvas尺寸，画出合适居中的qrcode
* @param {Object} str 二维码的内容 (必须)
* @param {Object} canvasId canvasId的值 (必须)
* @param {Object} $this 传入组件的this,兼容在组件中生成二维码 （可选，可省略该参数）
* @param {Object} callback 回调函数 (可选)
*/
draw: function (str, canvasId, $this, callback)
/**
* 清除canvas内容
* @param {Object} canvasId canvasId (必须)
* @param {Object} callback 回调函数 （可选）
*/
clear: function (canvasId, callback)
[代码]
注意
canvas中 id, canvas-id必须保持一致
id 获取canvas节点，自动计算大小使用, 二维码大小基于canvas自动生成
canvas-id 绘制二维码使用
如果在组件中使用，需要传入组件的this，[代码]draw(str, canvasId, componentThis)[代码]
具体参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
可以保存二维码为临时图片地址
具体可参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
bug: 该方法有时保存的图片会有一个竖条。
[代码]createQrCode: function (content, canvasId) {
QR.draw(content, canvasId)
this.canvasToTempImage(canvasId)
},
//获取临时缓存图片路径
canvasToTempImage: function (canvasId) {
wx.canvasToTempFilePath({
canvasId,
success: function (res) {
let tempFilePath = res.tempFilePath; // 临时图片地址，可在放入图片src中使用
}
})
}
[代码]
原生小程序wxmp中使用
在项目设置中选择 [代码]使用npm模块[代码]
[图片]
如果第一次使用npm模块，需要首先在根目录中[代码]npm init[代码], 之后再安装模块 [代码]npm i wxmp-qrcode[代码]
在工具中选择 [代码]构建npm[代码]
[图片]
index.wxml
[代码]<view class="container">
<canvas id="{{canvasId}}" canvas-id="{{canvasId}}"></canvas>
<button bindtap="creatQRCode"> 生成二维码 </button>
</view>
[代码]
index.wxss
[代码]canvas {
border: 1rpx solid #eee;
width: 400rpx;
height: 400rpx;
}
button {
margin-top: 100rpx;
}
[代码]
index.js
[代码]import QR from './qrcode'
Page({
data: {
canvasId: 'canvasId',
QRdata: '你好 wxmp-qrcode'
},
creatQRCode () {
let str = this.data.QRdata
let canvasId = this.data.canvasId
QR.draw(str, canvasId)
}
})
[代码]
