feat: 添加注释，添加登录退出流程

.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
   extends: ['taro/react'],
+  rules: {
+    'jsx-quotes': ['error', 'prefer-double'],
+  },
   overrides: [
     {
       files: ['config/*.js'],

.prettierrc.js

@@ -33,5 +33,5 @@ module.exports = {
   // 根据显示样式决定 html 要不要折行
   htmlWhitespaceSensitivity: 'css',
   // 换行符使用 lf
-  endOfLine: 'lf',
+  endOfLine: 'auto',
 }

.stylelintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     'selector-type-no-unknown': [
       true,
       {
+        // 需要忽略的特定的选择器
         ignoreTypes: ['page'],
       },
     ],

.vscode/taro.code-snippets

@@ -0,0 +1,23 @@
+{
+  "Taro component": {
+    "prefix": "taro",
+    "body": [
+      "import React from 'react'",
+      "import { View } from '@tarojs/components'",
+      "",
+      "interface $1Props {",
+      "  $2",
+      "}",
+      "",
+      "const $1:React.FC<$1Props> = ({ $3 }) => {",
+      "",
+      "  return (",
+      "    <View>$4</View>",
+      "  )",
+      "}",
+      "",
+      "export default $1"
+    ],
+    "description": "Taro component"
+  }
+}

.y2src.js

@@ -1,7 +1,12 @@
 module.exports = {
+  // yapi 地址
   apiPrefix: 'http://apimock.nanjingzw.cn',
-  token: 'xxx',
+  // 项目id
   projectId: null,
+  // 当前项目的token
+  token: 'xxx',
+  // 是否去掉生成的service key中的空白符
   trim: true,
+  // 忽略更新的文件列表
   // ignoreFiles: ['yapi.services.ts'],
 }

babel.config.js

@@ -1,10 +1,14 @@
 // babel-preset-taro 更多选项和默认值：
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   presets: [
-    ['taro', {
-      framework: 'react',
-      ts: true
-    }]
-  ]
+    [
+      'taro',
+      {
+        framework: 'react',
+        ts: true,
+      },
+    ],
+  ],
 }

global.d.ts

@@ -9,13 +9,13 @@ declare module '*.scss'
 declare module '*.sass'
 declare module '*.styl'
 
-declare module 'alife-logger' {
-  export function singleton({
-    pid: string,
-    appType: string,
-    imgUrl: string,
-    enableLinkTrace: boolean,
-    behavior: boolean,
-    enableSPA: boolean,
-  }) {}
-}
+// declare module 'alife-logger' {
+//   export function singleton({
+//     pid: string,
+//     appType: string,
+//     imgUrl: string,
+//     enableLinkTrace: boolean,
+//     behavior: boolean,
+//     enableSPA: boolean,
+//   }) {}
+// }

package.json

@@ -55,6 +55,7 @@
     "@tarojs/cli": "3.0.25",
     "@tarojs/mini-runner": "3.0.25",
     "@tarojs/webpack-runner": "3.0.25",
+    "@types/node": "^14.14.35",
     "@types/react": "^16.0.0",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^2.x",

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "miniapp-boilerplate",
   "description": "基于Taro的小程序项目模板",
-  "appid": "fixme",
+  "appid": "wx4dbcf2372227dd56",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.ts

@@ -1,11 +1,45 @@
-export default {
-  pages: [
-    'pages/index/index'
-  ],
+import { Config } from '@tarojs/taro'
+
+type MinaConfig = Config & { [ke: string]: any }
+
+const config: MinaConfig = {
+  lazyCodeLoading: 'requiredComponents',
+  pages: ['pages/index/index', 'pages/tab/index', 'pages/my/index'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
-  }
+    navigationBarTitleText: '标题',
+    navigationBarTextStyle: 'black',
+  },
+  tabBar: {
+    color: '#8A8A8A',
+    selectedColor: '#000',
+    list: [
+      {
+        iconPath: 'assets/tabbar/home.png',
+        selectedIconPath: 'assets/tabbar/home_on.png',
+        pagePath: 'pages/index/index',
+        text: '首页',
+      },
+      {
+        iconPath: 'assets/tabbar/parlor.png',
+        selectedIconPath: 'assets/tabbar/parlor_on.png',
+        pagePath: 'pages/tab/index',
+        text: 'Tab',
+      },
+      {
+        iconPath: 'assets/tabbar/my.png',
+        selectedIconPath: 'assets/tabbar/my_on.png',
+        pagePath: 'pages/my/index',
+        text: '我的',
+      },
+    ],
+  },
 }
+
+// 开发环境添加组件示例页面
+if (process.env.NODE_ENV === 'development') {
+  config.pages!.push('pages/components/index')
+}
+
+export default config

src/app.tsx

@@ -1,28 +1,25 @@
 import React, { Component } from 'react'
 import { UserContext, UserState } from '@/hooks/useUser'
+import { getToken, setToken, sleep } from './utils'
 import { User } from './types/user'
-import { getToken, setToken } from './utils'
 
 import './styles/app.less'
 
 class App extends Component {
-  state: Pick<UserState, 'user' | 'userFetched' | 'userPromise'> = {
+  state: Pick<UserState, 'user' | 'userFetched' | 'userLoading'> = {
     user: null,
     userFetched: false,
-    userPromise: new Promise(resolve => {
-      this.resolveUser = resolve
-    }),
+    userLoading: false,
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     if (getToken()) {
       // TODO 根据业务调整
-      this.refreshMe().then(() => {
-        this.setState({
-          userFetched: true,
-        })
-      })
+      await this.refreshMe()
     }
+    this.setState({
+      userFetched: true,
+    })
   }
 
   // componentDidCatch() {}
@@ -31,17 +28,36 @@ class App extends Component {
 
   // componentDidHide() {}
 
-  resolveUser: null | ((value: User | null) => void) = null
-
   setUser = (user: User | null) => {
     this.setState({
       user,
     })
   }
 
+  login = async (username: string, password: string) => {
+    this.setState({
+      userLoading: true,
+    })
+    // TODO 调用登录接口
+    console.log(username, password)
+    await sleep(1500)
+    this.setUser({ id: 1, name: '用户2' })
+    setToken('mock token')
+    this.setState({
+      userLoading: false,
+    })
+  }
+
   refreshMe = async () => {
     // TODO 调用获取用户信息接口
-    this.setUser(null)
+    this.setState({
+      userLoading: true,
+    })
+    await sleep(1500)
+    this.setUser({ id: 1, name: '用户名' })
+    this.setState({
+      userLoading: false,
+    })
   }
 
   logout = async () => {
@@ -50,7 +66,6 @@ class App extends Component {
     this.setUser(null)
   }
 
-  // this.props.children 是将要会渲染的页面
   render() {
     return (
       <UserContext.Provider
@@ -59,9 +74,13 @@ class App extends Component {
           logged: !!this.state.user?.id,
           setUser: this.setUser,
           refreshMe: this.refreshMe,
+          login: this.login,
           logout: this.logout,
         }}
-      ></UserContext.Provider>
+      >
+        {/* this.props.children 是将要会渲染的页面 */}
+        {this.props.children}
+      </UserContext.Provider>
     )
   }
 }

src/components/Button/index.less

@@ -0,0 +1,3 @@
+page {
+  background: #fff;
+}

src/components/Button/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+
+interface ButtonProps {}
+
+const Button: React.FC<ButtonProps> = ({}) => {
+  return <View>This is a button</View>
+}
+
+export default Button

src/components/Loading/index.less

@@ -0,0 +1,3 @@
+.loading {
+  text-align: center;
+}

src/components/Loading/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import './index.less'
+
+interface LoadingProps {}
+
+const Loading: React.FC<LoadingProps> = ({}) => {
+  return <View>Loading ...</View>
+}
+
+export default Loading

src/constants/http.ts

@@ -1,4 +1,4 @@
 // base url
-export const BASE_URL = process.env.API_URL
+export const BASE_URL = process.env.API_URL!
 // common url prefix
 export const COMMON_URL_PREFIX = 'api'

src/hooks/useUser.ts

@@ -4,20 +4,29 @@ import { createContext, useContext } from 'react'
 
 export interface UserState {
   user: User | null
+  // 用户信息是否已获取
   userFetched: boolean
+  // 用户信息获取中？
+  userLoading: boolean
+  // 是否已登录
   logged: boolean
-  userPromise: Promise<User | null>
+  // 设置当前登录用户
   setUser: (state: User | null) => void
+  // 登录
+  login: (username: string, password: string) => Promise<void>
+  // 更新我的信息
   refreshMe: () => Promise<void>
+  // 登出
   logout: () => Promise<void>
 }
 
 export const UserContext = createContext<UserState>({
   user: null,
   userFetched: false,
   logged: false,
-  userPromise: Promise.resolve(null),
+  userLoading: false,
   setUser: noop,
+  login: () => Promise.resolve(),
   refreshMe: () => Promise.resolve(),
   logout: () => Promise.resolve(),
 })

src/pages/components/index.config.ts

@@ -0,0 +1,7 @@
+import { PageConfig } from '@tarojs/taro'
+
+const config: PageConfig = {
+  navigationBarTitleText: '组件示例',
+}
+
+export default config

src/pages/components/index.less

@@ -0,0 +1,3 @@
+page {
+  background: #fff;
+}

src/pages/components/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+
+interface DemoProps {}
+
+const Demo: React.FC<DemoProps> = ({}) => {
+  return <View></View>
+}
+
+export default Demo

src/pages/index/index.config.ts

@@ -1,3 +1,7 @@
-export default {
-  navigationBarTitleText: '首页'
+import { PageConfig } from '@tarojs/taro'
+
+const config: PageConfig = {
+  navigationBarTitleText: '首页',
 }
+
+export default config