移动端模板预览

编辑
  • 文档创建者:小帆_智能客服
  • 浏览次数:30856次
  • 编辑次数:22次
  • 最近更新:Wendy123456 于 2019-11-26
  • 1. 概述

    1.1 版本

    报表服务器版本JAR 包App 版本HTML5 移动端展现插件版本
      10.0 2018-11-06   10.0 V10.0.45

    1.2 应用场景

    用户想要预览所制作的模板在移动端的实际呈现效果时,可通过移动端预览实现。

    1.3 功能简介

    在 FineReport 设计器中打开模板,点击移动端预览,使用手机扫码预览报表,让用户直观地看到当前所设计模板的实际效果,提升移动端模板制作易用性的同时也有助于模板分享。

    2. 移动端报表制作

    应用类型

     模板类型

    步骤1步骤2

    PC 模板移动端共享

    cpt

    直接在移动端预览效果;

    App/微信/手机浏览器可直接扫码预览

    自适应调整(模板>移动端属性),横向/纵向/双向/不自适应,设置表头冻结等

    frm

    直接在移动端预览效果;
    App/微信/手机浏览器可直接扫描预览
    手机重布局自动优化,自适应调整(组件右侧>移动端

    手机单独

    模板

    cpt/frm

    设置手机端模板(模板>移动端属性流式布局设计,设计器效果更接近于实际效果

    注:复杂模板请勿开启「手机端模板」设置。

    3. 示例

    3.1 模板准备

    在 FineReport 设计器中,打开模板: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\phone\basic\产品明细-phone.cpt

    点击移动端预览,如下图所示:

    1574693211548195.png

    3.2 PC 端浏览器效果

    点击移动端预览后,PC 端浏览器显示页面如下图所示:

    1574693627772040.png

    1)报表名称。

    2)报表预览类型:分为普通预览填报预览

    普通预览的后缀为「 &op=h5」 ,填报预览的后缀为「&op=write 」

    注:决策报表不支持填报预览。

    3)报表访问链接二维码:可直接被 App 和第三方浏览器等识别访问。

    4)可复制链接:

    如当前 URL 中的 IP 地址为 localhost,自动识别为当前设备网络环境的 IP 地址,并提示:

    确保移动设备与当前 PC 处于同一网络环境

    推荐方法:打开手机上的热点,用电脑连接手机热点,这样手机和电脑就在同一网段;另外防止 IP 未切换到无线网络的 IP,请拔掉有线网。

    3.3 App 预览

    3.3.1 新建服务器扫描二维码

    1)打开 APP,点击服务器>新建服务器,直接扫描 PC 模板中的二维码,识别当前模板链接地址,判定链接中的地址是否存在于服务器列表中,如下图所示:

    1574694680426127.jpg

    2)如服务器列表中无当前模板链接的服务器地址,新建服务器信息,服务器名称为:测试服务器{随机 UUID},并且跳转至登录界面。如下图所示:

    1574694999941831.jpg

    注1:若服务器列表中有当前模板链接的服务器地址,跳转至已有服务器登录界面;

    注2::若存在多个不同名称的相同服务器则选择第一个。

    3)登录成功后,跳转至报表界面(若有主页,在主页基础上弹出报表界面)。

    注:若开启了 模板权限,则判断登录用户是否有权限访问,若没有则弹出「没有权限」的提示。

    如下图所示:

    1574695365125844.jpg


    3.3.2 设置界面扫描二维码

    1)在 App 设置界面新增扫一扫功能,如下图所示:

    1574695572661123.jpg

    2)进入到 APP 后,进入到设置界面点击扫一扫,即可调用摄像头识别二维码,并跳转至对应的报表界面,如下图所示:

    注:若开启了 模板权限,则判断当前登录的服务器是否为二维码报表链接的服务器,若不是则弹出「目标服务器开启权限认证,请登录目标服务器后再尝试」的提示,若是则判断用户是否有权限访问,没有则弹出「没有权限」的提示。

    1574697364528681.gif


    3.4 H5 预览

    需要下载「HTML5移动端展现插件」 。

    10.0 中,H5 主页链接为:http://ip:端口号/webroot/decision/url/mobile

    例如:http://192.168.1.107:8075/webroot/decision/url/mobile 

    3.4.1 插件安装

    点击下载插件: HTML5移动端展现插件 

    设计器插件安装方法参照 设计器插件管理 

    服务器安装插件方法参照 服务器插件管理

    3.4.2 微信扫描二维码

    微信中,直接扫描二维码,即可查看模板,如下图所示:

    1574698802118928.gif

    3.4.3 浏览器扫描二维码

    手机浏览器中,比如 QQ 浏览器、UC 浏览器、猎豹浏览器、百度浏览器等在地址栏都有明显的二维码扫描功能,直接点击扫描即可查看模板。百度浏览器预览模板如下图所示:

    1574699827841406.gif

    注: Safari 浏览器没有二维码扫描功能,可以使用 iPhone 相机扫描二维码,这时顶部的通知栏会弹出提示,点一下就可以用 Safari 打开。

    3.5 微信/钉钉集成

    挂载 FS 目录时,直接 H5 解析;

    挂载单张模板时,需要添加 &op=h5,即可 H5 解析;

    详细点击 微信集成钉钉集成

    4. 注意事项

    4.1 注意事项一

    场景描述:

    Windows 系统如果按照文档流程操作且应用配置符合要求,但是仍然无法扫码与服务器建立连接进行预览,具体表现为弹出警告信息服务器连接失败,截图如下所示:

    1560995019184207.jpg

    解决方案:

    经测试无法预览的问题由 Windows 防火墙引起,用户只需关闭 Windows 防火墙,再进行移动端预览操作即可。

    4.2 注意事项二

    场景描述:

    数据决策系统平台挂载「填报模板」时,如果展示终端只勾选平板和手机,不勾选 PC,用户在 HTML5 填报预览时会报错:该页面不对当前终端显示,如需访问请联系管理员

    截图如下所示:

    1574699544383596.jpg

    解决方案:

    移动端 H5 填报预览目前不支持 H5 解析,填报模板是 PC 解析的,鉴权走的 PC 端逻辑,所以终端展示必须勾选PC,如下图所示:

    1574699754935796.png

    附件列表


    主题: 移动端入门
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]