feats

babel.config.js

       framework: 'react',
       ts: false
     }]
+  ],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "@antmjs/vantui",
+        libraryDirectory: "es",
+        style: true
+      },
+      "@antmjs/vantui"
+    ]
   ]
 }

config/dev.js

     NODE_ENV: '"development"'
   },
   defineConstants: {
+    HOST: '"http://192.168.89.147:9087"'
   },
   mini: {},
   h5: {}

config/prod.js

     NODE_ENV: '"production"'
   },
   defineConstants: {
+    HOST: '"http://192.168.89.147:9087"'
   },
   mini: {},
   h5: {

package.json

     "@tarojs/components": "3.5.7",
     "@tarojs/helper": "3.5.7",
     "@tarojs/plugin-framework-react": "3.5.7",
-    "@tarojs/plugin-platform-alipay": "3.5.7",
-    "@tarojs/plugin-platform-jd": "3.5.7",
-    "@tarojs/plugin-platform-qq": "3.5.7",
-    "@tarojs/plugin-platform-swan": "3.5.7",
-    "@tarojs/plugin-platform-tt": "3.5.7",
     "@tarojs/plugin-platform-weapp": "3.5.7",
     "@tarojs/react": "3.5.7",
     "@tarojs/router": "3.5.7",
     "@tarojs/shared": "3.5.7",
     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
+    "@zjxpcyc/react-tiny-store": "^2.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.5.7",
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^18.0.0",
     "@tarojs/mini-runner": "3.5.7",
     "@tarojs/webpack-runner": "3.5.7",
-    "webpack": "4.46.0",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "babel-plugin-import": "^1.13.5",
     "babel-preset-taro": "3.5.7",
-    "eslint-config-taro": "3.5.7",
     "eslint": "^8.12.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.5.7",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "stylelint": "^14.4.0"
+    "react-refresh": "^0.11.0",
+    "stylelint": "^14.4.0",
+    "webpack": "4.46.0"
   }
 }

src/app.js

-import { Component } from 'react'
+import React from 'react';
+import Taro from '@tarojs/taro';
+import store, { Provider } from '@/store';
 import './app.less'
 
-class App extends Component {
+const App = (props) => {
 
-  componentDidMount () {}
+  Taro.useLaunch(() => {
+    Taro.login({
+      success: (res) => {
+        store.getState('user').login(res.code);
+      }
+    })
+  });
 
-  componentDidShow () {}
-
-  componentDidHide () {}
-
-  render () {
-    // this.props.children 是将要会渲染的页面
-    return this.props.children
-  }
+  return (
+    <Provider>
+      {props.children}
+    </Provider>
+  );
 }
 
 export default App

src/app.less

 
 page {
+  height: 100%;
   box-sizing: border-box;
   background: #f8f8f8;
   --main-bg-color: #1A7565;
   --main-space: 4vw;
+
+  // antm-js 样式修改
+  // 按钮主色
+  --buttonPrimaryBackgroundColor: #1A7565;
+  // 菊花转主色
+  --loading-spinner-color: #1A7565;
 }
 
 view {

src/layouts/index.jsx

 import React from 'react';
 import { View } from '@tarojs/components';
+import { useModel } from '@/store';
+import { Loading } from '@antmjs/vantui';
+import laySty from './layout.module.less';
 
 export default (props) => {
   const { className, style } = props;
 
-  const classNames = `page-wrapper ${className}`;
+  const { person } = useModel('user');
+
+  const classNames = `${laySty['page-wrapper']} ${className}`;
 
   return (
     <View className={classNames} style={style}>
+      {
+        !person && (
+          <View className={laySty.loading}>
+             <Loading size="32px" vertical>
+              加载中...
+            </Loading>
+          </View>
+        )
+      }
       {props.children}
     </View>
   )

src/layouts/layout.module.less

+
+.page-wrapper {
+  position: relative;
+  height: 100%;
+
+  .loading {
+    position: fixed;
+    background: #f8f8f8;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    display: grid;
+    place-items: center;
+  }
+}

src/pages/home/components/Head.jsx

 import style from './head.module.less';
 
 export default (props) => {
-  console.log(style)
-
   return (
     <View className={style.head}>
       <View className={style.profile}>

src/services/wxma.js

+import request from '@/utils/request';
+
+/*
+ * 授权手机
+ */
+export const authPhone = (id, data) => request(`/api/ma/auth-phone`, { data, method: 'put' });
+
+/*
+ * 授权头像
+ */
+export const authUser = (id, data) => request(`/api/ma/auth-user`, { data, method: 'put' });
+
+/*
+ * 小程序登录
+ */
+export const login = (code) => request(`/api/ma/login?code=${code}`, { method: 'post', silent: true });

src/store/index.js

+import { createStore } from '@zjxpcyc/react-tiny-store';
+import useUser from './user';
+
+const models = {
+  'user': useUser,
+};
+
+const store = createStore(models);
+
+export default store;
+export const useModel = store.useModel;
+export const Provider = store.Provider;
+
+// store 有如下方法构成
+// getState(namespace) 获取 namespace 对应的 state, 但不能引起页面重新渲染
+// useModel(namespace) 其实是一个 hook, 获取 namespace 对应的 state
+// addModel(namespace, hook) 新加入一个 moodel
+// removeModel(namespace) 删除一个 model
+// Provider store 的 Provider 组件

src/store/user.js

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { login } from '@/services/wxma';
+
+export default function useUser() {
+  const [person, setPerson] = React.useState({});
+  const [user, setUser] = React.useState({});
+
+  const maLogin = (code) => {
+    login(code).then(res => {
+      setPerson(res.person);
+      setUser(res.user);
+      Taro.setStorage({ key: 'sessionKey', data: res.sessionKey })
+    });
+  }
+
+  return {
+    user,
+    person,
+    login: maLogin,
+  }
+}

src/utils/log.js

+import Taro from '@tarojs/taro';
+
+const logger = Taro.getRealtimeLogManager()
+
+export default logger;

src/utils/request.js

+import Taro from '@tarojs/taro';
+import { getToken, setToken } from './token';
+import logger from './log';
+
+const getQueryStrByParams = params => {
+  if (!params) return undefined;
+
+  return Object.keys(params).map(key => {
+    const value = params[key];
+    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+  }).join('&')
+}
+
+export default function request(api, options = {}) {
+  return new Promise((resolve, reject) => {
+    const { method = 'GET', params, data = {}, header = {}, silent = false, ...cfgs } = options;
+    const queryStr = params ? getQueryStrByParams(params) : undefined;
+    // eslint-disable-next-line no-undef
+    const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`
+    
+    const onError = (err) => {
+      console.error(err);
+      logger.error(`接口 [${method}]: ${url}`);
+      logger.error('参数: ', data);
+      logger.error(err);
+
+      if (!silent && 'GET' !== method.toUpperCase()) {
+        Taro.showToast({
+          title: err.message || err,
+          icon: 'error'
+        })
+      }
+
+      reject(err);
+    };
+
+    Taro.request({
+      url,
+      data,
+      method,
+      header: {
+        'content-type': 'application/json',
+        'authorization': getToken(),
+        ...header,
+      },
+      ...cfgs,
+    }).then(({ statusCode, header, data = result }) => {
+      if (statusCode >= 300) {
+        logger.error(header);
+        return onError(`网络错误 ${statusCode}`);
+      }
+
+      if (data.code === 1000) {
+        if (data.data.token) {
+          setToken(data.data.token);
+        }
+
+        if (!silent && 'GET' !== method.toUpperCase()) {
+          Taro.showToast({
+            title: '操作成功',
+            icon: 'none',
+          })
+        }
+
+        resolve(data.data);
+      } else {
+        onError(data);
+      }
+    }).catch(onError);
+
+  });
+}

src/utils/token.js

+import Taro from '@tarojs/taro';
+
+export const getToken = function () {
+  return Taro.getStorageSync('token');
+}
+
+export const setToken = function (data) {
+  return Taro.setStorage({ key: 'token', data })
+}

yarn.lock

     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@antmjs/vantui@^2.3.5":
+  version "2.3.5"
+  resolved "https://registry.npmmirror.com/@antmjs/vantui/-/vantui-2.3.5.tgz#8c9f8a714899f2639e573d16a9ddc5f39d3691d2"
+  integrity sha512-ljkwz6FA1lZ5Ms7l7dMrKJs67t9DUz0gPINKBMhKC4SPgzssfTxqoxsRTHZvCPowC7QzQBJjOwsRpGvCEIAkcw==
+  dependencies:
+    "@vant/icons" "^1.7.1"
+    classnames "^2.3.1"
+    dayjs "^1.10.6"
+    raf "^3.4.1"
+    rc-util "^5.14.0"
+    use-deep-compare-effect "^1.8.1"
+
 "@babel/code-frame@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
   dependencies:
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
     core-js-pure "^3.25.1"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.14.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
   version "7.20.6"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
   integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
     "@typescript-eslint/types" "5.46.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vant/icons@^1.7.1":
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz#36b13f2e628b533f6523a93a168cf02f07056674"
+  integrity sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
   resolved "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zjxpcyc/react-tiny-store@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-2.0.1.tgz#a83813d3ebd90050eeb0238af16fa355c034ab40"
+  integrity sha512-+MTTcQ9aU8OMl7YrmX8UVnM5qUDktdHl0wpxmI5dVIwZxvHsKRKZuQn+ExOeCvJAVC2l+ubS7afT9rzTHPuPrA==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   resolved "https://registry.npmmirror.com/babel-plugin-global-define/-/babel-plugin-global-define-1.0.3.tgz#262c528f0c26bf318f4ccc77cf21df43a0fa6308"
   integrity sha512-M8Sby4wRLuLr+9UB8V31knVRf/rl0xkk51A7um6hUCvVPyOvLtI0u0k1OPiMgE2d7CwmeSa33NzGpaALHPQCPg==
 
+babel-plugin-import@^1.13.5:
+  version "1.13.5"
+  resolved "https://registry.npmmirror.com/babel-plugin-import/-/babel-plugin-import-1.13.5.tgz#42eed1c5afd9a35ee1b1f8fe922b07c44077d753"
+  integrity sha512-IkqnoV+ov1hdJVofly9pXRJmeDm9EtROfrc5i6eII0Hix2xMs5FEm8FG3ExMvazbnZBbgHIt6qdO8And6lCloQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+
 babel-plugin-jsx-attributes-array-to-object@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmmirror.com/babel-plugin-jsx-attributes-array-to-object/-/babel-plugin-jsx-attributes-array-to-object-0.3.0.tgz#ac7b551a2407750ac899460fe5e38b1dceaebed1"
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.3.1:
   version "2.3.2"
   resolved "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dayjs@^1.10.6:
+  version "1.11.7"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   resolved "https://registry.npmmirror.com/deps-regex/-/deps-regex-0.1.4.tgz#518667b7691460a5e7e0a341be76eb7ce8090184"
   integrity sha512-3tzwGYogSJi8HoG93R5x9NrdefZQOXgHgGih/7eivloOq6yC6O+yoFxZnkgP661twvfILONfoKRdF9GQOGx2RA==
 
+dequal@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
   resolved "https://registry.npmmirror.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+rc-util@^5.14.0:
+  version "5.25.3"
+  resolved "https://registry.npmmirror.com/rc-util/-/rc-util-5.25.3.tgz#7f6a5895e4edc5acdf5f73e90e1c031f3b67257d"
+  integrity sha512-+M+44T6UdM4iOd4QXRQKQjitOY26vC5pgFPNSo0XsY9OWzpHvy77BI55eL9Q9oDMUHzVuRNzzUkK1RI2W3n+ZQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc@1.2.8, rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.npmmirror.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-is@^16.12.0, react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-deep-compare-effect@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.npmmirror.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
+  integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    dequal "^2.0.2"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmmirror.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"