目录模块划分

/my-uni-app
|--/components          # 组件目录，存放所有可复用的Vue组件
|   |--/base             # 基础组件，如Button、Input等
|   |--/common           # 通用组件，可能包含多个页面共用的组件
|   |--/page             # 页面特定组件，针对特定页面的组件
|--/pages               # 页面目录，存放页面相关的Vue文件
|   |--/index           # 首页模块
|   |   |--index.vue     # 首页
|   |--/user            # 用户模块
|   |   |--login.vue     # 登录页
|   |--...              # 其他页面模块
|--/static              # 静态资源目录，存放图片、图标等静态文件
|--/api                 # API请求目录，封装网络请求和服务
|   |--/user.js         # 用户相关API
|   |--/item.js         # 商品相关API
|--/store               # Vuex状态管理目录
|   |--index.js         # Vuex入口文件
|   |--modules          # Vuex模块
|--/utils               # 工具类和帮助函数
|--/unpackage            # 未打包的源码，HBuilderX特有
|--/wxcomponents         # 微信小程序组件目录，存放小程序特有的组件
|--/nvue                # nvue目录，存放App端的原生渲染页面
|--/uni_modules          # 第三方插件或自定义模块
|--/manifest.json       # 应用配置文件
|--/pages.json          # 页面配置文件
|---app.vue             # 应用配置文件
|---main.js              # Vue初始化入口文件
|---config.js            # 项目配置文件，如API基础路径等
|---icons                # 字体图标或SVG图标目录
|--/package.json         # npm包配置文件

说明：

/components：所有Vue组件都放在这里，可以进一步按功能细分子目录。
/pages：每个页面模块都有自己的目录，包含该页面的所有Vue文件、样式和配置。
/static：存放应用所需的所有静态资源，如图片、字体等。
/api：封装所有API请求，可以按模块进一步划分。
/store：如果使用Vuex进行状态管理，所有Vuex相关文件放在这里。
/utils：存放工具函数和帮助类，如日期处理、验证等。
/unpackage：HBuilderX特有目录，存放未打包的源码。
/wxcomponents：特定于微信小程序的组件存放地。
/nvue：App端原生渲染页面目录，用于性能要求较高的场景。
/uni_modules：uni-app插件市场下载的模块或自定义模块。
/manifest.json：应用的配置文件，定义了应用的名称、图标、版本等信息。
/pages.json：页面配置文件，定义页面路径、窗口样式等。
app.vue：应用的根组件，可以在这里定义全局样式和应用生命周期。
main.js：Vue初始化入口文件，用于创建Vue实例和挂载应用。
config.js：项目配置文件，如API的基础路径、应用设置等。
/icons：字体图标或SVG图标目录，方便在项目中复用。
/package.json：npm包配置文件，定义项目的依赖、脚本等。

组件复用

基础组件

组件库

自建组件库

兼容性
性能
更新/维护

开源组件库

uni-ui
- DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架
- GitHub链接: https://github.com/dcloudio/uni-ui
- 全平台支持
uView
- uView是一个基于Vue.js的UI组件库，专为uni-app设计，提供了一套丰富的UI组件，支持多端开发。
- GitHub链接: https://github.com/umicro/uView
Vant
- Vant是一个轻量、可靠的移动端Vue组件库，由有赞团队维护，提供了小程序版本，适用于uni-app开发。
- GitHub链接: https://github.com/youzan/vant-weapp
wot-design-uni
- wot-design-uni组件库基于vue3+Typescript构建，参照wot design的设计规范进行开发，提供70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
- Github链接: https://github.com/Moonofweisheng/wot-design-uni
- 多平台覆盖，支持微信小程序、支付宝小程序、钉钉小程序、H5、APP 等
FirstUI
- FirstUI是一个轻量级的uni-app组件库，提供了一些基础组件，适合移动端和小程序开发。
- GitHub链接: https://github.com/FirstUI/FirstUI

业务组件

主要是对内部业务场景的封装

广告组件
内部登陆/免登鉴权等
支付
悬浮
...

通用能力封装

请求模块化封装

网络请求库封装axios：
- 创建一个基础的请求类，配置基础的请求参数，比如 baseURL、超时时间、请求头等
- 提供统一的方法来发送请求，比如 request 方法，封装 get、post 等 HTTP 方法。
服务层封装：
- 创建一个或多个服务模块，每个模块对应一组相关的API请求。
- 在服务层中调用请求库的 request 方法，并处理业务逻辑。
错误处理和拦截器：
- 在请求库中配置拦截器，处理请求前的数据准备和响应后的数据加工。
- 对于常见的错误进行统一处理，比如Token过期、网络错误等

无感刷新Token

拦截器中的响应处理：
Token刷新流程：
封装刷新和重试机制：

常见功能场景封装

通用登陆鉴权
获取用户信息/手机号
获取经纬度
设置位置信息
上传图片
…

常用工具库封装

日期时间处理day.js
常用验证规则封装，如手机号、邮箱
加密解密相关
存储管理
跨端web页面浏览webview
动画库
分享
lodash.js
...

公共配置文件封装

配置文件
环境变量
配置管理类

兼容性问题解决

其他功能封装（看具体端场景）

瀑布流
视频播放
主题切换
文档预览
图表/地图
证件识别
实时语音
…

整体封装原则：

优先看官网有没有提供好用的插件比如：uni-pay如果官方插件不满足需要可以自己根据情况来封装

常见页面复用

列表页面

下拉刷新/上滑加载
性能优化
- 列表页z-paging集成https://github.com/SmileZXLee/uni-z-paging
图片懒加载
搜索插件
...

模版页面

用来提供一些基础页面模版方便快速进行二次开发

特殊领域全套模版页

用来给某一个业务方向（商城、金融、医疗等）提供常见场景页面方便快速集成二次开发

gnipbao / iblog

uni-app项目架构设计思路整理 #51