feat(share): 完善首页分享功能,支持朋友圈与复制链接
- 纠正 tabBar 页可分享朋友圈的误解,tabBar 页只在朋友圈单页模式底部不显示但支持分享 - useShare 钩子新增 enableCopyUrl 参数,支持复制链接按钮绑定与解绑 - 首页配置启用 enableShareTimeline,调用 useShare 启用朋友圈和复制链接三按钮 - 补充复制链接功能,适配基础库 2.14.3+(Beta),需真机测试 - 朋友圈分享自动带 inviter 参数,统一裂变归因机制 - 更新文档及注释,明确朋友圈分享与复制链接支持及注意事项
This commit is contained in:
@@ -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])
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user