移动端项目简介
Ruoyi-Plus-Uniapp 移动端是一个基于 UniApp + Vue 3 + TypeScript 的跨平台移动应用开发框架,专注于小程序、H5和移动端App应用开发。项目基于 unibest、Wot-UI 框架深度改造,协调后端和前端提供完整的移动端解决方案。
技术栈
- 核心框架: UniApp + Vue 3 + TypeScript
- UI组件库: WotUI (自维护重构版本)
- 状态管理: Pinia
- 图标系统: Iconify + 自定义图标库
- 构建工具: Vite
架构特色
1. 跨平台支持
- 微信小程序: 完整功能实现,开箱即用
- 微信公众号: 完整功能实现,开箱即用
- 多平台扩展: 预留 QQ、支付宝、京东、抖音等小程序支持
- 统一 API: 封装小程序 API 调用接口,实现一套代码多端运行
2. 框架重构优化
text
src/
├── api/ # 接口集中管理
├── components/ # 自定义组件
├── composables/ # 组合式函数(复用前端组合函数)
├── layouts/ # 通用布局组件
├── pages/ # 页面文件
├── static/ # 静态目录
├── stores/ # Pinia 状态管理模块
├── subpackages/ # 分包管理
├── types/ # 类型定义
└── utils/ # 工具类
└── wd/ # 通用组件库
3. 分包管理策略
- 主包: 核心功能和基础页面
- 管理员分包: 管理功能模块
- 示例代码分包: 组件演示和开发示例
- 优化小程序加载速度和包体积
核心功能
🔐 认证与登录
- 微信小程序登录: 完整的微信授权登录流程
- 公众号登录: 支持微信公众号登录
- 多种登录方式: 手机号登录、验证码登录、密码登录
- 账号绑定: unionid/手机号关联,确保用户唯一性
- 自动注册: 无账户用户自动注册机制
🎨 组件系统
- WotUI 重构: 使用 Vue 3 + TypeScript 重构所有组件
- 统一单位: 全部使用 rpx 单位,适配移动端
- 核心组件:
wd-paging
: 下滑分页加载组件
📱 图标系统
- 丰富图标库: 重构 400+ 个图标
- 双重风格: 线条图标 + 实心图标
- 便捷使用: 示例代码中可直接搜索和复制
- 类型支持: 完整的 TypeScript 类型定义
🔧 开发工具
- Composables 组合函数: 复用前端的
useDict
、useAuth
等组合函数 - 移动端专用组合函数:
usePayment
: 支付相关逻辑封装useScroll
: 滚动相关逻辑useTheme
: 主题管理
- 工具类函数: 复用前端 utils(boolean、date、format、string 等)
🌐 网络与数据
- useHttp 封装: 移动端 HTTP 请求库
- 加密解密: API 请求加密解密支持
- 统一拦截: 请求和响应统一处理机制
- 租户隔离: 支持多租户数据隔离
特色功能
1. 自定义 Tabbar
- 不使用原生 tabbar,采用自定义组件实现
- 更灵活的样式控制和功能扩展
- 支持动态配置和权限控制
2. 示例代码系统
- 完整示例: 所有 WotUI 组件的使用示例
- 代码查看: 统一的代码查看和复制功能
- 实时效果: 直接在应用中查看组件效果
- 最佳实践: 提供开发最佳实践指导
3. 应用配置管理
- 应用 ID: 模仿前端实现应用标识管理
- 环境配置: 支持多环境配置切换
- 租户管理: 完整的租户功能支持
开发优势
- 开发体验优秀: 完整的 TypeScript 支持和智能提示
- 组件丰富: 400+ 图标 + 完整的 UI 组件库
- 跨平台统一: 一套代码适配多个小程序平台
- 性能优化: 分包加载 + 组件按需引入
- 示例完整: 丰富的示例代码和最佳实践
适用场景
- 微信小程序应用
- 多平台小程序开发
- 移动端 H5 应用
- 企业级移动应用
- 需要快速开发的小程序项目
平台支持
- ✅ 微信小程序: 完整实现
- 🔄 QQ 小程序: 预留扩展
- 🔄 支付宝小程序: 预留扩展
- 🔄 京东小程序: 预留扩展
- 🔄 抖音小程序: 预留扩展
Ruoyi Plus 移动端通过现代化的技术栈和完善的组件库,为开发者提供了一个高效、可扩展的跨平台移动应用开发解决方案。