WIP: 微信分享

src/app/page.tsx

@@ -5,6 +5,7 @@ import { useRef } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import Script from 'next/script';
 
 import AppLogo from '@/components/AppLogo';
 import WXShareBtn from '@/components/WXComponent/WXShareBtn';
@@ -30,6 +31,7 @@ export default function Home() {
 
   return (
     <>
+      <Script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js" strategy="beforeInteractive" />
       <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center text-white font-normal">
         {/* 首屏 */}
         <div

src/components/WXComponent/WXShareBtn.tsx

@@ -1,67 +1,76 @@
 'use client';
 
-import { useEffect } from 'react';
+// import { useState, useEffect } from 'react';
 
 import Image from 'next/image';
 
 // import { APPID } from '@/const';
-import useUA from '@/hooks/useUA';
+// import useUA from '@/hooks/useUA';
 
 export default function WXShareBtn() {
-  const { inWX } = useUA();
+  // const { inWX } = useUA();
+  // const [wxPrepared, setWxPrepared] = useState(false);
 
   const handleShare = () => {
     alert('敬请期待');
+    // if (!wxPrepared) return;
+    // window.wx.share();
   };
 
-  useEffect(() => {
-    if (!inWX) return;
-    const { searchParams } = new URL(window.location.href);
-    const code = searchParams.get('code');
-    if (code) {
-      // 已授权
-      // wx.config({
-      //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-      //   appId: '', // 必填，公众号的唯一标识
-      //   timestamp: 0, // 必填，生成签名的时间戳
-      //   nonceStr: '', // 必填，生成签名的随机串
-      //   signature: '', // 必填，签名
-      //   jsApiList: [wx.updateAppMessageShareData], // 必填，需要使用的JS接口列表
-      // });
-      // wx.ready(function () {
-      //   //需在用户可能点击分享按钮前就先调用
-      //   wx.updateAppMessageShareData({
-      //     title: '', // 分享标题
-      //     desc: '', // 分享描述
-      //     link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-      //     imgUrl: '', // 分享图标
-      //     success: function () {
-      //       // 设置成功
-      //     },
-      //   });
-      // });
-    } else {
-      // 未授权
-      // window.location.replace(
-      //   // `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=code#wechat_redirect`,
-      //   `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_login#wechat_redirect`,
-      // );
-    }
-  }, [inWX]);
+  // useEffect(() => {
+  //   if (!inWX) return;
+
+  //   const { searchParams } = new URL(window.location.href);
+  //   const code = searchParams.get('code');
+
+  //   // 未授权
+  //   if (!code) {
+  //     window.location.replace(
+  //       `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=queyue#wechat_redirect`,
+  //     );
+  //     return;
+  //   }
+
+  //   // 已授权
+  //   const wx = window.wx;
+  //   if (typeof wx === 'undefined') return;
+  //   wx.config({
+  //     debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+  //     appId: APPID, // 必填，公众号的唯一标识
+  //     timestamp: 0, // 必填，生成签名的时间戳
+  //     nonceStr: '', // 必填，生成签名的随机串
+  //     signature: '', // 必填，签名
+  //     jsApiList: [wx.updateAppMessageShareData], // 必填，需要使用的JS接口列表
+  //   });
+  //   wx.ready(function () {
+  //     // 需在用户可能点击分享按钮前就先调用
+  //     wx.updateAppMessageShareData({
+  //       title: '', // 分享标题
+  //       desc: '', // 分享描述
+  //       link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+  //       imgUrl: '', // 分享图标
+  //       success: () => {
+  //         setWxPrepared(true);
+  //       },
+  //     });
+  //   });
+  // }, [inWX]);
 
   return (
-    <button
-      className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
-      onClick={handleShare}
-    >
-      <Image
-        className="w-[24px] h-[24px] mr-[6px]"
-        width={24}
-        height={24}
-        src="/img/index_weChatIcon.svg"
-        alt="wx-share"
-      />
-      <span>分享给好友</span>
-    </button>
+    <>
+      <button
+        className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
+        onClick={handleShare}
+      >
+        <Image
+          className="w-[24px] h-[24px] mr-[6px]"
+          width={24}
+          height={24}
+          src="/img/index_weChatIcon.svg"
+          alt="wx-share"
+        />
+        <span>分享给好友</span>
+      </button>
+    </>
   );
 }

src/types/index.d.ts

@@ -1,3 +1,7 @@
+interface Window {
+  wx?: typeof wx; // 假设wx是微信小程序的全局对象
+}
+
 interface ISong {
   id: string;
   title: string;