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,55 +1,63 @@
 '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(() => {
+  // useEffect(() => {
-    if (!inWX) return;
+  //   if (!inWX) return;
-    const { searchParams } = new URL(window.location.href);
+
-    const code = searchParams.get('code');
+  //   const { searchParams } = new URL(window.location.href);
-    if (code) {
+  //   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: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+  //     debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-      //   appId: '', // 必填，公众号的唯一标识
+  //     appId: APPID, // 必填，公众号的唯一标识
   //     timestamp: 0, // 必填，生成签名的时间戳
   //     nonceStr: '', // 必填，生成签名的随机串
   //     signature: '', // 必填，签名
   //     jsApiList: [wx.updateAppMessageShareData], // 必填，需要使用的JS接口列表
   //   });
   //   wx.ready(function () {
-      //   //需在用户可能点击分享按钮前就先调用
+  //     // 需在用户可能点击分享按钮前就先调用
   //     wx.updateAppMessageShareData({
   //       title: '', // 分享标题
   //       desc: '', // 分享描述
   //       link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   //       imgUrl: '', // 分享图标
-      //     success: function () {
+  //       success: () => {
-      //       // 设置成功
+  //         setWxPrepared(true);
   //       },
   //     });
   //   });
-    } else {
+  // }, [inWX]);
-      // 未授权
-      // 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]);
 
   return (
+    <>
       <button
         className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
         onClick={handleShare}
@@ -63,5 +71,6 @@ export default function WXShareBtn() {
         />
         <span>分享给好友</span>
       </button>
+    </>
   );
 }

src/types/index.d.ts

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