feat: initial commit with Taro + React project

This commit is contained in:
Mikuisnotavailable
2026-03-30 14:33:33 +08:00
commit 96cfc609b2
21 changed files with 16036 additions and 0 deletions

12
.editorconfig Normal file
View File

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

7
.eslintrc.js Normal file
View File

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

7
.gitignore vendored Normal file
View File

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

21
babel.config.js Normal file
View File

@@ -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',
]
],
};

6
config/dev.ts Normal file
View File

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

87
config/index.ts Normal file
View File

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

32
config/prod.ts Normal file
View File

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

15539
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

82
package.json Normal file
View File

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

25
project.config.json Normal file
View File

@@ -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": {}
}

13
project.tt.json Normal file
View File

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

9
src/app.config.ts Normal file
View File

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

0
src/app.css Normal file
View File

22
src/app.ts Normal file
View File

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

17
src/index.html Normal file
View File

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

BIN
src/pages/index/hook.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

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

56
src/pages/index/index.css Normal file
View File

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

47
src/pages/index/index.tsx Normal file
View File

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

28
tsconfig.json Normal file
View File

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

22
types/global.d.ts vendored Normal file
View File

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