app端海报生成与分享需通过renderjs+canvas→base64→writefile→uni.share链路,路径协议、权限校验及平台差异(ios/android/鸿蒙)必须分别适配,否则静默失败。

uni-app 在 App 端生成海报并支持多平台分享,不能直接复用小程序的 onShareAppMessage 或 H5 的 Web Share API,必须走「Canvas 绘制 → 本地临时路径 → 保存/分享」链路。核心难点不在绘图本身,而在 **App 端 canvas 渲染结果无法直接导出为可用图片路径**,且不同平台(iOS/Android/鸿蒙)对 uni.canvasToTempFilePath 的行为不一致。
App 端 canvas.toTempFilePath 必须配合 renderjs 使用
普通 Vue 页面中调用 uni.createCanvasContext 在 App 端会返回空上下文或静默失败,这是官方已知限制。真实可用的方案是:把 canvas 渲染逻辑下沉到 renderjs 中——它运行在原生渲染线程,能正确访问 canvas 像素数据。
-
renderjs中必须使用canvas.getContext('2d'),而非uni.createCanvasContext - 绘制完成后,调用
canvas.toDataURL('image/png')获取 base64,再通过uni.getFileSystemManager().writeFile写入本地临时文件(路径需以_www或tmp开头) - 不能直接传 base64 给
uni.share,iOS 会拒绝;必须转成真实文件路径,如_www/poster_abc123.png - 鸿蒙 OS 需额外判断
uni.getSystemInfoSync().platform === 'harmony',其writeFile路径规则与 Android/iOS 不同,建议统一用uni.env.NODE_ENV === 'production'+ 时间戳生成唯一路径
uni.share 在 App 端分享海报时 imageUrl 必须是本地文件路径
很多人误把 base64 或网络地址塞进 imageUrl 字段,结果分享卡片只显示默认图标。App 端 uni.share 的 type: 2(图片类型)要求 imageUrl 是真实可读的本地路径,且必须满足:
- 路径由
uni.getFileSystemManager().writeFile写入,不能是uni.downloadFile下载的临时路径(App 端该路径不可被uni.share读取) - iOS 上路径必须以
file://开头(如file:///var/mobile/Containers/Data/Application/xxx/tmp/poster.png),而 Android 可直接用相对路径_www/poster.png;鸿蒙则需用uni.getRealPathSync转换 - 分享前务必用
uni.getFileInfo校验文件是否存在、大小是否 >0,否则静默失败
多平台分享参数要按 provider + scene 动态组装
同一个海报,发给微信、QQ、系统相册,参数结构完全不同。不能写死 provider: 'weixin',而应根据用户选择的渠道动态适配:
- 微信(iOS/Android):
provider: 'weixin',scene: 'WXSceneSession'(聊天)、'WXSceneTimeline'(朋友圈),type: 2,imageUrl填本地路径 - QQ:
provider: 'qq',type: 2,但imageUrl必须是file://协议(iOS)或绝对路径(Android),且 QQ SDK 对 PNG 透明通道兼容性差,建议导出时加白底 - 系统相册(iOS/Android):
provider: 'system',type: 2,imageUrl同样需本地路径,但无需scene;鸿蒙则要用uni.saveImageToPhotosAlbum单独处理 - 注意:App 端不支持
uni.share的miniProgram字段,所以无法像小程序那样带参跳转,海报里的二维码必须是带完整参数的静态码
导出海报前必须检查用户相册权限(尤其 iOS)
App 端保存海报到相册或分享时触发写入,iOS 会强制弹窗请求 PHPhotoLibrary 权限。如果用户之前拒绝过,uni.saveImageToPhotosAlbum 会直接 fail,且不再弹窗。此时必须引导用户去设置页手动开启:
- 调用
uni.getSetting检查scope.writePhotosAlbum状态 - 若为
denied,用uni.openSetting跳转设置页(注意:iOS 14+ 需提前在manifest.json的ios→permissions中声明"photo") - 鸿蒙 OS 权限模型不同,需用
uni.requestPermission请求ohos.permission.READ_MEDIA和ohos.permission.WRITE_MEDIA - 切勿在未校验权限的情况下直接调用
uni.share,否则部分安卓机型会 crash











