微信小程序uqrcode生成二维码并canvas绘制逻辑,以及扫码逻辑
·
<!-- 二维码 -->
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300rpx;height: 300rpx; margin-top: 100rpx;margin-left: 80rpx;" ></canvas>
<!-- 扫码 -->
<view class="container">
<button bindtap="openScanner">扫一扫</button>
<view wx:if="{{scanResult}}">
<text>扫描结果:{{scanResult}}</text>
</view>
</view>
// pages/qr/qr.ts
import UQRCode from '../../utils/uqrcode';
Page({
/**
* 页面的初始数据
*/
data: {
scanResult: '',
showScanModal: false
},
onLoad() {
this.code()
},
code() {
wx.createSelectorQuery()
.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec(async (res) => {
if (!res[0] || !res[0].node) {
console.error("Canvas 节点未找到");
return;
}
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio; // 获取设备像素比
// 根据 DPR 调整 Canvas 实际绘图尺寸
const canvasWidth = res[0].width * dpr;
const canvasHeight = res[0].height * dpr;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx.scale(dpr, dpr); // 缩放画布
// 2. 初始化 UQRCode 并绑定 Canvas 上下文
const qr = new UQRCode();
qr.data = "id=2";
qr.size = res[0].width; // 必须与 Canvas 实际尺寸一致
qr.canvasContext = ctx; // 关键绑定
try {
// 3. 加载依赖库(如需加载图片)
//await UQRCode.prototype.loadImage("/images/bg_1.jpg"); // 示例图片
// 4. 生成二维码
qr.make();
qr.drawCanvas(); // 必须调用绘制方法
// 保存为图片(可选)
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (tempFilePath) => {
console.log("二维码图片路径:", tempFilePath);
}
});
} catch (err) {
console.error("二维码生成失败:", err);
}
});
},
// 触发扫码
openScanner() {
wx.scanCode({
onlyFromCamera: true, // 仅使用摄像头
scanType: ['qrCode'], // 扫描类型(支持['barCode','qrCode'])
success: (res) => {
this.setData({ scanResult: res.result });
this.handleScanResult(res.result);
},
fail: (err) => {
wx.showToast({ title: '扫码失败', icon: 'none' });
console.error('扫码错误:', err);
}
});
},
// 处理扫码结果
handleScanResult(result: string) {
if (result.startsWith('pages/')) {
wx.navigateTo({ url: result }); // 跳转小程序页面
} else {
wx.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(result) }); // 跳转外部链接
}
}
})

使用到的uqrcode.js代码文件:通过网盘分享的文件:uqrcode.js
链接: https://pan.baidu.com/s/1lZhusJmhzmc4hHJKSyFeiQ?pwd=y996 提取码: y996。
可自行下载放到对应文件目录
本代码生成的二维码信息仅为“id=2”

更多推荐
所有评论(0)