反馈已提交

网络繁忙

H5设置

  • 文档创建者:Wendy123456
  • 编辑次数:8次
  • 最近更新:Lily.Wang 于 2020-11-03
  • 1. 概述

    1.1 版本

    FineBI 版本JAR 包HTML5 移动端展现插件功能变动
    5.02020-01-15V10.4.46

    新增「使用 JSBridge」设置

    新增「引入 JS」设置

    新增「引入 CSS」设置

    -V10.4.66新增「底部首页切换」按钮
    -V10.4.76新增「设置资源地址」设置
    -V10.4.90

    新增「H5集成登录」设置

    新增「顶部导航栏」设置

    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 界面简介

    插件安装完成后,以管理员身份登录 BI 数据决策系统,点击「管理系统>移动平台>其它」,新增「H5 设置」,如下图所示:

    image.png

    3. 底部首页切换

    「HTML5 移动端展现插件」版本为 V10.4.66 时,支持「底部首页切换」功能。

    开启「底部首页切换」按钮,用户在 HTML5 端访问 FineBI 工程时,可通过按钮的方式实现首页和目录的切换。

    3.1 开启底部首页切换按钮

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「底部首页切换」按钮,点击「保存」。如下图所示:

    image.png

    3.2 效果预览

    HTML5 端输入http://ip:端口号/webroot/decision,访问 FineBI 工程,用户可通过底部实现首页与目录间的切换,效果如下图所示:

    注1:HTML5 端访问 FineBI 工程的步骤可参考 HTML5 端访问仪表板/工程

    注2:如未设置首页,无法实现首页与目录之间的切换。具体步骤请参见 管理首页

    2020-09-14_16-05-25.png

    4. H5集成登录

    「HTML5 移动端展现插件」版本为 V10.4.90 时,支持「H5集成登录」功能。

    当开启「H5集成登录」后,用户通过 HTML5 端访问 FineBI 工程或单张仪表板,若其中含有身份识别参数名,则自动拦截进行自定义登录验证。

    注:插件更新后,需重启工程,该功能方生效。

    4.1 上传登录认证类

    本文提供通过「用户名」进行后台单点认证的「自定义登录验证类」。

    点击下载并解压自定义登录验证类Demo.class:Demo.rar

    将Demo.class上传至 BI 工程%BI_HOME%\webapps\webroot\WEB-INF\classes目录下,如下图所示:

    image.png


    4.2 开启 H5 集成登录

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「H5集成登录」按钮,设置「身份识别参数名」和「自定义的登录认证类」。如下图所示:


    具体设置内容和注意事项如下:

    设置项简介
    身份识别参数名

    用户在 HTML5 端访问「BI 工程/仪表板」时,若访问请求中带有该「身份识别参数名」,则会被拦截进行自定义登录验证

    开启「H5集成登录」后,「身份识别参数名」不可为空,否则无法保存

    该示例中设置为aaa

    自定义的登录认证类

    可选项为 BI 工程%FR_HOME%\webapps\webroot\WEB-INF\classes文件夹下所有类

    开启「H5集成登录」后,「自定义的登录认证类」不可为空,否则无法保存

    该示例中设置为Demo.class

    4.3 效果预览

    4.3.1 登录验证

    HTML5 端访问 FineBI 工程/单张仪表板,若访问请求中含有「身份识别参数名」,验证通过即可免登录访问,验证不通过则返回报错界面,如下图所示:

    image.png

    验证逻辑如下表所示:

    注:该验证仅对 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 工程/单张仪表板后,触发登录超时,提示「当前会话已超时,请重新登录」,关闭后将停留在页面,不跳转至内置登录页。如下图所示:

    image.png

    5. 顶部导航栏

    「HTML5 移动端展现插件」版本为 V10.4.90 时,支持「顶部导航栏」功能。

    由于在不同设备、不同环境下,不确定终端是否有物理返回键,因此新增「顶部导航栏」按钮,支持用户在 HTML5 端开启「顶部返回导航」,可自定义设置导航背景、导航标题、返回按钮、生效终端等。

    5.1 开启顶部导航栏按钮

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「顶部导航栏」按钮,可设置项如下图所示:

    image.png

    具体设置内容如下表所示:

    设置项
    简介
    导航背景

    用户可自定义设置顶部返回导航栏的背景色

    默认蓝色 

    标题字号

    用户可设置导航栏标题字体大小

    设置范围为12~20号,默认17号

    注:若标题过长,显示不下,则结尾显示...

    标题颜色

    用户可自定义设置导航栏标题字体颜色

    默认白色

    字体加粗

    用户可自行选择导航栏标题字体是否加粗

    默认加粗

    对齐方式

    用户可自行选择导航栏标题文字对齐方式

    可设置居左、居中、居右,默认居中

    按钮颜色

    用户可自定义设置导航栏返回按钮颜色

    默认白色

    终端设置

    用户可自行选择导航栏生效终端

    可选择iOS、Android,默认全选

    5.2 效果预览

    HTML5 端输入http://IP:端口号/webroot/decision,访问 FineBI 工程,「顶部返回导航栏」效果如下图所示:

    注:HTML5 端访问 FineBI 工程的步骤可参考 HTML5 端访问仪表板/工程

    2020-09-14_17-08-40.png

    「返回按钮」生效范围如下表所示:

    场景
    返回按钮
    登录页无上级页面,不显示返回按钮
    首页无上级页面,不显示返回按钮
    首页超链无上级页面,不显示返回按钮
    单张模板无上级页面,不显示返回按钮
    一级目录无上级页面,不显示返回按钮
    二级及以上目录返回按钮生效,返回上级目录
    目录中的仪表板返回按钮生效,返回目录
    仪表板中的超级链接
    返回按钮生效,返回上级仪表板

    6. 使用 JSBridge

    「HTML5 移动端展现插件」版本为 V10.4.49 时,支持「使用 JSBridge」功能。

    H5 通过 JSBridge 与原生 App 通信,用户若需要和原生 App 通信,可打开使用JSBridge按钮,点击保存。如下图所示:

    image.png

    7. 设置资源地址

    目前 H5 插件资源都放在 BI 服务器上,用户访问 H5 模板请求资源时,速度受 BI 服务器宽带限制,可在平台设置资源地址,加快资源请求速度。

    7.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)浏览器中没有缓存,平台没有配置 CDN 地址,请求 BI 服务器资源

    2)浏览器中没有缓存,平台已配置 CDN 地址,CDN 服务器没有资源缓存,CDN 从 BI 服务器请求并返回

    3)浏览器中没有缓存,平台已配置 CDN 地址,CDN 服务器存在资源缓存,从 CDN 服务器获取

    H5资源、图片、字体等静态资源

    注:不支持图表资源

    7.2 示例

    具体使用请参见 设置资源地址 中第三章、第四章内容。

    8. 引入 JS 和 CSS 文件

    「HTML5 移动端展现插件」版本为 V10.4.49 时,支持「引入JS」和「引入CSS」功能。

    FineBI 若集成了 FineReport工程,支持在 FineReport 模板中引入外部的 JS 和 CSS 文件。

    详情请参见:H5 设置 第 8 章

    附件列表


    主题: 管理员指南
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭