feat: initial commit with Taro + React project

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,7 @@
+{
+  "extends": ["taro/react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

babel.config.js

@@ -0,0 +1,21 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true,
+      compiler: 'vite',
+    }]
+  ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'taro-hooks',
+        camel2DashComponentName: false
+      },
+      'taro-hooks',
+    ]
+  ],
+};

config/dev.ts

@@ -0,0 +1,6 @@
+import type { UserConfigExport } from "@tarojs/cli";
+export default {
+  
+  mini: {},
+  h5: {}
+} satisfies UserConfigExport<'vite'>

config/index.ts

@@ -0,0 +1,87 @@
+import { defineConfig, type UserConfigExport } from '@tarojs/cli'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import devConfig from './dev'
+import prodConfig from './prod'
+
+// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
+export default defineConfig<'vite'>(async (merge, { command, mode }) => {
+  const baseConfig: UserConfigExport<'vite'> = {
+    projectName: 'aiyintong',
+    date: '2026-3-30',
+    designWidth: 750,
+    deviceRatio: {
+      640: 2.34 / 2,
+      750: 1,
+      375: 2,
+      828: 1.81 / 2
+    },
+    sourceRoot: 'src',
+    outputRoot: 'dist',
+    plugins: [
+       '@taro-hooks/plugin-react' 
+    ],
+    defineConstants: {
+    },
+    copy: {
+      patterns: [
+      ],
+      options: {
+      }
+    },
+    framework: 'react',
+    compiler: 'vite',
+    mini: {
+      postcss: {
+        pxtransform: {
+          enable: true,
+          config: {
+
+          }
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: 'module', // 转换模式，取值为 global/module
+            generateScopedName: '[name]__[local]___[hash:base64:5]'
+          }
+        }
+      },
+    },
+    h5: {
+      publicPath: '/',
+      staticDirectory: 'static',
+      miniCssExtractPluginOption: {
+        ignoreOrder: true,
+        filename: 'css/[name].[hash].css',
+        chunkFilename: 'css/[name].[chunkhash].css'
+      },
+      postcss: {
+        autoprefixer: {
+          enable: true,
+          config: {}
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: 'module', // 转换模式，取值为 global/module
+            generateScopedName: '[name]__[local]___[hash:base64:5]'
+          }
+        }
+      },
+    },
+    rn: {
+      appName: 'taroDemo',
+      postcss: {
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        }
+      }
+    }
+  }
+  if (process.env.NODE_ENV === 'development') {
+    // 本地开发构建配置（不混淆压缩）
+    return merge({}, baseConfig, devConfig)
+  }
+  // 生产构建配置（默认开启压缩混淆等）
+  return merge({}, baseConfig, prodConfig)
+})

config/prod.ts

@@ -0,0 +1,32 @@
+import type { UserConfigExport } from "@tarojs/cli";
+export default {
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+} satisfies UserConfigExport<'vite'>

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "aiyintong",
+  "version": "1.0.0",
+  "private": true,
+  "description": "luobodayin",
+  "templateInfo": {
+    "name": "taro-hooks@2x",
+    "typescript": true,
+    "css": "None",
+    "framework": "React"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "defaults and fully supports es6-module",
+    "maintained node versions"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "4.1.11",
+    "@tarojs/helper": "4.1.11",
+    "@tarojs/plugin-platform-weapp": "4.1.11",
+    "@tarojs/plugin-platform-alipay": "4.1.11",
+    "@tarojs/plugin-platform-tt": "4.1.11",
+    "@tarojs/plugin-platform-swan": "4.1.11",
+    "@tarojs/plugin-platform-jd": "4.1.11",
+    "@tarojs/plugin-platform-qq": "4.1.11",
+    "@tarojs/plugin-platform-h5": "4.1.11",
+    "@tarojs/runtime": "4.1.11",
+    "@tarojs/shared": "4.1.11",
+    "@tarojs/taro": "4.1.11",
+    "@taro-hooks/shared": "2",
+    "@tarojs/plugin-framework-react": "4.1.11",
+    "@tarojs/react": "4.1.11",
+    "@taro-hooks/plugin-react": "2",
+    "react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "taro-hooks": "2"
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.13.3",
+    "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@tarojs/cli": "4.1.11",
+    "@tarojs/vite-runner": "4.1.11",
+    "babel-preset-taro": "4.1.11",
+    "eslint-config-taro": "4.1.11",
+    "eslint": "^8.12.0",
+    "stylelint": "^14.4.0",
+    "terser": "^5.16.8",
+    "vite": "^4.2.0",
+    "@babel/preset-react": "^7.24.1",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "react-refresh": "^0.11.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "typescript": "^5.1.0",
+    "@babel/core": "^7.8.0"
+  }
+}

project.config.json

@@ -0,0 +1,25 @@
+{
+  "miniprogramRoot": "dist/",
+  "projectname": "aiyintong",
+  "description": "luobodayin",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": true,
+    "autoAudits": false,
+    "coverView": true,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "useCompilerModule": false
+  },
+  "compileType": "miniprogram",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {}
+}

project.tt.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "aiyintong",
+  "description": "luobodayin",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/app.config.ts

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

src/app.ts

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

src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>aiyintong</title>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'Taro-hooks',
+  enableShareAppMessage: true,
+};

src/pages/index/index.css

@@ -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

@@ -0,0 +1,47 @@
+import React, { useCallback } from "react";
+import { View, Text, Button, Image } from "@tarojs/components";
+import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
+import logo from "./hook.png";
+
+import './index.css'
+
+const Index = () => {
+  const env = useEnv();
+  const { setTitle } = useNavigationBar({ title: "Taro Hooks" });
+  const showModal = useModal({
+    title: "Taro Hooks Canary!",
+    showCancel: false,
+    confirmColor: "#8c2de9",
+    confirmText: "支持一下"
+  });
+  const { show } = useToast({ mask: true });
+
+  const handleModal = useCallback(() => {
+    showModal({ content: "不如给一个star⭐️!" }).then(() => {
+      show({ title: "点击了支持!" });
+    });
+  }, [show, showModal]);
+
+  return (
+    <View className="wrapper">
+      <Image className="logo" src={logo} />
+      <Text className="title">为Taro而设计的Hooks Library</Text>
+      <Text className="desc">
+        目前覆盖70%官方API. 抹平部分API在H5端短板. 提供近40+Hooks!
+        并结合ahook适配Taro! 更多信息可以查看新版文档: https://next-version-taro-hooks.vercel.app/
+      </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;

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": ["./src", "./types"],
+  "compileOnSave": false
+}

types/global.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="@tarojs/taro" />
+/// <reference types="@taro-hooks/plugin-react" />
+import '@taro-hooks/plugin-react';
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+
+