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

@@ -1,4 +1,4 @@
import { useRef } from 'react'
import { useRef, useEffect } from 'react'
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { useUser } from './useUser'
@@ -11,8 +11,10 @@ export interface UseShareOptions {
query?: string
/** 封面图(海报临时路径或网络图地址),不传则微信截取页面 */
imageUrl?: string
/** 是否注册朋友圈分享(仅非 tabBar 页生效。tabBar 页请传 false避免注册无效的圈友回调 */
/** 是否注册朋友圈分享tabBar 页亦可分享朋友圈(仅在朋友圈打开后的单页模式里 tabBar 不渲染,发起分享不受影响),默认 true */
enableTimeline?: boolean
/** 是否启用「复制链接」(右上角菜单复制链接按钮,基础库 2.14.3+ Beta。开启后进入页面绑定、离开解绑 */
enableCopyUrl?: boolean
}
/** 当前是否处于朋友圈单页模式scene=1154 */
@@ -40,9 +42,10 @@ function buildQuery(query: string | undefined, inviterId?: number | string): str
}
/**
* 统一注册「分享给好友」「分享到朋友圈」回调。
* 统一注册「分享给好友」「分享到朋友圈」「复制链接」回调。
* 自动在 path/query 中追加 inviter当前登录用户 id用于分销裂变。
* 注意:朋友圈分享仅对非 tabBar 页生效,需在页面 config 中设置 enableShareTimeline: true
* 朋友圈分享 tabBar 页同样生效朋友圈打开后为单页模式tabBar 不渲染,但发起分享不受影响)
* 需在页面 config 中设置 enableShareAppMessage / enableShareTimeline: true 才会显示对应菜单。
*/
export function useShare(options: UseShareOptions) {
const { user } = useUser()
@@ -61,7 +64,6 @@ export function useShare(options: UseShareOptions) {
})
useShareTimeline(() => {
// tabBar 页不支持朋友圈config 也不会开启对应入口,这里返回空对象避免无效注册
if (optionsRef.current.enableTimeline === false) return {}
const o = optionsRef.current
return {
@@ -70,4 +72,18 @@ export function useShare(options: UseShareOptions) {
imageUrl: o.imageUrl,
}
})
// 复制链接:进入页面绑定、离开解绑(全局监听,需手动管理避免影响其它页面)
useEffect(() => {
if (!options.enableCopyUrl) return
if (typeof Taro.onCopyUrl !== 'function') return
const handler = () => {
const o = optionsRef.current
return { query: buildQuery(o.query, inviterId), title: o.title }
}
Taro.onCopyUrl(handler)
return () => {
if (typeof Taro.offCopyUrl === 'function') Taro.offCopyUrl(handler)
}
}, [options.enableCopyUrl, inviterId])
}

View File

@@ -16,6 +16,7 @@ import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '首页',
enableShareAppMessage: true,
enableShareTimeline: true,
})
const IndexPage: React.FC = () => {
@@ -26,11 +27,12 @@ const IndexPage: React.FC = () => {
const [loading, setLoading] = useState(true)
const scrollHeight = useScrollHeight(44)
// 首页分享好友tabBar 页不支持朋友圈,仅启用好友分享
// 首页分享好友 + 朋友圈 + 复制链接(右上角三个按钮全亮
useShare({
title: '鑫龙家电 - 精选好物,实惠到家,等你来逛~',
path: '/pages/index/index',
enableTimeline: false,
enableTimeline: true,
enableCopyUrl: true,
})