微信分享功能

apps/mini-user/src/pages/product-detail/index.tsx

@@ -1,18 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { View, Text, Image } from '@tarojs/components';
-import Taro, { usePageScroll, useRouter } from '@tarojs/taro';
+import Taro, { usePageScroll, useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
 import type { ProductDetailContentDto } from '@dukang/shared-types';
 import PageShell from '../../components/PageShell';
 import PageNavBar from '../../components/PageNavBar';
 import ProductCarousel from '../../components/ProductCarousel';
+import ShareNavButton from '../../components/ShareNavButton';
+import WechatShareReady from '../../components/WechatShareReady';
 import { goLogin } from '../../lib/auth-nav';
 import { ensurePayReady } from '../../lib/pay-ready';
 import { isLoggedIn, request, toast } from '../../lib/api';
 import {
   getProductCarouselImages,
   getProductDetailImages,
+  getProductMainImage,
   type ProductImageSource,
 } from '../../lib/product-images';
+import {
+  DEFAULT_SHARE_DESC,
+  DEFAULT_SHARE_TITLE,
+  toWeappShareMessage,
+} from '../../lib/wechat-share';
 import iconHome from '../../assets/tabbar/home.png';
 
 type Product = ProductImageSource & {
@@ -42,6 +50,23 @@ export default function ProductDetailPage() {
       .catch((e) => toast(e instanceof Error ? e.message : '加载失败'));
   }, [productId]);
 
+  const sharePayload = useMemo(
+    () => ({
+      title: product?.name || DEFAULT_SHARE_TITLE,
+      desc: product?.subtitle || DEFAULT_SHARE_DESC,
+      path: `/pages/product-detail/index?id=${productId}`,
+      imgUrl: (product ? getProductMainImage(product) : '') || undefined,
+    }),
+    [product, productId],
+  );
+
+  useShareAppMessage(() => toWeappShareMessage(sharePayload));
+  useShareTimeline(() => ({
+    title: sharePayload.title || DEFAULT_SHARE_TITLE,
+    query: productId ? `id=${productId}` : '',
+    imageUrl: sharePayload.imgUrl,
+  }));
+
   function goBack() {
     const pages = Taro.getCurrentPages();
     if (pages.length > 1) {
@@ -84,16 +109,13 @@ export default function ProductDetailPage() {
 
   return (
     <PageShell variant="scroll" className="product-detail-page" hasFixedFooter>
+      <WechatShareReady payload={sharePayload} />
       <PageNavBar
         title={product.name}
         solid={headerSolid}
         titleVisible={headerSolid}
         onBack={goBack}
-        right={(
-          <View className="page-nav-bar__btn" onClick={() => toast('分享功能开发中')}>
-            <Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
-          </View>
-        )}
+        right={<ShareNavButton payload={sharePayload} />}
       />
 
       <View className="product-detail-main">