RuoYi App 移动端框架技术文档

RuoYi App 移动端框架技术文档

【免费下载链接】RuoYi-App 🎉 RuoYi APP 移动端框架，基于uniapp+uniui封装的一套基础模版，支持H5、APP、微信小程序、支付宝小程序等，实现了与RuoYi-Vue、RuoYi-Cloud后台完美对接。 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-App

1. 平台概述

RuoYi App是基于UniApp开发的轻量级移动端框架，支持多终端适配（APP/小程序/H5），与RuoYi-Vue、RuoYi-Cloud后端完美对接。采用uni-ui组件库实现全端兼容的高性能UI界面。

2. 安装指南

2.1 环境准备

• Node.js 14.x+
• HBuilderX（推荐使用最新版）
• 微信开发者工具（小程序开发需要）
• Android Studio / Xcode（原生APP开发需要）

2.2 依赖安装

# 克隆项目
git clone https://gitee.com/y_project/RuoYi-App.git

# 进入项目目录
cd RuoYi-App

# 安装依赖
npm install

3. 项目使用说明

3.1 开发模式运行

# 微信小程序
npm run dev:mp-weixin

# H5
npm run dev:h5

# Android
npm run dev:app-plus

3.2 生产环境构建

# 微信小程序
npm run build:mp-weixin

# H5
npm run build:h5

# Android
npm run build:app-plus

4. API使用文档

4.1 基础API配置

在/src/config/api.js中配置后端接口地址：

export const baseUrl = process.env.VUE_APP_BASE_API
export const wsUrl = process.env.VUE_APP_WS_API

4.2 核心API模块

模块	文件路径	主要功能
用户认证	/src/api/login.js	登录/注销/获取用户信息
系统管理	/src/api/system.js	菜单/角色/部门等管理接口
个人中心	/src/api/user.js	个人信息修改/密码重置

4.3 请求封装示例

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/auth/login',
    method: 'post',
    data
  })
}

5. 项目安装方式

5.1 快速部署方案

1. 修改/src/config/project.js中的项目配置
2. 配置/src/config/api.js中的接口地址
3. 运行npm run dev:[平台]启动开发环境

5.2 多平台打包

1. 微信小程序：

   • 执行npm run build:mp-weixin
   • 使用微信开发者工具导入/dist/build/mp-weixin目录

2. H5部署：

   • 执行npm run build:h5
   • 部署/dist/build/h5目录到Web服务器

3. 原生APP：

   • Android：通过HBuilderX生成Android打包资源
   • iOS：需配置苹果开发者证书后打包

6. 注意事项

1. 开发时需确保后端服务(RuoYi-Vue/RuoYi-Cloud)正常运行
2. 小程序开发需要配置合法的微信开发者ID
3. APP打包需要配置对应的平台签名证书
4. 多环境配置可通过.env文件管理

【免费下载链接】RuoYi-App 🎉 RuoYi APP 移动端框架，基于uniapp+uniui封装的一套基础模版，支持H5、APP、微信小程序、支付宝小程序等，实现了与RuoYi-Vue、RuoYi-Cloud后台完美对接。 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-App