feat: add wxshare

frontend/wechat/package.json

@@ -15,10 +15,13 @@
         "dplayer": "^1.27.1",
         "pinia": "^3.0.2",
         "plyr": "^3.7.8",
+        "sha1": "^1.1.1",
         "tailwindcss": "^4.1.4",
         "vue": "^3.5.13",
         "vue-icons-plus": "^0.1.8",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "wechat-js-sdk": "^1.3.3",
+        "weixin-js-sdk": "^1.6.5"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.2",

frontend/wechat/src/api/wechatApi.js

@@ -0,0 +1,11 @@
+import client from './client';
+
+export const wechatApi = {
+    jsSdk() {
+        return client.get('/wechats/js-sdk', {
+            params: {
+                url: window.location.href.split('#')[0],
+            },
+        });
+    },
+}

frontend/wechat/src/hooks/useRandom.js

@@ -0,0 +1,14 @@
+export function useRandom() {
+    function string(size) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        for (let i = 0; i < size; i++) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        }
+        return result;
+    }
+    return {
+        string,
+    };
+}

frontend/wechat/src/hooks/useWxSDK.js

@@ -0,0 +1,80 @@
+import wx from "weixin-js-sdk";
+
+export function useWxSDK() {
+    /**
+     * 初始化设置
+     */
+    function initConfig(config) {
+        return new Promise((resolve) => {
+            wx.config({
+                debug: config.debug,
+                appId: config.appId,
+                timestamp: config.timestamp,
+                nonceStr: config.nonceStr,
+                signature: config.signature,
+                jsApiList: [
+                    "chooseImage",
+                    "uploadImage",
+                    "previewImage",
+                    "onMenuShareTimeline",
+                    "onMenuShareAppMessage",
+                    "chooseWXPay",
+                ],
+                openTagList: [],
+            });
+            wx.ready(() => {
+                console.log("wx.ready called");
+                resolve(true);
+            });
+        });
+    }
+
+    /** 设置微信分享 */
+    function setShareInfo(
+        shareInfo,
+        onSuccess = () => { },
+        onCancel = () => { }
+    ) {
+        wx.onMenuShareTimeline({
+            title: shareInfo.title, // 分享标题
+            link: shareInfo.link, // 分享链接，可以不是当前页面，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+            imgUrl: shareInfo.imgUrl,
+            success: function () {
+                // 用户确认分享后执行的回调函数
+                onSuccess();
+            },
+            cancel: function () {
+                onCancel();
+                // 用户取消分享后执行的回调函数
+            },
+        });
+        wx.onMenuShareAppMessage({
+            title: shareInfo.title, // 分享标题
+            desc: shareInfo.desc,
+            link: shareInfo.link, // 分享链接，可以不是当前页面，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+            imgUrl: shareInfo.imgUrl,
+            type: "link", // 分享类型,music、video或link，不填默认为link
+            success: function (e) {
+                // 用户确认分享后执行的回调函数
+                onSuccess();
+                console.log("分享成功", e);
+            },
+            cancel: function (e) {
+                // 用户取消分享后执行的回调函数
+                onCancel();
+                console.log("分享取消", e);
+            },
+        });
+    }
+
+    /** 是否是ios微信 */
+    function isiOSWechat() {
+        return window.__wxjs_is_wkwebview;
+    }
+
+    return {
+        initConfig,
+        setShareInfo,
+        isiOSWechat,
+    };
+}

frontend/wechat/src/views/ArticleDetail.vue

@@ -5,7 +5,10 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { BsChevronLeft } from 'vue-icons-plus/bs'
 import { useRoute, useRouter } from 'vue-router'
 import { postApi } from '../api/postApi'
+import { wechatApi } from '../api/wechatApi'
+import { useWxSDK } from '../hooks/useWxSDK'
 
+const wx = useWxSDK()
 const route = useRoute()
 const router = useRouter()
 const article = ref(null)
@@ -90,40 +93,13 @@ const fetchArticle = async () => {
         article.value = data
         document.title = article.value.title
 
-        // 定义“分享给朋友”及“分享到QQ”按钮的分享内容
-        const shareContent = {
+        // 调用微信 JS SDK 分享接口
+        wx.setShareInfo({
             title: data.title,
             desc: data.content,
             link: window.location.href,
             imgUrl: data.head_images[0]
-        }
-        // 调用微信 JS SDK 分享接口
-        if (window.wx) {
-            wx.updateTimelineShareData({
-                title: shareContent.title,
-                link: shareContent.link,
-                imgUrl: shareContent.imgUrl,
-                success: function () {
-                    console.log('分享成功')
-                },
-                cancel: function () {
-                    console.log('分享取消')
-                }
-            })
-
-            wx.updateAppMessageShareData({
-                title: shareContent.title,
-                desc: shareContent.desc,
-                link: shareContent.link,
-                imgUrl: shareContent.imgUrl,
-                success: function () {
-                    console.log('分享成功')
-                },
-                cancel: function () {
-                    console.log('分享取消')
-                }
-            })
-        }
+        })
     } catch (error) {
         console.error('Failed to fetch article:', error)
         alert("加载失败!")
@@ -137,6 +113,12 @@ const handleBack = () => {
 onMounted(async () => {
     await fetchArticle()
     initializePlayer()
+
+    wechatApi.jsSdk().then(resp => {
+        wx.initConfig(resp.data)
+    }).catch(error => {
+        console.error('Failed to initialize WeChat SDK:', error)
+    })
 })
 
 onUnmounted(() => {