update: 从微信中跳转到app

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 import Link from 'next/link';
 
@@ -17,12 +17,15 @@ export default function Home() {
   const firstScreenRef = useRef<HTMLDivElement>(null);
   const { inWX } = useUA();
   const nav = useNav();
+  const downloadBtnRef = useRef<HTMLButtonElement>(null);
 
   const handleDownload = () => {
     if (!inWX) {
       download();
     } else {
-      nav.push({ path: '/download' });
+      setTimeout(() => {
+        nav.push({ path: '/download' });
+      }, 1500);
     }
   };
 
@@ -30,6 +33,21 @@ export default function Home() {
     window.scrollTo({ top: firstScreenRef?.current?.offsetHeight, behavior: 'smooth' });
   };
 
+  useEffect(() => {
+    const handleLaunch = () => {
+      console.log('success');
+    };
+    const handleError = (e: any) => {
+      console.log('fail', e.detail);
+    };
+    downloadBtnRef.current?.addEventListener('launch', handleLaunch);
+    downloadBtnRef.current?.addEventListener('error', handleError);
+    return () => {
+      downloadBtnRef.current?.removeEventListener('launch', handleLaunch);
+      downloadBtnRef.current?.removeEventListener('error', handleError);
+    };
+  }, []);
+
   return (
     <>
       <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center text-white font-normal">
@@ -49,10 +67,21 @@ export default function Home() {
             <WXShareBtn />
             {/* 下载 */}
             <button
-              className="w-[283px] h-[48px] flex items-center justify-center bg-[#C43737] font-medium text-[17px] rounded-full mb-[16px]"
+              ref={downloadBtnRef}
+              className="relative w-[283px] h-[48px] flex items-center justify-center bg-[#C43737] font-medium text-[17px] rounded-full mb-[16px]"
               onClick={handleDownload}
             >
               下载【雀乐】APP
+              <wx-open-launch-app
+                id="launch-btn"
+                appid="wxae6fb76efa147314"
+                extinfo="your-extinfo"
+                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+              >
+                <script type="text/wxtag-template">
+                  <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} />
+                </script>
+              </wx-open-launch-app>
             </button>
             <button className="w-[283px] h-[48px] flex justify-center" onClick={handleSlideDown}>
               <ImageWithBasePath

src/components/WXComponent/WXShareBtn.tsx

@@ -50,8 +50,9 @@ export default function WXShareBtn() {
         if (typeof wx === 'undefined') return;
         const { timestamp, nonceStr, signature } = res?.data || {};
         wx.config({
+          // debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
           debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-          appId: APPID, // 必填，公众号的唯一标识
+          appId: false, // 必填，公众号的唯一标识
           timestamp, // 必填，生成签名的时间戳
           nonceStr, // 必填，生成签名的随机串
           signature, // 必填，签名

src/types/index.d.ts

@@ -16,3 +16,9 @@ interface ISong {
   songNo: number;
   haveCollect: boolean;
 }
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'wx-open-launch-app': any;
+  }
+}