feat: 增加页面级 hooks 逻辑

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": ["taro/react"],
   "rules": {
+    "jsx-quotes": ["error", "prefer-double"],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
   }

.zed/debug.json

@@ -0,0 +1,13 @@
+[
+  {
+    "type": "node",
+    "label": "Taro微信小程序调试",
+    "adapter": "JavaScript",
+    "request": "launch",
+    "console": "internalConsole",
+    "build": {
+      "command": "npm",
+      "args": ["run", "dev:weapp"]
+    }
+  }
+]

app/app.config.ts

@@ -1,12 +1,10 @@
 export default defineAppConfig({
-  pages: [
+  pages: ["pages/index/index"],
-    'pages/index/index'
-  ],
   window: {
-    backgroundTextStyle: 'light',
+    backgroundTextStyle: "light",
-    navigationBarBackgroundColor: '#fff',
+    navigationBarBackgroundColor: "#fff",
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: "积客名片",
-    navigationBarTextStyle: 'black',
+    navigationBarTextStyle: "white",
-    navigationStyle: 'custom',
+    navigationStyle: "custom",
-  }
+  },
-})
+});

app/app.tsx

@@ -1,28 +1,23 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
-import { useLaunch } from '@tarojs/taro'
+import { useLaunch } from "@tarojs/taro";
-import { RecoilRoot } from 'recoil'
+import { RecoilRoot } from "recoil";
-
+import { getGlobalConfig } from "@/apis";
-import './styles/tailwind.basic.css'
-import { getGlobalConfig } from './apis'
 
+import "@/styles/tailwind.basic.css";
 
 function App({ children }: PropsWithChildren<any>) {
   useLaunch(() => {
-    // 初始化全局配置
+    loadGlobalConfig();
-    loadGlobalConfig()
+    console.log("App launched.");
-    console.log('App launched.')
+  });
-  })
 
+  // 初始化全局配置
   const loadGlobalConfig = async () => {
-    const res = await getGlobalConfig()
+    const res = await getGlobalConfig();
-    console.log(res)
+    console.log(res);
-  }
+  };
 
-  return (
+  return <RecoilRoot>{children}</RecoilRoot>;
-    <RecoilRoot>
-      {children}
-    </RecoilRoot>
-  )
 }
 
-export default App
+export default App;

app/components/layout/Layout.tsx

@@ -1,38 +1,38 @@
-import { View, Text } from "@tarojs/components"
+import { View, Text } from "@tarojs/components";
-import { FC, memo, PropsWithChildren } from "react"
+import { FC, memo, PropsWithChildren } from "react";
-
 
 const PageLoader = memo(() => {
-    return (
+  return (
-        <View className='h-screen w-screen flex items-center justify-center bg-red-500 text-white text-2xl'>
+    <View className="h-screen w-screen flex items-center justify-center bg-red-500 text-white text-2xl">
-            <Text>Loading...</Text>
+      <Text>Loading...</Text>
-        </View>
+    </View>
-    )
+  );
-})
+});
 
 interface LayoutProps {
-    loadding?: boolean
+  loadding: boolean;
 }
 
 interface LayoutComponent extends FC<PropsWithChildren<LayoutProps>> {
-    Header: FC<PropsWithChildren>,
+  Header: FC<PropsWithChildren>;
-    Footer: FC<PropsWithChildren>,
+  Footer: FC<PropsWithChildren>;
-    Container: FC<PropsWithChildren>,
+  Container: FC<PropsWithChildren>;
 }
 
-const LayoutBase = ({ children, loadding = true }: PropsWithChildren<LayoutProps>) => {
+const LayoutBase = ({
-    if (loadding){
+  children,
-        return (
+  loadding = true,
-            <PageLoader></PageLoader>
+}: PropsWithChildren<LayoutProps>) => {
-        );
+  if (loadding) {
-    }
+    return <PageLoader></PageLoader>;
+  }
   return (
-    <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
+    <View className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl">
       {children}
     </View>
-  )
+  );
-}
+};
 
-const Layout = LayoutBase as unknown as LayoutComponent
+const Layout = LayoutBase as unknown as LayoutComponent;
 
 export default Layout;

app/pages/index/hooks.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+// 页面请求hooks
+export const usePageContent = () => {
+  const [pageContent, setPageContent] = useState("");
+  const [pageLoading, setPageLoading] = useState<boolean>(true);
+
+  const loadPageContent = async (code: string) => {
+    try {
+      console.log("Page content loaded:", code);
+      setPageContent("请求结果");
+      setTimeout(() => {
+        setPageLoading(false);
+      }, 5000);
+    } catch (error) {
+      console.error("Error loading page content:", error);
+      setPageLoading(false);
+    }
+  };
+
+  return { pageLoading, pageContent, loadPageContent };
+};

app/pages/index/index.tsx

@@ -1,17 +1,21 @@
-import Layout from '@/components/layout/Layout'
+import Layout from "@/components/layout/Layout";
-import { View, Text } from '@tarojs/components'
+import { View, Text } from "@tarojs/components";
-import { useLoad } from '@tarojs/taro'
+import { useDidShow } from "@tarojs/taro";
+import { usePageContent } from "./hooks";
 
-export default function Index () {
+export default function Index() {
-  useLoad(() => {
+  const { pageLoading, pageContent, loadPageContent } = usePageContent();
-    console.log('Page loaded.')
+
-  })
+  useDidShow(async () => {
+    await loadPageContent("测试身份编码");
+    console.log("Page shown.");
+  });
 
   return (
-    <Layout loadding>
+    <Layout loadding={pageLoading}>
-        <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
+      <View className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl">
-          <Text>Hello world!</Text>
+        <Text className="">{pageContent}</Text>
-        </View>
+      </View>
     </Layout>
-  )
+  );
 }

app/utils/comm/index.ts

@@ -0,0 +1,7 @@
+import { useState } from "react";
+
+// 页面加载状态
+export const usePageLoading = () => {
+  const [pageLoading, setPageLoading] = useState(false);
+  return [pageLoading, setPageLoading] as const;
+};