移动端预览

编辑
  • 文档创建者:小帆_智能客服
  • 浏览次数:11935次
  • 编辑次数:12次
  • 最近更新:susie 于 2019-05-21
  • 1. 版本

      报表服务器版本jar版本   APP版本新移动端HTML5方式预览报表 
      10.0 2018.11.06及以后  10.0 10.0.45及以后

    2. 描述

    用户在制作模板时,想要预览模板在移动端的实际呈现效果该如何实现呢?

    设计器-移动端预览,可以通过扫码直接在手机上展现报表,让用户直观地看到当前设计模板的实际效果,提升了移动端模板制作的易用性有助于模板分享,如下图所示:

    1)普通报表


    2)决策报表


    3. 移动端报表制作

      应用类型  模板类型  步骤1  步骤2
      PC模板与移动端共享  cpt  直接在移动端预览效果;
      APP/微信/手机浏览器可直接扫描预览
      自适应调整(模板>移动端属性),横向/纵向/双向/不自适应,设置表头冻结,等
        frm  直接在移动端预览效果;
      APP/微信/手机浏览器可直接扫描预览
      手机重布局自动优化,自适应调整(组件右侧>移动端)
      手机单独模板  cpt/frm  设置手机端模板(模板>移动端属性)  流式布局设计,设计器效果更接近于实际效果

    注:复杂模板请勿开启“手机端模板”设置

    4. 示例

    4.1 模板设置

    这里直接打开一张已经制作好的移动端报表,如:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\phone\basic\产品明细-phone.cpt,选择“移动端预览”方式,如下所示:


    4.2 pc端浏览器效果

    pc端浏览器显示页面如下:

    1)报表名称

    2)报表预览方式:普通预览或填报预览,普通预览的后缀为:“&op=h5”,填报预览的后缀为:“&op=write

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

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

    4)如当前url中的IP地址为localhost,自动识别为当前设备网络环境的IP地址,并提示:确保移动设备与当前PC处于同一网络环境(推荐方法:打开手机上的热点,再用电脑连接手机热点,这样手机和电脑就在同一网段了)

    5. 报表在app的预览方式

    5.1 app新建服务器扫描二维码

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


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


    3)如服务器列表中有当前模板链接的服务器地址,跳转至已有服务器登录界面

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


    4)以管理员身份登录成功后,跳转至报表界面(若有主页,在主页基础上弹出报表界面

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


    5)具体实现流程,如下图所示:

    5.2 app设置界面扫描二维码

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


    2)以管理员身份登录,进入到设置界面点击“扫一扫”,即可调用摄像头识别二维码,并跳转至对应的报表界面,如下图:

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


    4)具体实现流程,如下图所示:

    6. 报表通过H5解析的预览方式

    需要先安装新移动端Html5方式预览报表 :

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

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


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


    6.1 微信扫描二维码

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



    6.2 手机浏览器中扫描二维码

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

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



    6.3 微信/钉钉集成

    挂载fs目录时,直接h5解析;

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

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



    附件列表


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

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

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