手机端移动端框架、Mobile、Uni-App

# 引言

JeeSite Mobile Uni-App 基于最新的前端技术栈 uni-app + Vue 3 + TypeScript + Vite + UnoCSS 架构，使用 unibest 模版初始化，并集成 wot-ui-v2 组件库。本项目不强制依赖 HBuilderX，支持通过命令行方式运行 Web、小程序和 App 应用（推荐使用 VSCode 或 WebStorm 作为集成开发环境）。

JeeSite 内置了约定式路由、Layout 布局、请求封装、请求拦截、登录拦截、UnoCSS 原子化样式、i18n 多语言等核心功能，并提供代码智能提示、自动格式化、统一配置管理、代码片段等开发辅助工具，大幅提升开发效率。

# 特性

• 使用 TS + Vite + Vue3 + uni-app 一端开发，多端发布。
• 支持 H5，Android，iOS，鸿蒙，微信小程序等其它小程序平台。
• 封装移动端 Token 会话环境的，自动完成会话管理，有框架帮你完成。
• Wot-UI 提供 80+ 高质量组件，功能丰富，多端兼容，让您快速集成，开箱即用。
• 常用组件：下拉框、树选择、复选框、单选框、日期、图标、多语言、文件上传。
• 众多贴心的 TS 利器，让您飞镖在手，召之即来，百步穿杨。
• 众多的常用页面和布局，让您专注逻辑，事半功倍。
• 合理使用 style 的 scoped 减少包体积大小。
• 详尽的文档支持，现代化的演示效果。
• 按需引入，精简打包体积。
• 移动端完整开源。

# 功能列表

• 账号登录、记住我（下次免登录）
• 自助服务：找回密码功能、账号注册功能
• 我的主页：修改个人信息、修改头像和裁剪、修改密码
• 辅助功能：关于我们、意见反馈、检查更新、帮助中心
• 工作台功能列表主页、消息列表页面
• 增删改查示例
• 工作流引擎

# 快速体验

1、H5 APP 端访问地址：https://demo.jeesite.com/app （最新演示）
      获得H5最佳体验，操作方法：Chrome 为例，在浏览器上按 F12 打开“开发者工具”，点击该工具左上角第二个按钮 “Toggle device toolbar”，显示“切换设备工具栏”，然后在该工具栏上点击“Responsive”下拉选择“iPhone6/7/8”，再按“F5”刷新页面，即可。

2、微信小程序端：通过微信扫码（最佳体验，但不是最新演示，更新延迟）

3、安卓 Android 安装包，点击下载：JeeSite.apk (opens new window)

# 本地运行

• 执行 pnpm i 安装依赖
• Web H5：pnpm dev:h5, 然后打开 http://localhost:9000 (opens new window)。
• 微信小程序：pnpm dev:mp 然后打开微信开发者工具，导入本地文件夹，选择本项目的dist/dev/mp-weixin 文件。
• APP 平台：pnpm dev:app, 然后打开 HBuilderX，导入刚刚生成的dist/dev/app 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。(如果是 安卓 和 鸿蒙 平台，则不用这个方式，可以把整个项目导入到 HBuilderX，通过 HBuilderX 的菜单来运行到对应的平台。)

# 本地环境

• Node.js -- >=v22.13.0
• Pnpm -- >=10.11.0
• VSCode -- 可选其他 IDE ：Trae、Lingma、Cursor、WebStorm 等
• HBuilderX -- APP 的运行和发布离不开它
• Git -- 必须有 git，否则 husky 会报错

# 应用发布

• Web H5：pnpm build:h5，打包后的文件在 dist/build/h5，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 manifest.config.ts 文件的 h5.router.base 属性进行修改。
• 微信小程序：pnpm build:mp, 打包后的文件在 dist/build/mp-weixin，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
• APP 平台：pnpm build:app, 然后打开 HBuilderX，导入刚刚生成的dist/build/app 文件夹，选择发行 - APP云打包。(如果是 安卓 和 鸿蒙 平台，则不用这个方式，可以把整个项目导入到 HBuilderX，通过 HBuilderX 的菜单来发行到对应的平台。)

# 学习路线

1. 什么是 uni-app、为什么选择 uni-app
2. 集成开发环境 VSCode 下载
3. 集成开发环境 HBuilderX 下载
4. uni-app vue 3 文档教程

# 学习文档

1. JeeSite 平台文档
2. uni-app 框架文档
3. unibast 框架文档
4. Wot UI 2.x 文档

# 安装服务端

本项目后台服务默认连接的是 demo.jeesite.com 官网演示环境，您需要替换为您的 JeeSite 后台，步骤如下：

1、安装 JeeSite 最新版：https://gitee.com/thinkgem/jeesite5#本地运行 （本项目支持 v5.0.0 或以上版本，若已安装，请执行 bin/package.bat 更新依赖）

2、打开 application.yml 修改如下配置（Ajax跨域设置和与后台基础交互的请求头名）：

# Shiro 相关
shiro:

  # 是否允许跨域访问 CORS，如果允许，设置允许的域名。v4.2.3 开始支持多个域名和模糊匹配，例如：http://*.jeesite.com,http://*.jeesite.net
  accessControlAllowOrigin: '*'
  
  # 允许跨域访问时 CORS，可以获取和返回的方法和请求头
  accessControlAllowMethods: GET, POST, OPTIONS
  accessControlAllowHeaders: content-type, x-requested-with, x-ajax, x-token, x-remember
  accessControlExposeHeaders: x-remember
  
# Session 相关
session:

  # 设置接收 SessionId 请求参数和请求头名称
  sessionIdHeaderName: x-token
  
  # 记住我的请求参数和请求头的名称
  rememberMeHeaderName: x-remember
  
# Web 相关
web:

  # AJAX 接受参数名和请求头名
  ajaxHeaderName: x-ajax
  

3、打开手机端项目的 /common/config.js 修改 config.baseUrl 后端服务地址为您安装的 JeeSite 服务地址。