Skip to content

移动端项目简介

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 组合函数: 复用前端的 useDictuseAuth 等组合函数
  • 移动端专用组合函数:
    • usePayment: 支付相关逻辑封装
    • useScroll: 滚动相关逻辑
    • useTheme: 主题管理
  • 工具类函数: 复用前端 utils(boolean、date、format、string 等)

🌐 网络与数据

  • useHttp 封装: 移动端 HTTP 请求库
  • 加密解密: API 请求加密解密支持
  • 统一拦截: 请求和响应统一处理机制
  • 租户隔离: 支持多租户数据隔离

特色功能

1. 自定义 Tabbar

  • 不使用原生 tabbar,采用自定义组件实现
  • 更灵活的样式控制和功能扩展
  • 支持动态配置和权限控制

2. 示例代码系统

  • 完整示例: 所有 WotUI 组件的使用示例
  • 代码查看: 统一的代码查看和复制功能
  • 实时效果: 直接在应用中查看组件效果
  • 最佳实践: 提供开发最佳实践指导

3. 应用配置管理

  • 应用 ID: 模仿前端实现应用标识管理
  • 环境配置: 支持多环境配置切换
  • 租户管理: 完整的租户功能支持

开发优势

  1. 开发体验优秀: 完整的 TypeScript 支持和智能提示
  2. 组件丰富: 400+ 图标 + 完整的 UI 组件库
  3. 跨平台统一: 一套代码适配多个小程序平台
  4. 性能优化: 分包加载 + 组件按需引入
  5. 示例完整: 丰富的示例代码和最佳实践

适用场景

  • 微信小程序应用
  • 多平台小程序开发
  • 移动端 H5 应用
  • 企业级移动应用
  • 需要快速开发的小程序项目

平台支持

  • 微信小程序: 完整实现
  • 🔄 QQ 小程序: 预留扩展
  • 🔄 支付宝小程序: 预留扩展
  • 🔄 京东小程序: 预留扩展
  • 🔄 抖音小程序: 预留扩展

Ruoyi Plus 移动端通过现代化的技术栈和完善的组件库,为开发者提供了一个高效、可扩展的跨平台移动应用开发解决方案。