微信小程序?qū)崿F(xiàn)生成二維碼功能。需要用到canvas組件，設置 type為2d.? 需要使用js包weapp-qrcode-canvas-2dhttps://github.com/DoctorWei/weapp-qrcode-canvas-2dweapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二維碼（外部二維碼）的js包。canvas 2d 接口支持同層渲染且性能更佳，可大幅提升生成圖片的速度。
使用方法，代碼：
1.wxml文件：
<view>
<button bindtap='createQrcode' type="primary">1.生成二維碼</button>
<canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;margin-top: 30rpx;margin-left: 100rpx;' ></canvas>
</view>2.引入js 文件（下載的/weapp.qrcode.esm.js放到utils目錄下）
import?QRCode?from?'../../utils/weapp.qrcode.esm.js'
?
3.生成二維碼方法，createQrcode
以下代碼中的canvasId就是wxml中canvas定義的id。
// 生成二維碼
createQrcode() {
var that = this;
const query = wx.createSelectorQuery()
query.select('#qrcode')
.fields({
node: true,
size: true
})
.exec((res) => {
var canvas = res[0].node
// 調(diào)用方法drawQrcode生成二維碼
QRCode({
canvas: canvas,
canvasId: 'qrcode',
width: that.createRpx2px(300),
padding: 10,
background: '#ffffff',
foreground: '#000000',
text: that.data.qrCodeLink,
})
// 獲取臨時路徑（得到之后，想干嘛就干嘛了）
wx.canvasToTempFilePath({
canvasId: 'qrcode',
canvas: canvas,
x: 0,
y: 0,
width: that.createRpx2px(300),
height: that.createRpx2px(300),
destWidth: that.createRpx2px(300),
destHeight: that.createRpx2px(300),
success(res) {
// console.log('二維碼臨時路徑：', res.tempFilePath)
that.setData({
qrcodePath: res.tempFilePath
})
console.log('二維碼臨時路徑：', that.data.qrcodePath)
},
fail(res) {
console.error(res)
}
})
})
}?單獨下載weapp.qrcode.esm.js文件的地址文章來源：http://www.zghlxwxcb.cn/news/detail-488253.html
使用新版canvas-2d接口在微信小程序中生成二維碼（外部二維碼）的js包-小程序文檔類資源-CSDN下載文章來源地址http://www.zghlxwxcb.cn/news/detail-488253.html
到了這里，關(guān)于微信小程序 — 生成二維碼功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
