基于Taro+React的小程序架构说明

[mominger]

项目架构图

基于Taro框架 React 语法进行研发
不支持路由拦截，也不支持axios/fetch,因此封装了路由和http库
本项目当前仅支持小程序
下面针对架构的各层进行阐述

1. Confluence/Swagger

后台提供接口文档后，用Postman进行调试

2. Network请求和Service处理

2.1

2.2 view端代码

通过页面根组件Page自动调用store.onLoad(action)
或页面通过store.action 去调用api
具体参考pages/test/home/index.tsx

2.3 page store代码

具体参考 store/home

2.4 http.ts代码

具体参考 bit-kit/http
mobx构建store，相当于页面model层，由model层去负责api的调用
相比redux(dispatch(action) -> reducer -> new state)的流程，mobx的store 类看上去自然简洁;另外redux 需要依赖中间件，如通过插件redux-thunk才能call api，mobx则无此限制;最后redux更新组件需通过store.subscribe 异步获取，mobx是同步响应式更新。以上是将redux换成mobx的原因。

3. Utils

biz-kit 包下 放了很多辅助性的JS类

3.1 内容

3.2 国际化

3.3 toast封装

3.4 用户公共信息

其他请查看 biz-kit下的代码

4. 页面容器

页面都放在pages下，公共的UI组件放在ui-kit下

4.1 ui-kit

4.1.1 page 根组件

抽取根组件，是为了复用所有页面的一些通用逻辑。比如会自动处理所有页面store的初始化 onLoad、卸载onUnload.
其他请查看 ui-kit下的代码

4.2 Router

目前仅把路由封装在 /biz-kit/nav下，未做扩展，为将来需做路由鉴权时预留位置。

4.3 mobx 状态管理

4.3.1 定义store

响应式变量、初始化action onLoad、卸载action onUnload、其他action、computed变量

4.3.2 store注入页面

注入后通过store.xxx 调用
代码在 pages/test/home

5.UI组件库

目前市面上的组件库有: uniapp 的uni-ui，Taro的 taro-ui，微信小程序的WeUI，以及跨Vue/React/Mini Program的 vant组件。其中vant组件最丰富，使用最广泛。WeUI虽然是官方推出，但更多偏向于展示类的组件。
因此引入了vant。
官网vant-weapp
参考Taro引入vant的文章

5.1 使用例子

建议运行看看效果。可以基于vant做样式调整，构建一套组件库。

6.编译打包

6.1 配置项

基于webpack
参考配置项说明
通过webpackChain可以更改webpack配置

6.2 运行配置项

目前有dev、prd环境，如有必要，可以拓展

7,日志记录

Taro糅合了小程序、React 2套生命周期，因此需对他们进行异常统一捕获，并上传日志

7.1 捕获小程序异常

7.2 捕获React异常

7.3 日志上传

目前异常日志统一收集到 biz-kit/log后，只是打印到控制台，正常应上传到日志平台，如Sentry。
注意: Promise等异步异常需要try...catch自行捕获

8.其他

• hooks 文件夹展示了2个hook示例

• 建议组件多使用 memo+useMemo+useCallback，避免重复渲染

• 技术栈请参考 README

• 项目地址

• 注意: dev分支是基于mobx状态管理，旧的redux版本v1.0.0-redux，已放弃