wxml-to-canvas 在 uni-app 中不能直接使用，因其依赖微信原生 WXML 节点和 SelectorQuery，而 uni-app 多端不支持该模型，且微信基础库 2.24.0+ 后限制跨层级查询导致 querySelect 失败。
wxml-to-canvas 在 uni-app 中**不能直接使用**——它本质是微信小程序原生生态的第三方库，依赖 WXML 节点树和 SelectorQuery API，而 uni-app 的 H5/APP 端不支持 WXML 渲染模型，且其小程序端（尤其是微信）在基础库 2.24.0+ 后也因安全策略限制了对非自定义组件节点的跨层级查询，导致 wxml-to-canvas 大概率调用 querySelect 失败并报错 Cannot read property 'boundingClientRect' of null。
下面直击实际能跑通的路径：
uni-app 微信小程序里 wxml-to-canvas 常见失败原因
不是代码写错了，而是运行环境不匹配：
-
wxml-to-canvas默认尝试捕获<view></view>、<text></text>等 WXML 节点，但 uni-app 编译后的小程序模板中，真实节点可能被包裹在<uni-xxx></uni-xxx>组件或<page></page>内部，querySelect('.poster-wrap')找不到目标 - 未在
onReady或$nextTick后执行查询，DOM 尚未渲染完成 - 使用了
scoped样式或动态 class 名（如:class），导致选择器失效 - 海报区域含
<image></image>且未加lazy-load="false"，图片未加载完成就触发 canvas 截图，结果为空白或缺图
替代方案：改用 uni.createCanvasContext + drawImage + fillText
这是 uni-app 官方推荐、全平台（微信/支付宝/APP/H5）兼容性最好的方式，可控性强、无黑盒依赖：
- 不要试图“截图页面”，而是“重绘内容”：把海报拆解为背景色、文字、头像、二维码等独立元素，逐个用
ctx.drawImage()、ctx.fillText()绘制 - 所有图片资源必须先调用
uni.getImageInfo({ src })获取真实路径，再传给drawImage，否则在真机上会静默失败 - 文字换行需手动切分：
ctx.measureText不可靠，建议按字数或固定宽度折行（例如每行最多 12 字，用str.match(/.{1,12}/g)） - 字体大小用
px，别用rpx；Canvas 坐标系是物理像素，canvasWidth: 750对应设计稿 750rpx 宽度，但绘制时 y 坐标要按实际像素算（如 iPhone 14 Pro 是 3x 屏，y=100 表示 300 物理像素）
uni.canvasToTempFilePath 导出失败的硬坑
这个 API 是生成海报的临门一脚，也是最容易卡住的地方：
- 必须在
ctx.draw(true, () => { ... })的回调里调用，不能靠setTimeout猜时机 -
canvasId必须与模板中<canvas canvas-id="xxx"></canvas>完全一致，大小写敏感 - H5 端无法直接保存到相册，
uni.saveImageToPhotosAlbum仅 App 和小程序可用；H5 只能用download属性触发浏览器下载，且需后端返回 blob URL 或前端用URL.createObjectURL - 微信小程序中若未在
app.json的permission字段声明"scope.writePhotosAlbum"，调用saveImageToPhotosAlbum会直接拒绝且不弹授权框
真机调试时二维码不显示？检查这两个点
很多团队卡在这里半天，其实和 canvas 无关：
- 二维码图片地址是网络路径（如
https://xxx.com/qrcode.png），但微信小程序要求：所有drawImage的图片必须是本地临时路径或包内路径；需先uni.downloadFile下载再getImageInfo，不能跳过 - 二维码生成逻辑放在异步请求后，但
ctx.draw()已提前执行，导致没画上去；务必确保所有图片资源 ready 后，统一调用一次ctx.draw()
复杂点不在“怎么画”，而在于“什么时候画完”和“画完后怎么导出”。每个平台对 canvas 生命周期的处理差异极大，尤其 H5 的 Blob 转换、App 端的相册权限、小程序的图片域名校验，都得单独兜底。别省那几行判断逻辑。
