feat(share): 完善首页分享功能,支持朋友圈与复制链接

- 纠正 tabBar 页可分享朋友圈的误解,tabBar 页只在朋友圈单页模式底部不显示但支持分享
- useShare 钩子新增 enableCopyUrl 参数,支持复制链接按钮绑定与解绑
- 首页配置启用 enableShareTimeline,调用 useShare 启用朋友圈和复制链接三按钮
- 补充复制链接功能,适配基础库 2.14.3+(Beta),需真机测试
- 朋友圈分享自动带 inviter 参数,统一裂变归因机制
- 更新文档及注释,明确朋友圈分享与复制链接支持及注意事项
This commit is contained in:
2026-07-13 09:03:32 +08:00
parent e39eebbf1c
commit 8489a023d9
4 changed files with 34 additions and 14 deletions

View File

@@ -9,8 +9,10 @@
- 类型检查:本次改动零错误,仅余 1 个历史既有错误TS2688 @tarojs/taro 类型解析,非本次引入)。
- 待办/注意:朋友圈分享必须真机测试;后端需支持按 page 生成指定落地页小程序码;单页模式降级(避免强制登录跳转)可调用 `isTimelineSinglePage()`
## 首页接入分享(补做
- `src/hooks/useShare.ts` 增加 `enableTimeline?: boolean` 选项(默认 truetabBar 页传 false 避免注册无效的朋友圈回调React hook 规则下用内部 `if` 判断返回空对象,始终调用 hook
- `src/pages/index/index.tsx`config 加 `enableShareAppMessage: true`,组件内调用 `useShare({ title, path:'/pages/index/index', enableTimeline:false })`
- 说明:首页为 tabBar 页,微信不允许分享到朋友圈,故仅启用「分享给好友」,路径带 inviter 裂变参数
## 首页分享纠正 + 三按钮全亮(好友/朋友圈/复制链接
- ❗纠正:之前误以为"tabBar 页不能分享朋友圈"是错的。核实微信官方 Page 文档 + 分享朋友圈专题文档tabBar 页**可以**分享朋友圈(只要定义 onShareAppMessage + onShareTimeline 即显示按钮)。"tabBar 不渲染"仅指朋友圈打开后的**单页模式**里底部 tabBar 不显示,不是不能发起分享
- `src/hooks/useShare.ts` 扩展:新增 `enableCopyUrl?: boolean`(复制链接,用 `Taro.onCopyUrl`/`offCopyUrl` 在 useEffect 里进页绑定、离页解绑);`enableTimeline` 默认 true 且 tabBar 页也生效;纠正了旧注释
- `src/pages/index/index.tsx`config 加 `enableShareAppMessage` + `enableShareTimeline``useShare({ title, path, enableTimeline:true, enableCopyUrl:true })`,首页右上角三个按钮全亮
- 复制链接:基础库 2.14.3+ Beta官方说仅 Android实测 iOS 也支持);朋友圈/复制链接开发者工具可能看不到入口,需真机测试。
- 注意:首页分享朋友圈后是单页模式(无登录态/不能跳转/tabBar 不渲染),首页是交互型页面,单页体验受限,但作传播入口可用;如需更好体验可用 `isTimelineSinglePage()` 做降级。
- 类型检查:零错误(历史既有 1 个 TS2688 仍在)。

View File

@@ -33,9 +33,9 @@
- 新订单检测 Hook`src/hooks/useNewOrderDetector.ts`30秒轮询页面隐藏暂停
## 分享 / 朋友圈能力2026-07-13 接入)
- 统一封装:`src/hooks/useShare.ts``useShare({title, path?, query?, imageUrl?})`内部一次注册 `useShareAppMessage` + `useShareTimeline`,并自动在 path/query 追加 `inviter=${当前用户id}` 做裂变归因;`isTimelineSinglePage()` 判断朋友圈单页模式 scene===1154
- 统一封装:`src/hooks/useShare.ts``useShare({title, path?, query?, imageUrl?, enableTimeline?, enableCopyUrl?})`,一次注册 `useShareAppMessage` + `useShareTimeline` + 可选 `onCopyUrl` 复制链接;自动在 path/query 追加 `inviter=${当前用户id}` 做裂变归因;`isTimelineSinglePage()` 判断朋友圈单页模式 scene===1154
- 海报组件:`src/components/SharePoster/index.tsx`Canvas 2D 绘制封面+标题+价格+小程序码,返回临时图路径作 imageUrl
- 小程序码接口:`src/api/share.ts` `generateShareCode(page, inviterId)` 复用 `generateMiniProgramCode`scene 用 `uid_${inviterId}`page 透传但后端需读取转发才生效)
- 裂变约定:分享链接 query 用 `inviter`,与 `src/utils/invite.ts``parseInviteParams` 读取字段一致
- 已接入页面:商品详情、积分商品、拼团、秒杀、活动、赛事(带 canvas 海报邀请下级、分销推广、升级VIP、分享赚佣金仅 enableShare + useShare无海报
- 注意tabBar 4 页(首页/分类/订单/我的)不支持朋友圈分享;朋友圈分享必须真机测试(开发者工具无预览)
- 已接入页面:商品详情、积分商品、拼团、秒杀、活动、赛事(带 canvas 海报邀请下级、分销推广、升级VIP、分享赚佣金仅 enableShare + useShare无海报;首页(好友+朋友圈+复制链接三按钮全亮)
- 注意tabBar 页**也支持朋友圈分享**(之前误判已纠正)——只要 config 开 enableShareTimeline + 定义 onShareTimeline 即显示按钮;"tabBar 不渲染"仅指朋友圈打开后的单页模式里底部 tabBar 不显示。朋友圈/复制链接开发者工具可能看不到入口,必须真机测试。复制链接是 Beta基础库 2.14.3+)。