feat: 使用ui框架

src/app.config.ts

@@ -1,11 +1,9 @@
-export default defineAppConfig({
-  pages: [
-    'pages/index/index'
-  ],
+export default {
+  pages: ["pages/index/index"],
   window: {
-    backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
-  }
-})
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "WeChat",
+    navigationBarTextStyle: "black",
+  },
+};

src/app.ts

@@ -1,18 +1,16 @@
-import { Component, PropsWithChildren } from 'react'
-import './app.less'
-
+import { Component } from "react";
+import "./app.scss";
 class App extends Component<PropsWithChildren> {
-
-  componentDidMount () {}
+  componentDidMount() {}
 
   componentDidShow () {}
 
   componentDidHide () {}
 
-  render () {
-    // this.props.children 是将要会渲染的页面
-    return this.props.children
+  // this.props.children 是将要会渲染的页面
+  render() {
+    return this.props.children;
   }
 }
 
-export default App
+export default App;

src/pages/index/index.config.ts

@@ -1,3 +1,4 @@
-export default definePageConfig({
-  navigationBarTitleText: '首页'
-})
+export default {
+  navigationBarTitleText: 'Taro-hooks',
+  enableShareAppMessage: true,
+};

src/pages/index/index.scss

@@ -0,0 +1,56 @@
+page {
+  background-color: white;
+  padding         : 14px;
+  box-sizing      : border-box;
+  color           : #333;
+}
+
+.wrapper {
+  display       : flex;
+  flex-direction: column;
+}
+
+.logo {
+  display: block;
+  width  : 270px;
+  height : 270px;
+  margin : 0 auto;
+}
+
+.title,
+.desc {
+  text-align: center;
+  font-size : 32px;
+}
+
+.desc {
+  margin   : 20px 0;
+  font-size: 28px;
+  color    : rgba(0, 0, 0, .85);
+}
+
+.list {
+  padding     : 24px 0;
+  font-size   : 32px;
+  display     : flex;
+  align-items : center;
+  border-color: rgba(51, 51, 51, .1);
+  border-style: solid;
+  border-width: 1px 0 1px 0;
+}
+
+.list:not(:first-child) {
+  border-top-width: 0;
+}
+
+.label {
+  flex: 0.4;
+}
+
+.button {
+  display         : block;
+  width           : 100%;
+  background-color: transparent;
+  border-radius   : 2px;
+  margin-top      : 20px;
+}

src/pages/index/index.tsx

@@ -1,24 +1,67 @@
-import { Component, PropsWithChildren } from 'react'
-import { View, Text } from '@tarojs/components'
-import './index.less'
+import React, { useCallback } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
+import logo from "./hook.png";
+import {
+  Button,
+  MiniLoginButton,
+  MiniPhoneButton,
+  MiniUserButton,
+} from '@antmjs/vantui'
 
-export default class Index extends Component<PropsWithChildren> {
 
-  componentWillMount () { }
+import './index.scss'
 
-  componentDidMount () { }
+const Index = () => {
+  const env = useEnv();
+  const [_, { setTitle }] = useNavigationBar({ title: "Taro Hooks" });
+  const [show] = useModal({
+    title: "Taro Hooks!",
+    showCancel: false,
+    confirmColor: "#8c2de9",
+    confirmText: "支持一下",
+    mask: true,
+  });
+  const [showToast] = useToast({ mask: true });
 
-  componentWillUnmount () { }
+  const handleModal = useCallback(() => {
+    show({ content: "不如给一个star⭐️!" }).then(() => {
+      showToast({ title: "点击了支持!" });
+    });
+  }, [show, showToast]);
 
-  componentDidShow () { }
+  return (
+    <View className="wrapper">
+         <Button type="default">默认按钮</Button>
+      <Button type="primary">主要按钮</Button>
+      <Button type="info">信息按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+      <Button plain type="primary">
+        朴素按钮
+      </Button>
+      <Button plain type="info">
+        朴素按钮
+      </Button>
 
-  componentDidHide () { }
-
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!</Text>
+      <Image className="logo" src={logo} />
+      <Text className="title">为Taro而设计的Hooks Library</Text>
+      <Text className="desc">
+        目前覆盖70%官方API. 抹平部分API在H5端短板. 提供近40+Hooks!
+        并结合ahook适配Taro!
+      </Text>
+      <View className="list">
+        <Text className="label">运行环境</Text>
+        <Text className="note">{env}</Text>
       </View>
-    )
-  }
-}
+      <Button className="button" onClick={() => setTitle("Taro Hooks Nice!")}>
+        设置标题
+      </Button>
+      <Button className="button" onClick={handleModal}>
+        使用Modal
+      </Button>
+    </View>
+  );
+};
+
+export default Index;