先看效果:
第一步:将需要的js文件 weapp.qrcode.js放置到utils中
第二步:wxml:
<view>
<button bindtap='createQrcode' type="primary">生成二维码</button>
<canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;margin-top: 30rpx;margin-left: 100rpx;' ></canvas>
</view>
第三步:JS
import QRCode from '../../utils/weapp.qrcode'
Page({
/**
* 页面的初始数据
*/
data: {
qrCodeLink:'微信小程序生成二维码,你会了吗?',
qrcodePath:'哪里不会点哪里'
},
// 生成二维码
createQrcode() {
var that = this;
const query = wx.createSelectorQuery()
query.select('#qrcode')
.fields({
node: true,
size: true
})
.exec((res) => {
var canvas = res[0].node
// 调用方法drawQrcode生成二维码
QRCode({
canvas: canvas,
canvasId: 'qrcode',
text: that.data.qrCodeLink,
})
// 获取临时路径(得到之后,想干嘛就干嘛了)
wx.canvasToTempFilePath({
canvasId: 'qrcode',
canvas: canvas,
x: 0,
y: 0,
success(res) {
// console.log('二维码临时路径:', res.tempFilePath)
that.setData({
qrcodePath: res.tempFilePath
})
console.log('二维码临时路径:', that.data.qrcodePath)
},
fail(res) {
console.error(res)
}
})
})
},
})
到这里,生成二维码功能就已经实现了
但是,你通过扫描这个二维码,发现不是跳转的链接,而是一段文字?
别慌,那是因为你 data 中的 qrCodeLink 二维码生成内容就是文字
只要你将这个参数改成链接就能正常跳转了 (#^.^#)