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

[gnipbao]

目录模块划分

/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
• ...

公共配置文件封装

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

兼容性问题解决

• [uniapp 解决ios上拉下拉白边处理](https://blog.csdn.net/m0_46846526/article/details/123882619)
• [解决滑动穿透](https://blog.csdn.net/m0_46846526/article/details/123882247)
• [微信小程序 自定义tabbar 防止闪动](https://blog.csdn.net/m0_46846526/article/details/124369686)
• …

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

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

整体封装原则：

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

常见页面复用

列表页面

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

模版页面

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

特殊领域全套模版页

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