alita框架背景及其框架结构
1. umi
umi
是一个可插拔式的企业级react应用框架
umi
是开源项目,蚂蚁内部基于它研发了bigfish
并只用于内部,alita
的解决方案与bigfish
类似。
2. ant-design
2.1 目前适配
antd
(基于react
实现)ant-design-vue
(基于vue
的实现)ng-zorro-antd
(基于Angular
的实现)ant-design-pro
ant-design-chart
2.2 适用场景:
- 适合于中大型产品应用
- 适合于基于 react / preact / react-native 的多终端应用
- 适合不同 UI 风格的高度定制需求的应用
2.3 友好性:
- 大部分组件都定义有更改基础样式的接口,开发人员可通过自己需求进行更改。
- 提供了定制主题,对不同公司的不同风格更加友好。
2.4 使用
通过导入antd-mobile
样式,如:import { Grid, Button } from 'antd-mobile';
就可以在页面中使用被导入的样式,且样式中提供多种api
属性,根据不同需求判断是否设置。
3. alita
一套基于Umi的移动端框架,是面向场景化的开发提效方案。通过整合业务流程、简化技术开发,使得开发者能够更专注于业务能力的提升。
3.1 apptype
alita其中的apptype可以设置为:h5
、pc
、cordova
等,可用于ios
、android
、pc
等开发,但在早期打包需要重新更改包名,于是有了appname用于解决这一问题。
3.2 alita致力于
通过整合业务流程,简化技术开发,是开发者能够专注于业务能力开发。
对于一般开发者来说,就是对src/pages/
之下的文件进行开发,我们需要考虑的便是业务逻辑的开发,其余不用管太多。
3.3 工程结构
config/
config.ts ------ 配置文件(es5语法)
mock/ ------ mock文件(用于存放模拟从服务端请求来的数据)
app.ts ------ 存mock数据
src/
assets/ ------ 静态图片资源
models/ ------ 请求运行时的数据并将其传递到页面
pages/ ------ 以react-routes库为基础, 根据文件名字生成对应路由
index/ ------ 页面文件
index.less ------ 页面样式(CSS)
index.tsx ------ 页面
services/ ------ 请求的封装
api.ts ------ 提供从服务端获取数据的接口
app.ts ------ 入口文件 , 运行时配置
global.ts ------ 全局资源
global.less ------ 全局样式
3.3.1 config/config.ts
这是几乎每个项目都需要配置的文件,在alita项目中则可设置开发的项目开发类型以及布局情况。
如:
appType: 'h5',
mobileLayout: true,
3.3.2 mock/app.ts
mock文件中定义一些前端所需要的数据,模拟从服务端请求过来,那么在前端开发过程中就可以使用这些模拟数据,而不必真正从服务端请求。对前后端开发分离提供了良好的环境。
3.3.3 src/assets/
用于存放项目中可能会用到的静态图片资源,通过@/assets/xxx.png
调用。
3.3.4 src/models/
models文件中定义一些模型文件,它通过指定路径来请求数据,并且将请求到的数据定义到一个model中,想要使用这些被请求的数据时就可以导入这个model。
3.3.5 src/pages
这个文件下只有两种类型的文件:.less
和.tsx
,分别用于存放页面的css样式和页面本体,当然对于业务上的开发都在这个文件之下。
3.3.6 src/services/api.ts
这里用于请求服务端的数据,在目前来说,用于请求mock数据,它定义请求路径和请求方式,并且对外提供这个请求的请求方法,在调用时导入并调用即可。
3.3.7 src/app.ts
用于初始配置。如配置一些基础的navBar
、titleList
等。
本人学历有限,有问题的地方希望诸位给出指导,谢谢