不能直接用qrcode.js,因其依赖浏览器canvas.getContext('2d'),而小程序无全局canvas DOM对象,会报“canvas is not defined”或“cannot read property 'getContext' of null”;App(nvue)和部分H5环境同样缺失标准canvas支持,跨端必须绕过原生canvas逻辑。

为什么不能直接用 qrcode.js 在小程序里生成二维码
因为 qrcode.js 依赖浏览器的 canvas.getContext('2d'),而微信小程序没有全局 canvas DOM 对象,调用时会直接报错:canvas is not defined 或 cannot read property 'getContext' of null。App 端(nvue)和部分 H5 环境同样缺失标准 canvas 支持,所以跨端必须绕过原生 canvas 操作逻辑。
uQRCode.make() 必须等 canvas 挂载后才能调用
在小程序里,uQRCode.make() 内部会查找 canvas-id 对应的画布节点,如果组件还没渲染完成就执行,会返回空或失败。常见错误是写在 onLoad 里——此时 canvas 元素尚未挂载。
- 正确时机:用
this.$nextTick(() => uQRCode.make(...))或监听onReady生命周期 - 必须传
canvasId字符串,且模板中<canvas canvas-id="myQr"></canvas>的 id 要完全一致 - 如果页面有多个二维码,每个
canvas-id必须唯一,否则后调用的会覆盖前一个 -
text参数只接受字符串,对象需提前JSON.stringify(),插件不自动序列化
保存到相册前必须处理权限与临时路径
小程序保存图片走的是 uni.saveImageToPhotosAlbum,但它只接受本地临时路径(tempFilePath),不能直接传网络地址或 base64(H5 下 make() 返回的是 base64,小程序下才是 tempFilePath)。
- 先检查权限:
uni.getSetting→ 查scope.writePhotosAlbum是否为true - 未授权时,必须显式调用
uni.authorize({scope: 'scope.writePhotosAlbum'})弹窗申请 - 保存时传入的路径必须来自
uQRCode.make()成功回调里的res.tempFilePath,不是res.base64 - H5 环境下
res.tempFilePath为空,要用res.base64转成 blob 再下载,但小程序端不用管这个分支
带 scene 参数的小程序码根本不能前端生成
很多人想点一下就生成“扫了能跳转到某个页面并带参数”的小程序码,比如 ?scene=uid_123。这是误解:uQRCode 只能生成普通二维码(扫出来是跳 H5 链接或显示文本),它不具备调用微信服务端接口的能力。
- 真要带
scene的小程序码(即“小程序二维码”或“小程序码”),必须由后端调用微信接口https://api.weixin.qq.com/wxa/getwxacodeunlimit - 前端只负责请求该接口(通过
uniCloud.callFunction或uni.request),拿到返回的 base64 图片流,再赋值给<image :src="codeUrl"> - 如果你业务里混用了“普通二维码”和“小程序码”,务必在 UI 上区分清楚,避免用户扫错目标
uQRCode.make() 返回字段不一致,且 errorCorrectLevel 和 size 参数组合不当会导致扫码失败率陡增**。尤其当内容含长 token 或混合字符时,errorCorrectLevel: 'H' + size: 6 + width: 280 是目前最稳的组合。


















