1. 概述
1.1 版本
FineBI 版本 | HTML5 行動端展現插件 | 功能變動 |
6.0 | V11.0.68 | - |
1.2 功能簡介
設定項 | 應用場景 | 功能簡介 |
底部首頁切換 | 使用者在 HTML5 端存取 FineBI 工程時，希望透過按鈕的方式實現首頁和目錄的切換。 | 使用者可透過「底部首頁切換」按鈕，實現首頁和目錄的切換。 |
H5集成登入 | 使用者在 HTML5 端存取 FineBI 工程/儀表板時，希望實現單點登入。 | 使用者可開啟「H5集成登入」設定，透過填寫自訂的登入認證類和身份識別參數名，即可實現 HTML5 端單點登入。 |
頂部導航欄 | HTML5 端存取FineBI 工程時，不同使用者有不同需求，有些使用者希望使用設備自帶的傳回按鈕，有些使用者希望 FineBI 工程自帶傳回按鈕。 | 使用者可透過「頂部導航欄」，自訂設定 HTML5 端是否顯示傳回導航。 |
使用 JSBridge | 有時 HTML5 端和帆軟 App 端需要通信 | 使用者可開啟「使用 JSBridge」按鈕，使得 HTML5 端和原生 App 通信。 |
設定資源位址 | HTML5 插件資源都放在 FineBI 工程伺服器上，使用者存取 HTML5 端範本請求資源時，速度受報表伺服器寬頻限制。 | 使用者可在平台設定資源位址，那麼存取 HTML5 端範本請求資源時，速度不再受 FineBI 工程伺服器寬頻限制。 |
引入 JS | 使用者有時需要在 HTML5 端實現一些效果，比如改變元素元件和格子的樣式、元件的顯示或隱藏等。 | 使用者可引入外部 JS 檔案和 CSS 檔案，在 HTML5 端實現一些特效或效果。 |
引入 CSS |
2. 插件介紹
2.1 插件安裝
如需在數據決策系統設定相關 HTML5 設定項，必須安裝「HTML5 行動端展現」插件。
插件下載： HTML5行動端展現插件
插件安裝： 插件管理
2.2 介面簡介
插件安裝完成後，管理者登入FineBI系統，點選「管理系統>行動平台>H5設定」，如下圖所示：
3. 底部首頁切換
開啟「底部首頁切換」按鈕，使用者在 HTML5 端存取 FineBI 工程時，可透過按鈕的方式實現首頁和目錄的切換。
3.1 開啟底部首頁切換按鈕
管理者登入FineBI系統，點選「管理系統>行動平台>H5設定」， 開啟「底部首頁切換」按鈕，彈出提示框即設定成功。如下圖所示：
3.2 效果預覽
HTML5 端輸入http://ip:埠號/webroot/decision，存取 FineBI 工程，使用者可透過底部實現首頁與目錄間的切換，效果如下圖所示：
注1：HTML5 端存取 FineBI 工程的步驟可參考 HTML5端存取FineBI 。
注2：如未設定首頁，無法實現首頁與目錄之間的切換。具體步驟請參見 管理首頁 。
4. H5集成登入
開啟「H5集成登入」後，使用者透過 HTML5 端存取 FineBI 工程或單張儀表板，若其中含有身份識別參數名，則自動攔截進行自訂登入驗證。
注：插件更新後，需重啟工程，該功能方生效。
4.1 上傳登入認證類
本文提供透過「帳號」進行後臺單點認證的「自訂登入驗證類」。
點選下載並解壓自訂登入驗證類Demo.class：Demo.zip
將 Demo.class 上傳至 BI 工程%BI_HOME%\webapps\webroot\WEB-INF\classes目錄下。如下圖所示：
4.2 開啟 H5 集成登入
管理者登入FineBI系統，點選「管理系統>行動平台>H5設定」， 開啟「H5整合登入」按鈕，設定「身份識別參數名」和「自訂的登入認證類」。如下圖所示：
具體設定內容和注意事項如下：
設定項 | 簡介 |
身份識別參數名 | 使用者在 HTML5 端存取「BI 工程/儀表板」時，若存取請求中帶有該「身份識別參數名」，則會被攔截進行自訂登入驗證 開啟「H5集成登入」後，「身份識別參數名」不可為空，否則無法儲存 該範例中設定為aaa |
自訂的登入認證類 | 可選項為 BI 工程%FR_HOME%\webapps\webroot\WEB-INF\classes資料夾下所有類 開啟「H5集成登入」後，「自訂的登入認證類」不可為空，否則無法儲存 該範例中設定為Demo.class |
4.3 效果預覽
4.3.1 登入驗證
HTML5 端存取 FineBI 工程/單張儀表板，若存取請求中含有「身份識別參數名」，驗證透過即可免登入存取，驗證不透過則傳回報錯介面。如下圖所示：
驗證邏輯如下表所示：
注：該驗證僅對 HTML5 端存取 FineBI 工程/單張儀表板生效，公共連結、App 端、插件集成、PC 端等不受影響。
場景 | 存取連結 | 結果 | |
不含參數存取 | http://IP:埠號/webroot/decision | 跳出登入頁，正常輸入帳號密碼登入 | |
含參數存取 | 帳號正常 | http://IP:埠號/webroot/decision?aaa=正常的帳號 | 根據認證類驗證使用者，驗證透過，免登入存取 FineBI 工程/單張儀表板 |
帳號禁用 | http://IP:埠號/webroot/decision?aaa=禁用的帳號 | 根據認證類驗證使用者，驗證不透過，跳轉到報錯頁面 | |
帳號不存在 | http://IP:埠號/webroot/decision?aaa=不存在的帳號 | ||
帳號為空 | http://IP:埠號/webroot/decision?aaa= | ||
4.3.2 登入超時
若根據認證類驗證透過，存取 FineBI 工程/單張儀表板後，觸發登入超時，提示「當前會話已超時，請重新登入」，關閉後將停留在頁面，不跳轉至內建登入頁。如下圖所示：
5. 頂部導航欄
由於在不同設備、不同環境下，不確定終端是否有物理傳回鍵，因此新增「頂部導航欄」按鈕，支援使用者在 HTML5 端開啟「頂部傳回導航」，可自訂設定導航背景、導航標題、傳回按鈕、生效終端等。
5.1 開啟頂部導航欄按鈕
管理者登入FineBI系統，點選「管理系統>行動平台>H5設定」， 開啟「頂部導航欄」按鈕，可設定項如下圖所示：
具體設定內容如下表所示：
設定項 | 簡介 |
導航背景 | 使用者可自訂設定頂部傳回導航欄的背景色 默認藍色 |
標題字型大小 | 使用者可設定導航欄標題字體大小 設定範圍為12~20 號，默認 17 號 注：若標題過長，顯示不下，則結尾顯示... |
標題顏色 | 使用者可自訂設定導航欄標題字體顏色 默認白色 |
字體加粗 | 使用者可自行選擇導航欄標題字體是否加粗 默認加粗 |
對齊方式 | 使用者可自行選擇導航欄標題文字對齊方式 可設定居左、居中、居右，默認居中 |
按鈕顏色 | 使用者可自訂設定導航欄傳回按鈕顏色 默認白色 |
終端設定 | 使用者可自行選擇導航欄生效終端 可選擇iOS、Android，默認全選 |
5.2 效果預覽
HTML5 端輸入http://IP:埠號/webroot/decision，存取 FineBI 工程，「頂部傳回導航欄」效果如下圖所示：
注：HTML5 端存取 FineBI 工程的步驟可參考 HTML5端存取FineBI 。
「傳回按鈕」生效範圍如下表所示：
場景 | 傳回按鈕 |
登入頁 | 無上級頁面，不顯示傳回按鈕 |
首頁 | 無上級頁面，不顯示傳回按鈕 |
首頁超連結 | 無上級頁面，不顯示傳回按鈕 |
單張範本 | 無上級頁面，不顯示傳回按鈕 |
一級目錄 | 無上級頁面，不顯示傳回按鈕 |
二級及以上目錄 | 傳回按鈕生效，傳回上級目錄 |
目錄中的儀表板 | 傳回按鈕生效，傳回目錄 |
儀表板中的超級連結 | 傳回按鈕生效，傳回上級儀表板 |
6. H5快速傳回
開啟「行動平台>其他>H5設定>H5快速傳回」後，無論查看幾層鑽取後的範本，一鍵點選「快速傳回」按鈕即可快速傳回目錄。
詳情請參見：HTML5快速傳回目錄 。
7. 使用 JSBridge
H5 透過 JSBridge 與原生 App 通信，使用者若需要和原生 App 通信，可開啟「使用JSBridge」按鈕，彈出提示即設定成功。如下圖所示：
8. 設定資源位址
目前 H5 插件資源都放在 BI 伺服器上，使用者存取 H5 範本請求資源時，速度受 BI 伺服器寬頻限制，可在平台設定資源位址，加快資源請求速度。
8.1 邏輯說明
例如www.nimengwei.com是使用者的外網存取的伺服器位址，aliyun.cdn.nimengwei.com是使用者的 CDN 位址，
把 CDN 位址在平台中儲存，這樣存取www.nimengwei.com/webroot/decision時，所有JS 、圖片、字體等靜態資源都會從aliyun.cdn.nimengwei.com請求，aliyun.cdn.nimengwei.com中若沒有資源，會從www.nimengwei.com請求資源並傳回，第二次存取之後就會直接用aliyun.cdn.nimengwei.com上次儲存的資源。
注：設定 CDN 之後 CDN 廠商會給出 cname 資訊，使用者需要去域名廠商中配 cname 。
具體介紹如下表所示：
執行邏輯 | 生效的H5資源 |
1）瀏覽器中有快取，使用快取 2）瀏覽器中沒有快取，平台沒有配置 CDN 位址，請求 BI 伺服器資源 3）瀏覽器中沒有快取，平台已配置 CDN 位址，CDN 伺服器沒有資源快取，CDN 從 BI 伺服器請求並傳回 4）瀏覽器中沒有快取，平台已配置 CDN 位址，CDN 伺服器存在資源快取，從 CDN 伺服器獲取 | H5資源、圖片、字體等靜態資源 注：不支援圖表資源 |
8.2 範例
具體使用請參見 設定資源位址 中第三章、第四章內容。
上一篇：APP更新升級提示
