search

mominger / blog

Tech blog
45 stars 3 forks source link

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

Open mominger opened 3 years ago

mominger commented 3 years ago

项目架构图

jiagou

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

1. Confluence/Swagger

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

2. Network请求和Service处理

2.1 Newwork

2.2 view端代码

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

2.3 page store代码

store_action page_api

具体参考 store/home

2.4 http.ts代码

req_1 req_2

具体参考 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 内容

util_bao

3.2 国际化

guojihua

3.3 toast封装

toast_fengzhuang

3.4 用户公共信息

use_info

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

4. 页面容器

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

4.1 ui-kit

ui-kit目录

4.1.1 page 根组件

page_root

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

4.2 Router

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

route_address

4.3 mobx 状态管理

4.3.1 定义store

define_store

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

4.3.2 store注入页面

store_page

注入后通过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_example
建议运行看看效果。可以基于vant做样式调整，构建一套组件库。

6.编译打包

6.1 配置项

webpack_peizhi

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

6.2 运行配置项

run_config

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

7,日志记录

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

7.1 捕获小程序异常

xiaochengxu_log

7.2 捕获React异常

react_log

7.3 日志上传

onload_log

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

8.其他