需求說明:
根據(jù)用戶登錄名生成每個(gè)人的專屬二維碼。
微信小程序有提供生成小程序碼的方法,但是卻沒有生成普通文本或網(wǎng)頁鏈接二維碼的方法,因此自己去網(wǎng)上找了插件weapp-qrcode,它是根據(jù)qrcode.js改進(jìn)的。
效果預(yù)覽:

使用方法:
wxml:
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
js:(可在drawQrcode的參數(shù)text處傳入個(gè)人信息,這里方便展示使用的百度鏈接)
//將 dist 目錄下,weapp.qrcode.js 復(fù)制到項(xiàng)目目錄中, 在需要生成二維碼頁面的js文件引入。
import drawQrcode from '../../utils/weapp.qrcode.js'
Page({
data: {
text: 'https://m.baidu.com'
},
onLoad () {
this.draw()
},
draw () {
drawQrcode({
width: 160,
height: 160,
x: 20,
y: 20,
canvasId: 'myQrcode',
// ctx: wx.createCanvasContext('myQrcode'),
typeNumber: 10,
text: this.data.text,
image: {
imageResource: '../../images/icon.png',
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
},
callback(e) {
console.log('e: ', e)
}
})
}
})
原文作者技術(shù)博客:http://www.itdecent.cn/u/ac4daaeecdfe