uni-app二维码生成 uni-app如何动态生成二维码图片-uni-app-PHP中文网

uni-app跨端生成二维码需用uQRCode等适配库，因qrcode.js依赖浏览器canvas在非H5端不可用；uQRCode封装了多端绘制与导出逻辑，支持一行代码获取临时路径或base64。

uni-app 里不能直接用 `qrcode.js` 生成图片

因为 qrcode.js 默认依赖浏览器的 canvas api，而 uni-app 的非 h5 端（如微信小程序、app）不支持原生 canvas dom 操作，直接引入会报 cannot read property 'getcontext' of null 或白屏。

真正能跨端生成二维码图片的，只有 uni-app 官方封装的 uni.canvasToTempFilePath + 自研绘图逻辑，或使用适配多端的轻量库（如 weapp-qrcode 或 uQRCode）。

微信小程序：必须用 canvas 绘制，再调用 uni.canvasToTempFilePath
H5 端：可用 qrcode.js 直接输出 canvas 或 img，但要注意 DOM 注入时机
App 端（nvue）：不支持普通 canvas，需改用 native canvas 或服务端生成
推荐优先用 uQRCode（专为 uni-app 写的，已处理多端差异）

用 `uQRCode` 动态生成二维码图片（推荐方案）

它把 canvas 绘制、临时文件转换、错误兜底都封装好了，一行代码就能拿到 base64 或临时路径，且支持 Promise。

安装：npm install uqrcodejs，然后在页面中：

import uQRCode from 'uqrcodejs'

调用示例：

uQRCode.make({
  text: 'https://example.com?id=123',
  size: 200,
  margin: 4
}).then(res => {
  // res.tempFilePath 是小程序/App 的临时路径，H5 下是 base64
  this.qrCodeUrl = res.tempFilePath
})

text 必填，必须是字符串；若含中文，确保已 encodeURIComponent（uQRCode 不自动编码）
size 单位是 px，建议设为偶数，避免某些端渲染模糊
margin 是白边宽度，设为 0 可能导致扫码失败（部分扫码器要求留白）
生成结果不是 data: URL，而是平台原生临时路径（小程序）或 base64（H5），直接赋给 <image></image> src 即可

手动用 `uni.createCanvasContext` 绘制（仅限小程序）

如果你需要完全控制样式（比如加 logo、改颜色、圆角模块），就得自己画。但注意：这写法在 H5 和 App 端无效，必须配合条件编译。

关键步骤：

模板里加一个隐藏的 <canvas canvas-id="qrCanvas" style="width: 0; height: 0;"></canvas>
用 uni.createCanvasContext('qrCanvas', this) 获取上下文
先调用 qrcode.js 的 createQrCodeImg（需改写为返回点阵数据）或用 uQRCode 的 getMatrix 方法获取二维数组
遍历矩阵，用 fillRect 逐块绘制黑点（注意坐标换算和像素对齐）
最后调用 uni.canvasToTempFilePath 导出图片