微信分享功能

apps/mini-user/src/components/ShareNavButton.tsx

@@ -0,0 +1,32 @@
+import { Button, Text, View } from '@tarojs/components';
+import { handleShareButtonClick, type PageSharePayload } from '../lib/wechat-share';
+
+type ShareNavButtonProps = {
+  payload?: PageSharePayload;
+};
+
+/**
+ * 顶栏分享：
+ * - 小程序：open-type=share 弹出微信分享面板
+ * - H5 微信：JSSDK 配置后提示点右上角 ···
+ */
+export default function ShareNavButton({ payload }: ShareNavButtonProps) {
+  if (process.env.TARO_ENV === 'weapp') {
+    return (
+      <Button className="page-nav-bar__btn page-nav-bar__share-btn" openType="share" hoverClass="none">
+        <Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
+      </Button>
+    );
+  }
+
+  return (
+    <View
+      className="page-nav-bar__btn"
+      onClick={() => {
+        void handleShareButtonClick(payload);
+      }}
+    >
+      <Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
+    </View>
+  );
+}

apps/mini-user/src/components/WechatShareReady.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import Taro, { useDidShow } from '@tarojs/taro';
+import { captureIosJssdkEntryUrl } from '@dukang/weixin-sdk';
+import { applyWechatShare, type PageSharePayload } from '../lib/wechat-share';
+
+/**
+ * H5：进入页面时刷新微信分享卡片；
+ * 小程序：开启右上角分享菜单。
+ */
+export default function WechatShareReady({ payload }: { payload?: PageSharePayload }) {
+  useEffect(() => {
+    if (process.env.TARO_ENV === 'h5') {
+      captureIosJssdkEntryUrl();
+    }
+  }, []);
+
+  useDidShow(() => {
+    if (process.env.TARO_ENV === 'weapp') {
+      void Taro.showShareMenu({
+        withShareTicket: true,
+        showShareItems: ['shareAppMessage', 'shareTimeline'],
+      }).catch(() => {
+        void Taro.showShareMenu({ withShareTicket: true }).catch(() => {});
+      });
+      return;
+    }
+    void applyWechatShare({
+      title: payload?.title,
+      desc: payload?.desc,
+      imgUrl: payload?.imgUrl,
+      link: payload?.link,
+    }).catch(() => {});
+  });
+
+  useEffect(() => {
+    if (process.env.TARO_ENV !== 'h5') return;
+    void applyWechatShare({
+      title: payload?.title,
+      desc: payload?.desc,
+      imgUrl: payload?.imgUrl,
+      link: payload?.link,
+    }).catch(() => {});
+  }, [payload?.title, payload?.desc, payload?.imgUrl, payload?.link]);
+
+  return null;
+}