给 Taro 小程序加分享,我踩了几个隐藏很深的坑

6 阅读2分钟

今天给一个 Taro 4 + Vue3 + Skyline 小程序首页加"转发好友 + 分享朋友圈",本来以为就是两行 hook 的事,结果从真机一路踩到微信平台限制,最后还把云开发的安全模型捋了一遍。把几个最隐蔽的坑记下来,省得你重蹈。

坑一:在 <script setup> 里我顺手写了 onShareAppMessage,结果菜单点了没反应。Taro 不会收集选项式回调,得用 useShareAppMessage / useShareTimeline 这两个组合式 hook 注册。

坑二(最坑):hook 写对了、编译也过了,Android 真机点朋友圈还是弹"当前页面不可分享"。我 grep 产物搜 onShareAppMessage 搜不到,还以为是没编译进去——其实产物里只有 hook 名,回调是运行时注册的。顺着 useShareTimeline 去读 Taro 源码才定位:taro-loader/lib/page.js 只有页面 config 里 enableShareTimeline 为真才注入 component.enableShareTimeline = true;运行时的 createPageConfig 因为默认不注册分享生命周期,只在四个条件之一满足时才挂 onShareTimeline。我用 hook 不满足前三条,config 又没声明那俩字段,手机就判定页面没开分享。补上 enableShareAppMessage: true + enableShareTimeline: true 就好(这俩是 Taro 约定,生成 .json 时会被删,源码里必须留)。

坑三:朋友圈入口只在 Android 真机出现,开发者工具里压根不显示,iOS 长期不支持——想在开发者工具里验证分享朋友圈是不存在的。

坑四:朋友圈打开是"单页模式"(scene 1154),跳转 API 全禁用、storage 隔离、自定义导航栏会被系统栏盖住(得设 singlePage.navigationBarFit: 'squeezed')。我加了 guardJump() 拦截跳转、单页提示条、跳过新手引导。

坑五(最隐蔽的数据坑):单页模式下线稿库是空的。根因是单页模式等于微信官方"未登录模式",默认拒一切云资源,报 -501023。修法两步缺一不可:开"未登录用户访问"开关 + 配云函数安全规则只放开只读 lineart。关键认知:我这个项目首页是走云函数取数的(wx-server-sdk 管理员权限,绕过 C 端规则),所以数据库和存储的安全规则根本不用动——网上教程让你三个入口全配一遍,纯属多此一举。

坑六(顺手):分享封面好友要 5:4、朋友圈要 1:1,比例不同不能共用一张;原图主体内切,直接当 5:4 会被切平,得缩到贴合高度再补底色,PIL 负坐标 crop 会静默填黑边,改用 Image.new + paste 居中贴。