Kaynağa Gözat

✨ feat(share): 添加首页和商品详情页分享功能

- 在首页配置中添加分享到好友和朋友圈功能
- 在商品详情页配置中添加分享到好友和朋友圈功能
- 实现首页自定义分享内容,包括标题和封面图
- 实现商品详情页自定义分享内容,包含商品名称、价格和封面图
yourname 1 ay önce
ebeveyn
işleme
1c4a5530a0

+ 3 - 1
mini/src/pages/goods-detail/index.config.ts

@@ -2,5 +2,7 @@ export default definePageConfig({
   navigationBarTitleText: '商品详情',
   enablePullDownRefresh: false,
   navigationBarBackgroundColor: '#ffffff',
-  navigationBarTextStyle: 'black'
+  navigationBarTextStyle: 'black',
+  enableShareAppMessage: true,
+  enableShareTimeline: true,
 })

+ 10 - 1
mini/src/pages/goods-detail/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text, RichText } from '@tarojs/components'
 import { useQuery } from '@tanstack/react-query'
 import { useState, useEffect } from 'react'
-import Taro, { useRouter } from '@tarojs/taro'
+import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
 import { goodsClient } from '@/api'
 // import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -130,6 +130,15 @@ export default function GoodsDetailPage() {
     validatePriceConsistency()
   }, [goods])
 
+  // 分享功能
+  useShareAppMessage(() => {
+    return {
+      title: goods ? `${goods.name} - ¥${goods.price}` : '发现好物',
+      path: `/pages/goods-detail/index?id=${goodsId}`,
+      imageUrl: goods?.slideImages?.[0]?.fullUrl || goods?.imageFile?.fullUrl
+    }
+  })
+
   // 添加到购物车
   const handleAddToCart = () => {
     if (!goods) return

+ 2 - 0
mini/src/pages/index/index.config.ts

@@ -3,4 +3,6 @@ export default {
   enablePullDownRefresh: true,
   backgroundTextStyle: 'dark',
   backgroundColor: '#f5f5f5',
+  enableShareAppMessage: true,
+  enableShareTimeline: true,
 }

+ 10 - 1
mini/src/pages/index/index.tsx

@@ -12,7 +12,7 @@ import { useAuth } from '@/utils/auth'
 import { useCart } from '@/contexts/CartContext'
 import { Navbar } from '@/components/ui/navbar'
 import { Carousel } from '@/components/ui/carousel'
-import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
+import Taro, { usePullDownRefresh, useReachBottom, useShareAppMessage } from '@tarojs/taro'
 
 type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>
 type Goods = GoodsResponse['data'][0]
@@ -161,6 +161,15 @@ const HomePage: React.FC = () => {
     })
   })
 
+  // 分享功能
+  useShareAppMessage(() => {
+    return {
+      title: '发现好物 - 精选商品推荐',
+      path: '/pages/index/index',
+      imageUrl: finalImgSrcs && finalImgSrcs.length > 0 ? finalImgSrcs[0].imageFile?.fullUrl : undefined
+    }
+  })
+
   // // 商品点击
   // const handleGoodsClick = (goods: GoodsData, index: number) => {
   //   console.log('点击商品:', goods, index)