add pre-commit action

.editorconfig

@@ -1,12 +0,0 @@
-# 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

.env.dev

@@ -1,2 +1,2 @@
 # 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
-# TARO_APP_ID="开发环境下的小程序appid"
+TARO_APP_ID="wxa76ef89a218f32f8"

.env.prod

@@ -1 +1 @@
-# TARO_APP_ID="生产环境下的小程序appid"
+TARO_APP_ID="wxa76ef89a218f32f8"

.env.test

@@ -1 +1 @@
-# TARO_APP_ID="测试环境下的小程序appid"
+TARO_APP_ID="wxa76ef89a218f32f8"

.eslintrc

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

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,10 @@
+/**/.gitignore
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc
+.husky
+.prettierignore

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "proseWrap": "preserve",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "auto"
+}

__tests__/index.test.js

@@ -1,12 +0,0 @@
-import TestUtils from '@tarojs/test-utils-react'
-
-describe('Testing', () => {
-
-  test('Test', async () => {
-    const testUtils = new TestUtils()
-    await testUtils.createApp()
-    await testUtils.PageLifecycle.onShow('pages/index/index')
-    expect(testUtils.html()).toMatchSnapshot()
-  })
-
-})

babel.config.js

@@ -2,9 +2,12 @@
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
 module.exports = {
   presets: [
-    ['taro', {
+    [
+      'taro',
+      {
         framework: 'react',
-      ts: true
+        ts: true,
-    }]
+      },
-  ]
+    ],
-}
+  ],
+};

config/dev.ts

@@ -1,9 +1,10 @@
-import type { UserConfigExport } from "@tarojs/cli";
+import type { UserConfigExport } from '@tarojs/cli';
+
 export default {
   logger: {
     quiet: false,
-    stats: true
+    stats: true,
   },
   mini: {},
-  h5: {}
+  h5: {},
-} satisfies UserConfigExport
+} satisfies UserConfigExport;

config/index.ts

@@ -1,7 +1,7 @@
-import { defineConfig, type UserConfigExport } from '@tarojs/cli'
+import { defineConfig, type UserConfigExport } from '@tarojs/cli';
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
-import devConfig from './dev'
+import devConfig from './dev';
-import prodConfig from './prod'
+import prodConfig from './prod';
 
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig(async (merge, { command, mode }) => {
@@ -13,92 +13,93 @@ export default defineConfig(async (merge, { command, mode }) => {
       640: 2.34 / 2,
       750: 1,
       375: 2,
-      828: 1.81 / 2
+      828: 1.81 / 2,
     },
     sourceRoot: 'src',
     outputRoot: 'dist',
     plugins: [],
-    defineConstants: {
+    defineConstants: {},
-    },
     copy: {
-      patterns: [
+      patterns: [],
-      ],
+      options: {},
-      options: {
-      }
     },
     framework: 'react',
-    compiler: 'webpack5',
+    compiler: {
+      type: 'webpack5',
+      prebundle: {
+        exclude: ['taro-ui'],
+      },
+    },
     cache: {
-      enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+      enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
     },
     mini: {
       postcss: {
         pxtransform: {
           enable: true,
-          config: {
+          config: {},
-
-          }
         },
         url: {
           enable: true,
           config: {
-            limit: 1024 // 设定转换尺寸上限
+            limit: 1024, // 设定转换尺寸上限
-          }
+          },
         },
         cssModules: {
           enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
           config: {
             namingPattern: 'module', // 转换模式，取值为 global/module
-            generateScopedName: '[name]__[local]___[hash:base64:5]'
+            generateScopedName: '[name]__[local]___[hash:base64:5]',
-          }
+          },
-        }
+        },
       },
       webpackChain(chain) {
-        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
+        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
-      }
+      },
     },
     h5: {
+      esnextModules: ['taro-ui'],
       publicPath: '/',
       staticDirectory: 'static',
       output: {
         filename: 'js/[name].[hash:8].js',
-        chunkFilename: 'js/[name].[chunkhash:8].js'
+        chunkFilename: 'js/[name].[chunkhash:8].js',
       },
       miniCssExtractPluginOption: {
         ignoreOrder: true,
         filename: 'css/[name].[hash].css',
-        chunkFilename: 'css/[name].[chunkhash].css'
+        chunkFilename: 'css/[name].[chunkhash].css',
       },
       postcss: {
         autoprefixer: {
           enable: true,
-          config: {}
+          config: {},
         },
         cssModules: {
           enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
           config: {
             namingPattern: 'module', // 转换模式，取值为 global/module
-            generateScopedName: '[name]__[local]___[hash:base64:5]'
+            generateScopedName: '[name]__[local]___[hash:base64:5]',
-          }
+          },
-        }
+        },
       },
       webpackChain(chain) {
-        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
+        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
-      }
+      },
     },
     rn: {
       appName: 'taroDemo',
       postcss: {
         cssModules: {
           enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  };
   if (process.env.NODE_ENV === 'development') {
     // 本地开发构建配置（不混淆压缩）
-    return merge({}, baseConfig, devConfig)
+    return merge({}, baseConfig, devConfig);
   }
   // 生产构建配置（默认开启压缩混淆等）
-  return merge({}, baseConfig, prodConfig)
+  return merge({}, baseConfig, prodConfig);
-})
+});

config/prod.ts

@@ -1,4 +1,5 @@
-import type { UserConfigExport } from "@tarojs/cli";
+import type { UserConfigExport } from '@tarojs/cli';
+
 export default {
   mini: {},
   h5: {
@@ -28,5 +29,5 @@ export default {
     //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
     //     }))
     // }
-  }
+  },
-} satisfies UserConfigExport
+} satisfies UserConfigExport;

jest.config.ts

@@ -1,6 +0,0 @@
-const defineJestConfig = require('@tarojs/test-utils-react/dist/jest.js').default
-
-module.exports = defineJestConfig({
-  testEnvironment: 'jsdom',
-  testMatch: ['<rootDir>/__tests__/**/*.(spec|test).[jt]s?(x)']
-})

package.json

@@ -30,7 +30,8 @@
     "dev:jd": "npm run build:jd -- --watch",
     "dev:quickapp": "npm run build:quickapp -- --watch",
     "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky install"
   },
   "browserslist": [
     "last 3 versions",
@@ -55,7 +56,8 @@
     "@tarojs/shared": "3.6.24",
     "@tarojs/taro": "3.6.24",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "taro-ui": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
@@ -76,10 +78,13 @@
     "eslint": "^8.12.0",
     "eslint-config-taro": "3.6.24",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^9.0.11",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^15.2.2",
     "postcss": "^8.4.18",
     "react-refresh": "^0.11.0",
     "stylelint": "^14.4.0",
@@ -87,5 +92,8 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.1.0",
     "webpack": "5.78.0"
+  },
+  "lint-staged": {
+    "*": "prettier --write"
   }
 }

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "EVA-Notify",
   "description": "A Wechat miniprogram project of EVA platform",
-  "appid": "wx636eb7cf2b84f305",
+  "appid": "wxa76ef89a218f32f8",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.ts

@@ -1,11 +1,26 @@
 export default defineAppConfig({
-  pages: [
+  pages: ['pages/index/index', 'pages/repair/repair', 'pages/user/user'],
-    'pages/index/index'
-  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'EVA Notify',
-    navigationBarTextStyle: 'black'
+    navigationBarTextStyle: 'black',
-  }
+  },
-})
+  tabBar: {
+    custom: true,
+    list: [
+      {
+        pagePath: 'pages/index/index',
+        text: '主页',
+      },
+      {
+        pagePath: 'pages/repair/repair',
+        text: '维修',
+      },
+      {
+        pagePath: 'pages/user/user',
+        text: '我的',
+      },
+    ],
+  },
+});

src/app.ts

@@ -1,15 +1,15 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react';
-import { useLaunch } from '@tarojs/taro'
+import { useLaunch } from '@tarojs/taro';
-import './app.scss'
+import 'taro-ui/dist/style/index.scss';
+import './app.scss';
 
 function App({ children }: PropsWithChildren<any>) {
-
   useLaunch(() => {
-    console.log('App launched.')
+    console.log('App launched.');
-  })
+  });
 
   // children 是将要会渲染的页面
-  return children
+  return children;
 }
 
-export default App
+export default App;

src/custom-tab-bar/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/custom-tab-bar/index.scss

@@ -0,0 +1,3 @@
+@import '~taro-ui/dist/style/components/tab-bar.scss';
+@import '~taro-ui/dist/style/components/badge.scss';
+@import '~taro-ui/dist/style/components/icon.scss';

src/custom-tab-bar/index.tsx

@@ -0,0 +1,66 @@
+import { Component, ReactNode } from 'react';
+import { AtTabBar } from 'taro-ui';
+import Taro from '@tarojs/taro';
+import 'taro-ui/dist/style/index.scss';
+import './index.scss';
+
+const navList: Array<Taro.TabBarItem> = [
+  {
+    pagePath: '/pages/index/index',
+    text: '主页',
+  },
+  {
+    pagePath: '/pages/repair/repair',
+    text: '维修',
+  },
+  {
+    pagePath: '/pages/user/user',
+    text: '我的',
+  },
+];
+
+export default class Index extends Component {
+  state = {
+    selected: 0,
+    tabList: [
+      {
+        title: '主页',
+        iconType: 'home',
+      },
+      {
+        title: '维修',
+        iconType: 'settings',
+      },
+      {
+        title: '我的',
+        iconType: 'user',
+      },
+    ],
+  };
+
+  handleClick(idx: number) {
+    this.switchTab(idx, navList[idx].pagePath);
+  }
+
+  switchTab(idx: number, url: string) {
+    this.setSelected(idx);
+    Taro.switchTab({ url });
+  }
+
+  setSelected(idx: number) {
+    this.setState({
+      selected: idx,
+    });
+  }
+
+  render(): ReactNode {
+    return (
+      <AtTabBar
+        fixed
+        tabList={this.state.tabList}
+        onClick={this.handleClick.bind(this)}
+        current={this.state.selected}
+      />
+    );
+  }
+}

src/index.html

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

src/pages/index/index.config.ts

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

src/pages/index/index.tsx

@@ -1,16 +1,29 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text } from '@tarojs/components';
-import { useLoad } from '@tarojs/taro'
+import { Component, ReactNode } from 'react';
-import './index.scss'
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
+import './index.scss';
 
-export default function Index() {
+class Index extends Component {
+  state = {
+    msg: 'Hello World!',
+  };
 
-  useLoad(() => {
+  // 以下是TabBar相关
-    console.log('Page loaded.')
+  pageCtx = Taro.getCurrentInstance().page;
-  })
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(0);
+  }
+  // 以上是TabBar相关
 
+  render(): ReactNode {
     return (
-    <View className='index'>
+      <View>
-      <Text>Hello world!</Text>
+        <Text>{this.state.msg}</Text>
       </View>
-  )
+    );
+  }
 }
+
+export default Index;

src/pages/repair/repair.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});

src/pages/repair/repair.tsx

@@ -0,0 +1,23 @@
+import { View, Text } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
+import './repair.scss';
+
+export default class RepairPage extends Component {
+  // 以下是TabBar相关
+  pageCtx = Taro.getCurrentInstance().page;
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(1);
+  }
+  // 以上是TabBar相关
+
+  render(): ReactNode {
+    return (
+      <View>
+        <Text>Repair Page</Text>
+      </View>
+    );
+  }
+}

src/pages/user/user.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});

src/pages/user/user.tsx

@@ -0,0 +1,23 @@
+import { View, Text } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
+import './user.scss';
+
+export default class UserPage extends Component {
+  // 以下是TabBar相关
+  pageCtx = Taro.getCurrentInstance().page;
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(2);
+  }
+  // 以上是TabBar相关
+
+  render(): ReactNode {
+    return (
+      <View>
+        <Text>User Page</Text>
+      </View>
+    );
+  }
+}

tsconfig.json

@@ -17,12 +17,10 @@
     "jsx": "react-jsx",
     "allowJs": true,
     "resolveJsonModule": true,
-    "typeRoots": [
+    "typeRoots": ["node_modules/@types"],
-      "node_modules/@types"
-    ],
     "paths": {
       "@/*": ["./src/*"]
-    },
+    }
   },
   "include": ["./src", "./types", "./config"],
   "compileOnSave": false

types/global.d.ts

@@ -14,16 +14,24 @@ declare module '*.styl';
 declare namespace NodeJS {
   interface ProcessEnv {
     /** NODE 内置环境变量, 会影响到最终构建生成产物 */
-    NODE_ENV: 'development' | 'production',
+    NODE_ENV: 'development' | 'production';
     /** 当前构建的平台 */
-    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+    TARO_ENV:
+      | 'weapp'
+      | 'swan'
+      | 'alipay'
+      | 'h5'
+      | 'rn'
+      | 'tt'
+      | 'quickapp'
+      | 'qq'
+      | 'jd';
     /**
      * 当前构建的小程序 appid
-     * @description 若不同环境有不同的小程序，可通过在 env 文件中配置环境变量`TARO_APP_ID`来方便快速切换 appid， 而不必手动去修改 dist/project.config.json 文件
+     * @description 若不同环境有不同的小程序，可通过在 env 文件中配置环境变量`TARO_APP_ID`来方便快速切换
+     * appid， 而不必手动去修改 dist/project.config.json 文件
      * @see https://taro-docs.jd.com/docs/next/env-mode-config#特殊环境变量-taro_app_id
      */
-    TARO_APP_ID: string
+    TARO_APP_ID: string;
   }
 }
-
-