feat: initialize taro react typescript miniapp

src/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  pages: ["pages/index/index"],
+  window: {
+    navigationBarTitleText: "新手小程序",
+    navigationBarBackgroundColor: "#1AAD19",
+    navigationBarTextStyle: "white",
+    backgroundTextStyle: "light",
+    backgroundColor: "#f6f7fb"
+  }
+});

src/app.scss

@@ -0,0 +1,21 @@
+page {
+  background: #f6f7fb;
+  color: #1f2937;
+  font-size: 32rpx;
+}
+
+.page {
+  min-height: 100vh;
+  padding: 40rpx 32rpx 60rpx;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at top right, rgba(26, 173, 25, 0.15), transparent 26%),
+    linear-gradient(180deg, #f7fbf5 0%, #f6f7fb 100%);
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 28rpx;
+  padding: 36rpx 32rpx;
+  box-shadow: 0 18rpx 48rpx rgba(15, 23, 42, 0.08);
+}

src/app.tsx

@@ -0,0 +1,8 @@
+import "./app.scss";
+
+function App(props) {
+  const { children } = props;
+  return children ?? null;
+}
+
+export default App;

src/pages/index/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "首页"
+});

src/pages/index/index.scss

@@ -0,0 +1,48 @@
+.title {
+  display: block;
+  font-size: 46rpx;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-bottom: 16rpx;
+  color: #0f172a;
+}
+
+.subtitle {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: #475569;
+}
+
+.section {
+  margin-top: 28rpx;
+}
+
+.section-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 14rpx;
+  color: #111827;
+}
+
+.list-item {
+  margin-bottom: 12rpx;
+  line-height: 1.8;
+  color: #334155;
+}
+
+.primary-btn {
+  margin-top: 28rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(135deg, #1aad19 0%, #138a15 100%);
+  color: #ffffff;
+  border: none;
+}
+
+.tip {
+  display: block;
+  margin-top: 20rpx;
+  font-size: 24rpx;
+  color: #64748b;
+}

src/pages/index/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Button, Text, View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "./index.scss";
+
+const steps = [
+  "先执行 npm install 安装依赖",
+  "再执行 npm run dev:weapp 启动编译",
+  "用微信开发者工具打开当前项目",
+  "继续在 React 页面里开发你的业务"
+];
+
+export default function Index() {
+  const [clicked, setClicked] = useState(false);
+
+  const handleStart = () => {
+    setClicked(true);
+    Taro.showToast({
+      title: "开始开发吧",
+      icon: "success"
+    });
+  };
+
+  return (
+    <View className="page">
+      <View className="card">
+        <Text className="title">欢迎开始你的第一个 React 小程序</Text>
+        <Text className="subtitle">
+          这是一个基于 Taro、React 和 TypeScript 的微信小程序模板，后续你写页面时会更接近前端 React 开发方式。
+        </Text>
+
+        <View className="section">
+          <Text className="section-title">推荐步骤</Text>
+          {steps.map((item, index) => (
+            <View className="list-item" key={item}>
+              {index + 1}. {item}
+            </View>
+          ))}
+        </View>
+
+        <Button className="primary-btn" onClick={handleStart}>
+          点击测试交互
+        </Button>
+
+        {clicked ? <Text className="tip">按钮事件已经触发，说明 React 页面逻辑正常运行。</Text> : null}
+      </View>
+    </View>
+  );
+}