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

# 引言

JeeSite Mobile Uni-App 是 JeeSite 手机端框架/移动端框架，基于 uni-app、uView UI 实现。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。

# 特性

支持 Android，iOS，H5，微信小程序，等其它小程序平台。
移动端是无 Cookie 环境的，该项目对移动端进行会话环境封装，
让您像 Cookie 一样使用 token，无需特别处理，有框架帮您完成。
化繁为简，封装 vuex 的繁琐，简单通过 api 即可进行 state 存取。
贴心的表单组件封装，下拉框、复选框、文件上传，完美与后端 JeeSite 结合。
uView 提供 60+ 精选组件，功能丰富，多端兼容，让您快速集成，开箱即用。
众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨。
众多的常用页面和布局，让您专注逻辑，事半功倍。
合理使用 style 的 scoped 减少包体积大小。
详尽的文档支持，现代化的演示效果。
按需引入，精简打包体积。
移动端完整开源。

# 功能列表

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

# 快速体验

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

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

# 快速运行

JeeSite 手机端项目地址：https://gitee.com/thinkgem/jeesite-uniapp (opens new window)

1、下载并安装：集成开发环境 HBuilderX （推荐，也可以使用 VSCode 或 WebStorm）

2、菜单：文件 -> 导入 -> 从本地目录导入，选择 “jeesite-uniapp” 文件夹。

3、菜单：运行 -> 运行到内置浏览器（或运行到浏览器 -> Chrome 浏览器）。

4、等待 HBuliderX 控制台编译完成后，会自动弹出手机登录页面。

# 安装服务端

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

1、安装 JeeSite 最新版：https://gitee.com/thinkgem/jeesite5#本地运行（本项目支持 v4.2.3 或以上版本，若已安装，请执行 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

# 学习路线

# 学习文档

# 打包发布

打开 /common/config.js 找到 config.baseUrl 修改为正式的手机端后台服务地址
阅读这篇文章：如何发布 uni-app 软件
uni-app 整包升级、冷更新
uni-app 资源升级、热更新

进入 JeeSite 源码仓库页面，点击右上角 ⭐ Star 加星关注。

← 在线预览图片文档 CMS 内容管理系统→