uni-app怎么动态生成二维码 uni-app利用插件生成分享码方法【技巧】

uQRCode 是 uni-app 中兼容性最佳、体积小、支持多端的动态二维码生成方案，底层自动适配平台渲染方式，推荐使用 npm install uqrcodejs 并在 onReady 或 $nextTick 后调用 makeCode。uni-app 里用 uQRCode 插件生成动态二维码最稳直接说结论：别自己封装 canvas 或引入全量 qrcode.js，uni-app 生态里 uQRCode 是目前兼容性最好、体积小、支持 H5/小程序/App 的方案。它底层做了平台判断，比如在微信小程序里走 canvas 绘制，在 H5 走 svg，不用你手动适配。常见错误是直接 npm install qrcode 后在 onLoad 里调 qrcode.toCanvas() —— 这在微信小程序里会报 canvas is not defined，因为小程序没有全局 canvas 对象；在 App 端也可能因缺少 DOM 环境失败。只装官方推荐的插件：npm install uqrcodejs --save（注意包名是 uqrcodejs，不是 uQRCode）导入时用 import uQRCode from 'uqrcodejs'，别写成 require 或漏掉后缀生成前务必确认 canvas 元素已挂载，推荐在 $nextTick 或 onReady 后调用 uQRCode.makeCode()传入的 content 必须是字符串，JSON.stringify(obj) 得自己做，插件不自动序列化小程序分享码要带参数？得拼好 path 再转二维码很多同学想生成“带 scene 参数的小程序码”，但误把 https://xxx.com?uid=123 直接喂给 uQRCode.makeCode() —— 这只能生成普通二维码，扫出来是跳 H5 页面，不是小程序。真要生成小程序码（带 scene），必须走微信原生 API：uni.navigateToMiniProgram 不适用，得用 uniCloud.callFunction 调云函数，或后端调用微信接口 https://api.weixin.qq.com/wxa/getwxacodeunlimit 获取 base64 图片流。前端能做的只是把后端返回的图片渲染出来。前端能动态生成的，只有“普通二维码”（URL 或纯文本）如果业务强依赖小程序带参码，必须后端生成，前端只负责请求 + 展示 <image :src="codeUrl"></image>云开发场景下，可在云函数里用 cloud.downloadFile 拉取已存的小程序码，或用 weapp-qrcode 包生成（注意：该包不能在前端运行）makeCode 的 width 和 size 参数容易混淆uQRCode.makeCode() 有两个尺寸相关参数：width（画布宽高，单位 px）和 size（二维码模块大小，影响密集度）。很多人设了 width: 200 却发现码糊成一团，其实是没调 size。 Fotor AI Image Generator Fotor 平台的 AI 图片生成器