uni-app 中不能直接用 wx.canvasToTempFilePath 生成二维码，必须使用微信原生的 uni.qrCodeToTempFilePath（基础库 ≥2.21.0），该 API 无需 canvas 元素，仅需合法页面路径、数值型 width 等配置，且仅限微信小程序平台生效。
uni-app 里不能直接调用微信 wx.canvasToTempFilePath 生成二维码？
对，微信小程序基础库 2.23.0+ 起，canvas 在非同层渲染（即默认渲染模式）下无法被 wx.canvasToTempFilePath 正确读取，调用后返回空路径或报错 canvas is not found。这不是 uni-app 的 bug，而是微信原生限制——uni-app 的 <canvas> 组件默认走的是 WebView 渲染层，和原生 canvas 不互通。
所以别硬套 H5 二维码库（如 qrcode.js）配合 canvas 导出，大概率白忙活。
- 必须用微信原生支持的
wx.qrCodeToTempFilePath（基础库 ≥ 2.21.0），它不依赖页面 canvas，纯后台生成 - uni-app 2.9.11+ 已封装该 API 为
uni.qrCodeToTempFilePath，但仅限微信小程序平台生效 - 调用前务必确认
uni.getSystemInfoSync().SDKVersion≥ '2.21.0'，低版本需降级用wx.request调自己后端接口
uni.qrCodeToTempFilePath 的参数怎么填才不报错？
常见错误是传了 canvasId 或把 width 写成字符串、漏传 path。这个 API 完全不需要 canvas 元素，参数是纯配置对象：
uni.qrCodeToTempFilePath({
path: '/pages/detail?id=123', // 必填，要转成码的小程序页面路径（带参数）
width: 280, // 数值类型，单位 px，建议 200–400
autoColor: false, // 是否自动根据背景色反色（默认 false）
isHyaline: false, // 是否透明底色（默认 false，设 true 时 background 无效）
success(res) {
console.log('临时文件路径：', res.tempFilePath)
},
fail(err) {
console.error('生成失败：', err.errMsg) // 常见：'qrCodeToTempFilePath:fail page path is empty'
}
})
-
path必须是合法的小程序页面路径，且已注册在app.json中，不能是外部链接或未注册路径 -
width必须是 number，写成'280'会静默失败 -
background和color只在autoColor: false时生效，且只接受十六进制颜色（如'#000000'），不支持 rgb/hex8 - 真机调试时若提示 “page path is empty”，先检查
path是否为空或含非法字符（如中文、空格）
如何在页面上动态渲染生成的二维码图片？
拿到 tempFilePath 后不能直接赋给 <image> 的 src —— 微信要求本地临时路径必须用 file:// 协议前缀，而 uni-app 的 <image> 在微信小程序平台会自动补前缀，所以直接赋值即可：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
data() {
return {
qrCodeUrl: ''
}
},
methods: {
async generateQr() {
try {
const res = await uni.qrCodeToTempFilePath({
path: `/pages/order/detail?id=${this.orderId}`
})
this.qrCodeUrl = res.tempFilePath // ✅ 直接赋值，uni-app 会自动处理协议
} catch (e) {
uni.showToast({ title: '生成失败', icon: 'none' })
}
}
}
- 不要手动拼
file://，否则在某些基础库版本下会加载失败 - 若页面有多个二维码需要切换，每次生成后记得清空旧
qrCodeUrl，避免<image>缓存旧图 - H5 端不支持该 API，务必用
uni.getSystemInfoSync().platform === 'mp-weixin'做平台判断，否则编译到 H5 会报uni.qrCodeToTempFilePath is not a function
为什么扫码后跳转页面空白或 404？
这几乎全是 path 参数惹的祸。微信生成的二维码本质是“小程序码”，扫描后打开的是你指定的页面，但路径解析规则很严格：
- 路径必须以
/开头，且只能是已注册的页面路径（app.json或subNVue配置里的pages列表） - 参数只能是 query 形式（
?key=val&key2=val2），不能带 hash（#）或路径参数（/detail/123） - 参数值需
encodeURIComponent，尤其是中文、斜杠、问号等字符，否则解码失败导致页面拿不到数据 - 如果目标页是 tabbar 页面，需确保
path匹配tabBar.list中的pagePath，否则可能被重定向或白屏
安全写法：
const pagePath = '/pages/order/detail'
const query = `id=${encodeURIComponent(this.orderId)}&source=${encodeURIComponent('qrcode')}`
const fullPath = `${pagePath}?${query}`
uni.qrCodeToTempFilePath({ path: fullPath })
生成后可在开发者工具「编译模式」里粘贴该 path 测试是否能正常预览，比扫真码快得多。
复杂点在于：小程序码不支持自定义 logo、不支持中间加图标、不支持设置容错率——这些都得靠后端生成或用兼容性更强的 canvas + 图片合成方案，但那就不是纯前端动态生码了。
