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

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

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

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

特性

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

功能列表

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

快速體驗(yàn)

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

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

快速運(yùn)行

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

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

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

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

4、等待 HBuliderX 控制臺(tái)編譯完成后，會(huì)自動(dòng)彈出手機(jī)登錄頁(yè)面。

安裝服務(wù)端

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

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

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

# Shiro 相關(guān)
shiro:

  # 是否允許跨域訪問(wèn) CORS，如果允許，設(shè)置允許的域名。v4.2.3 開(kāi)始支持多個(gè)域名和模糊匹配，例如：http://*.jeesite.com,http://*.jeesite.net
  accessControlAllowOrigin: '*'
  
  # 允許跨域訪問(wèn)時(shí) CORS，可以獲取和返回的方法和請(qǐng)求頭
  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 請(qǐng)求參數(shù)和請(qǐng)求頭名稱
  sessionIdHeaderName: x-token
  
  # 記住我的請(qǐng)求參數(shù)和請(qǐng)求頭的名稱
  rememberMeHeaderName: x-remember
  
# Web 相關(guān)
web:

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

3、打開(kāi)手機(jī)端項(xiàng)目的 /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ī)端移動(dòng)端：https://gitee.com/thinkgem/jeesite4-uniapp

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

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

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

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

打包發(fā)布

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