JeecgUniapp 移动框架技术文档

【免费下载链接】JeecgUniapp JeecgBoot配套APP移动解决方案,采用uniapp架构!一份代码多终端适配,同时支持APP、小程序、H5、鸿蒙!实现了与JeecgBoot平台完美对接,目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。 【免费下载链接】JeecgUniapp 项目地址: https://gitcode.com/jeecgboot/JeecgUniapp

1. 安装指南

1.1 环境准备

在开始使用 JeecgUniapp 之前,请确保您的开发环境满足以下要求:

  • Node.js 18+ 版本
  • pnpm 7.3+ 包管理工具
  • 推荐开发工具:VSCode、HBuilderX 或 IntelliJ IDEA

1.2 项目克隆

从 GitHub 克隆项目到本地:

git clone https://github.com/jeecgboot/jeecg-uniapp.git
cd jeecg-uniapp

1.3 依赖安装

使用 pnpm 安装项目依赖:

pnpm i

2. 项目使用说明

2.1 配置接口地址

修改环境配置文件 env/.env.development

NODE_ENV = 'development';
VITE_DELETE_CONSOLE = false;
VITE_SHOW_SOURCEMAP = true;
VITE_SERVER_BASEURL = 'http://your-server-address/jeecg-boot';

2.2 启动项目

运行以下命令启动 H5 开发环境:

pnpm run dev

2.3 构建项目

构建生产环境代码:

pnpm run build

3. 项目API使用文档

3.1 核心API功能

  • 登录认证:提供标准的 OAuth2 认证流程
  • 用户管理:获取用户信息、修改个人信息
  • 消息中心:包括系统公告、消息推送和在线聊天功能
  • 低代码功能:Online表单渲染与数据操作接口

3.2 请求封装

项目已封装统一的请求拦截器,使用示例:

import { request } from '@/utils/request';

// GET请求示例
const getUserInfo = async () => {
  return await request.get('/sys/user/info');
};

// POST请求示例
const login = async (params) => {
  return await request.post('/sys/login', params);
};

3.3 组件API

项目提供丰富的封装组件,包括:

  • 用户选择器组件
  • 部门选择器组件
  • 分类字典树组件
  • 自定义树形组件
  • 弹出框组件等

4. 项目安装方式

4.1 开发环境安装

  1. 安装 Node.js 18+ 版本
  2. 全局安装 pnpm:
    npm install -g pnpm@7.3+
    
  3. 克隆项目并安装依赖(见1.2和1.3节)

4.2 多端适配

项目支持以下平台构建:

  • H5pnpm run dev:h5
  • 微信小程序pnpm run dev:mp-weixin
  • Android/iOS:使用HBuilderX打包
  • 鸿蒙Next:支持原生适配

4.3 常见问题解决

  • 依赖安装失败:检查node和pnpm版本,清理缓存后重试
  • 接口请求失败:确认VITE_SERVER_BASEURL配置正确
  • 样式问题:确保已正确加载Unocss和Wot-design-uni样式

5. 功能模块详解

5.1 基础功能

  • 登录页面:支持账号密码登录和短信验证码登录
  • 移动首页:可自定义九宫格布局
  • 个人信息:支持头像上传、基本信息修改

5.2 消息中心

  • 通讯录:部门树形展示,支持搜索
  • 系统公告:分页列表展示
  • 在线聊天:支持文本、图片消息发送

5.3 低代码功能

  • Online表单:自动渲染PC端设计的表单
  • 仪表盘:适配移动端展示数据可视化

6. 开发建议

  1. 熟悉Vue3和TypeScript基础语法
  2. 开发前阅读Wot-design-uni组件文档
  3. 使用VSCode插件获得更好的开发体验
  4. 遵循项目已有的代码规范和目录结构

【免费下载链接】JeecgUniapp JeecgBoot配套APP移动解决方案,采用uniapp架构!一份代码多终端适配,同时支持APP、小程序、H5、鸿蒙!实现了与JeecgBoot平台完美对接,目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。 【免费下载链接】JeecgUniapp 项目地址: https://gitcode.com/jeecgboot/JeecgUniapp

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐