JeeSite4 Mobile Uni-AppJeeSite 手機(jī)端框架/移動端框架

JeeSite Mobile Uni-App 是 JeeSite 手機(jī)端框架/移動端框架，基于 uni-app、uView UI 實現(xiàn)。

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web、 以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個平臺。

uView UI，是 uni-app 生態(tài)最優(yōu)秀的 UI 框架，全面的組件和便捷的工具會讓您信手拈來，如魚得水。

特性

• 支持 Android，iOS，H5，微信小程序，等其它小程序平臺。
• 移動端是無 Cookie 環(huán)境的，該項目對移動端進(jìn)行會話環(huán)境封裝，
• 讓你像 Cookie 一樣使用 token，無需特別處理，有框架幫你完成。
• 化繁為簡，封裝 vuex 的繁瑣，簡單通過 api 即可進(jìn)行 state 存取。
• 貼心的表單組件封裝，下拉框、復(fù)選框、文件上傳，完美與后端 JeeSite 結(jié)合。
• uView 提供 60+ 精選組件，功能豐富，多端兼容，讓您快速集成，開箱即用。
• 眾多貼心的 JS 利器，讓您飛鏢在手，召之即來，百步穿楊。
• 眾多的常用頁面和布局，讓您專注邏輯，事半功倍。
• 合理使用 style 的 scoped 減少包體積大小。
• 詳盡的文檔支持，現(xiàn)代化的演示效果。
• 按需引入，精簡打包體積。
• 移動端完整開源。

功能列表

• 賬號登錄、記住我（下次免登錄）
• 自助服務(wù)：找回密碼功能、賬號注冊功能
• 我的主頁：修改個人信息、修改頭像和裁剪、修改密碼
• 輔助功能：關(guān)于我們、意見反饋、檢查更新、幫助中心
• 工作臺功能列表主頁、消息列表主頁
• 增刪改查示例
• 工作流引擎

快速體驗

1、H5 APP 端訪問地址：https://demo.jeesite.com/app （最新演示）
      獲得H5最佳體驗，操作方法：Chrome 為例，在瀏覽器上按 F12 打開“開發(fā)者工具”，點擊該工具左上角第二個按鈕 “Toggle device toolbar”，顯示“切換設(shè)備工具欄”，然后在該工具欄上點擊“Responsive”下拉選擇“iPhone6/7/8”，再按“F5”刷新頁面，即可。

2、微信小程序端：通過微信掃碼（最佳體驗，但不是最新演示，更新延遲）

快速運行

JeeSite 手機(jī)端項目地址：https://gitee.com/thinkgem/jeesite4-uniapp

1、下載并安裝：集成開發(fā)環(huán)境 HBuilderX （推薦，也可以使用 VSCode 或 WebStorm）

2、菜單：文件 -> 導(dǎo)入 -> 從本地目錄導(dǎo)入，選擇 “jeesite4-uniapp” 文件夾。

3、菜單：運行 -> 運行到內(nèi)置瀏覽器（或運行到瀏覽器 -> Chrome 瀏覽器）。

4、等待 HBuliderX 控制臺編譯完成后，會自動彈出手機(jī)登錄頁面。

安裝服務(wù)端

本項目后臺服務(wù)默認(rèn)連接的是 demo.jeesite.com 官網(wǎng)演示環(huán)境，你需要替換為你的 JeeSite 后臺，步驟如下：

1、安裝 JeeSite 最新版：https://gitee.com/thinkgem/jeesite4#本地運行 （本項目支持 v4.2.3 或以上版本，若已安裝，請執(zhí)行 bin/package.bat 更新依賴）

2、打開 application.yml 修改如下配置（Ajax跨域設(shè)置和與后臺基礎(chǔ)交互的請求頭名）：

# Shiro 相關(guān)
shiro:

  # 是否允許跨域訪問 CORS，如果允許，設(shè)置允許的域名。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 相關(guān)
session:

  # 設(shè)置接收 SessionId 請求參數(shù)和請求頭名稱
  sessionIdHeaderName: x-token
  
  # 記住我的請求參數(shù)和請求頭的名稱
  rememberMeHeaderName: x-remember
  
# Web 相關(guān)
web:

  # AJAX 接受參數(shù)名和請求頭名
  ajaxHeaderName: x-ajax
  

3、打開手機(jī)端項目的 /common/config.js 修改 config.baseUrl 后端服務(wù)地址為你安裝的 JeeSite 服務(wù)地址。

生態(tài)系統(tǒng)

• 分布式微服務(wù)系統(tǒng)（Spring Cloud）：https://gitee.com/thinkgem/jeesite4-cloud
• JFlow工作流引擎：https://gitee.com/thinkgem/jeesite4-jflow ：http://ccflow.org
• Flowable業(yè)務(wù)流程模塊（BPM）：http://jeesite.com/docs/bpm/
• 內(nèi)容管理模塊（CMS）：https://gitee.com/thinkgem/jeesite4-cms
• 手機(jī)端移動端：https://gitee.com/thinkgem/jeesite4-uniapp

學(xué)習(xí)路線

1. 什么是 uni-app、為什么選擇 uni-app
2. 集成開發(fā)環(huán)境 HBuilderX 下載
3. uni-app 官方視頻教程
4. 如果你熟悉 h5，但不熟悉 Vue 和小程序，請看這篇白話 uni-app
5. Vue.js 視頻 + 文檔教程

學(xué)習(xí)文檔

• uni-app 框架文檔
• uni-app 組件文檔
• uView 組件文檔
• uView JS 文檔

打包發(fā)布

• 打開 /common/config.js 找到 config.baseUrl 修改為正式的手機(jī)端后臺服務(wù)地址
• 閱讀這篇文章：如何發(fā)布 uni-app 軟件
• uni-app 整包升級、冷更新
• uni-app 資源升級、熱更新