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 示例
具体使用请参见 设置资源地址 中第三章、第四章内容。
9. 引入 JS 和 CSS 文件
FineBI 若集成了 FineReport工程，支持在 FineReport 模板中引入外部的 JS 和 CSS 文件。
详情请参见：FineReport 文档 H5设置 第 9 章。
上一篇：App更新升级提示
