CN111324390A - 实现app内容可配置和实时更新的装置及方法 - Google Patents

Abstract

本发明公开了一种实现APP内容可配置和实时更新的装置及方法。该方案包括：页面可配置：基于实际的业务需求，快速定制APP展示的页面，包含的功能模块，页面布局的搭配，动态配置并生成对应的APP页面。实时查看：用户在编辑页面时即在设计器端可实时看到页面呈现的效果，同时APP端无需重新编译打包部署即可查看到修改后的内容。功能解耦：组件化开发模式，每个功能模块都是一个独立的组件，如果需要加模块不会影响之前的功能。

Description

实现APP内容可配置和实时更新的装置及方法

技术领域

本发明属于APP技术开发领域，具体来说，是一种APP加载过程中的动态配置和实时渲染装置及方法。

背景技术

目前，APP都是专业化定制开发，根据需求方需要的界面和功能通过代码定制实现，这些界面和布局通常是不可变的。

如果变更，则需要重新修改代码，并且经历打包发布等一系列的过程，用户需要重新下载APP来查看效果。如果是IOS和Android两种APP，还需要经历两次修改，打包，发布的过程。

特别是报表查看分析的APP，包含大量各种各样场景的报表，每个报表里面又配有大量的图表，有面积图，环形图，表格，标签图等等，每个图表又包含自身的许多配置，例如显示图例，显示说明等自定义的配置，另外还能配置查询面板，文本组件，Tab组件等组件以满足业务的需要，这些报表往往是经常需要变化的，根据使用者的需要来配置不同的报表。如果采用原生APP的常用模式，往往不够灵活，修改布局和类型也会非常麻烦。

发明内容

本发明的目的在于提供一种实现APP内容可配置和实时更新的装置及方法。

实现本发明目的的技术解决方案为：一种实现APP内容可配置和实时更新的装置，包括：

设计器，用于配置APP端的页面，该页面包含展示的功能模块和页面布局；

接口对接模块，用于与服务器后端约定查询数据的接口、保存读取APP配置的接口、登陆接口和获取用户信息的接口；

角色校验模块，用于APP登录后进行角色校验；

APP端配置信息处理模块，用于在获取APP页面配置信息后进行整理并输出；

APP端数据渲染模块，用于将数据渲染在各自的页面布局中进行展示；

页面编辑模块，用于在设计器端进行布局的调整和功能的编辑。

进一步地，所述配置APP端的页面采用前端框架开发，生成可配置的可视化界面，该界面包括配置区、预览区和编辑区。

进一步地，所述配置区用于组合APP页面的功能模块。

进一步地，所述预览区模拟APP进行页面展示，展示时独立请求配置和数据接口。

进一步地，所述编辑区用于编辑功能模块，修改模块中的属性和功能；同时编辑区与预览区进行通信，接收到配置区的消息后重新查询数据，实现实时更新。

进一步地，所述角色校验模块根据角色进行权限校验，在角色管理后台中或代码中设置每个角色不同的权限。

进一步地，所述APP端配置信息处理模块获取APP页面配置信息后进行整理，将结果信息转换为数据请求接口需要的传参格式，并请求图表数据接口，获得数据。

一种实现APP内容可配置和实时更新的方法，包括以下步骤：

1）开发Web页面的设计器，设计器根据需求提前开发好需要的组件和管理、编辑页面，用来设计页面的布局和功能；

2）登录设计器端进行权限校验，根据设计器端已有的功能和模块配置页面；

3）登录APP进行角色校验；若角色有权限，执行步骤4）；若角色没有权限，则提示无权限，不进行数据查询，页面展示空白；

4）APP调用配置接口，获取步骤2）中的配置信息后进行解析，配置信息包括页面布局的信息、页面上每个功能模块的配置信息，并根据配置中包含的模块和模块所配置的功能的内容设置页面布局；

5）调用查询数据的接口查询各个模块的数据；在查询过程中先渲染出每个模块的布局，在数据返回之前先展示空布局进行页面占位，每个模块独立调用各自接口查询数据；

6）APP端进行数据渲染，将接口返回的数据在渲染页面上进行展示；

7）在设计器端进行布局的调整和功能的编辑，编辑完后进行保存。

进一步地，步骤（2）所述的配置为：页面由多个功能模块组合而成，每个模块包含多个功能选项，对每一个模块的功能选项进行勾选和配置，配置完成后通过点击更新按钮调用查询接口查询数据，实时预览页面效果，点击保存按钮保存配置。

进一步地，所述步骤（6）中：如果查询到数据，则将数据渲染到对应的模块中；如果没查到，则展示默认选项或空的布局展示；如果查询数据出错，则给出错误提示。

本发明与现有技术相比，其显著优点：（1）易用性。即使不是专业的开发人员也能够进行APP的配置修改，降低维护APP内容带来的高额成本，使得每次修改简单高效。（2）可配置。APP页面的布局和内容都可以进行配置和修改，提升了操作和维护的便利性。（3）适配性。设计器端的配置修改一次即可对IOS和Android端同时生效，无需进行多端适配。（4）普适性。适用于大多数类型的APP，均可采用这种方式进行开发和修改。（5）实时性。只需在配置端修改APP页面的布局和内容，APP无需重新下载，重新打开或刷新即可看到变更的内容。

附图说明

图1是本发明实现APP内容可配置和实时更新的方法的流程图。

图2是本发明的多端运作图。

图3是本发明APP端的效果图。

图4是本发明设计器端的功能配置图。

具体实施方式

下面结合说明书附图和实施例对本发明作进一步描述。

本发明的核心点在于为APP页面的配置和维护提供了快速修改的功能，实现所见即所得，一端配置，多端适用，为更多APP页面的展示提供了高度定制化的能力。

页面可配置：基于实际的业务需求，快速定制APP展示的页面，包含的功能模块，页面布局的搭配，动态配置并生成对应的APP页面。

实时查看：用户在编辑页面时即在设计器端可实时看到页面呈现的效果，同时APP端无需重新编译打包部署即可查看到修改后的内容。

功能解耦：组件化开发模式，每个功能模块都是一个独立的组件，如果需要加模块不会影响之前的功能。

本发明实现APP内容可配置和实时更新的装置，包括：

设计器，用于配置APP端的页面，该页面包含展示的功能模块和页面布局；

接口对接模块，用于与服务器后端约定查询数据的接口、保存读取APP配置的接口、登陆接口或/和获取用户信息的接口；

角色校验模块，用于APP登录后进行角色校验；

APP端配置信息处理模块，用于在获取APP页面配置信息后进行整理并输出；

APP端数据渲染模块，用于将数据渲染在各自的页面布局中进行展示；

页面编辑模块，用于在设计器端进行布局的调整和功能的编辑。

进一步的，所述配置APP端的页面采用前端框架开发，生成可配置的可视化界面，该界面包括配置区、预览区和编辑区。

进一步的，所述配置区用于组合APP页面的功能模块。在配置区会提供若干种页面常用的功能模块，例如查询面板、Tab滑动切换模块、图表模块（包括表格，面积图，标签卡等），文本组件，按钮等，用户可以讲这些模块随意配置组合成一个页面。

进一步的，所述预览区模拟APP进行页面展示，展示时独立请求配置和数据接口。

进一步的，所述编辑区用于编辑功能模块，修改模块中的属性和功能；同时编辑区与预览区进行通信，接收到配置区的消息后重新查询数据，实现实时更新。

进一步的，所述角色校验模块根据角色进行权限校验，在角色管理后台中或代码中设置每个角色不同的权限。

进一步的，所述APP端配置信息处理模块获取APP页面配置信息后进行整理，将结果信息转换为数据请求接口需要的传参格式，并请求图表数据接口，获得数据。

结合图1和2，本发明所述配置APP的方案工作流程如下：

1.设计器准备：配置之前需要先准备一个设计器端，也就是配置APP端的页面，该页面包含APP端页面可以展示的功能和模块，支持实时查看配置效果，用户即使不懂代码也能进行配置。设计器端的具体页面布局和功能可以根据具体的需求和实际情况来定制化开发，是普通的Web页面，可以用传统的HTML搭配Jquery来完成开发，也可以借助前端框架进行开发，本发明采用的是Vue框架，加上前端路由Vue-Router用来控制多个页面之间的跳转，UI框架采用的是Ant-Design，最终根据需求开发成一个完整的页面。

2.接口对接：需要和后端约定好查询数据的接口、保存读取APP配置的接口、登陆接口或/和获取用户信息的接口；。

3.角色校验：可约定好角色，设计器端需要进行角色校验，只有符合权限要求的角色才能进行配置，同时APP上的角色可以设定是否能查看对应的配置内容。

4.APP端数据呈现过程：

a)首先需要用户登录，登录时进行角色校验和权限校验。

b)登录成功后根据登录角色去查询数据配置接口，如果权限校验通过就把配置返回给APP，否则提示无权限。

c)APP调用配置接口拿到配置信息后进行解析，并根据配置中包含的模块和模块所配置的功能的内容设置页面布局；进行页面布局设计。

d)配置解析完成后整理参数去调用查询数据的接口，如果查到数据就根据类型渲染成不同的模块进行展示。

e)如果没查到数据就展示默认选项或空的布局展示，如果查询数据出错就给出错误提示。

5.APP端进行数据渲染，将数据渲染在各自的页面布局中进行展示，可能是表格数据，可能是各种图形，也可能是TAB页签，也可能是各种按钮等等。

6.页面编辑：在设计器端进行布局的调整和功能的编辑，编辑完之后保存即可在APP端和设计器端实时查看效果。

在其中一个实例中，

设计器端：所谓的设计器是指可以配置APP内容的web页面，这个页面可以采用一种前端框架来开发，例如Vue框架搭配AntDesign版本的UI框架，生成可配置的可视化界面方便用户使用，同时还有预览的功能，配置的同时保存完成后即可在预览区看到预览效果，预览区可以画出一个手机区域模拟APP进行页面展示，两者是相互独立的，采用iframe框架嵌套在整个web页面里，展示的时候是独立请求配置和数据接口，有的配置在改变时能及时在预览区看到效果，编辑区和预览区是采用postMessage进行通信，接收到配置区的消息后及时去重新查询数据，达到实时更新的效果，预览区的图表可以采用Echarts图表库方便使用。见图3和4。

APP端：APP端采用的是混合式APP开发，即原生开发加上ReactNative同时使用，部分页面是由原生实现，而可配置的这部分页面采用ReactNative开发和实现，而ReactNative的模式可以打包成IOS和Android应用，嵌套在APP里，代替原生的某些模块和功能，方便频繁的维护和编辑。

本发明可实现动态配置APP的内容，用户可在设计器端根据提供好的组件和功能进行配置，布局和内容都可以修改，修改完保存后重新打开APP就能实时查看新的页面和内容。这样做降低了修改页面的成本，提高了页面维护的效率。采用多场景可配置的模式，普遍适用于大多数的APP，通过可配置定制化页面，大大降低了APP的页面维护成本，提高了修改APP页面布局的效率。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种实现APP内容可配置和实时更新的装置，其特征在于包括：

设计器，用于配置APP端的页面，该页面包含展示的功能模块和页面布局；

接口对接模块，用于与服务器后端约定查询数据的接口、保存读取APP配置的接口、登陆接口和获取用户信息的接口；

角色校验模块，用于APP端登录后进行角色校验；

APP端配置信息处理模块，用于在获取APP页面配置信息后进行整理并输出；

APP端数据渲染模块，用于将数据渲染在各自的页面布局中进行展示；

页面编辑模块，用于在设计器端进行布局的调整和功能的编辑。

2.如权利要求1所述的装置，其特征在于：所述设计器配置APP端的页面采用前端框架开发，生成可配置的可视化界面，该界面包括配置区、预览区和编辑区。

3.如权利要求2所述的装置，其特征在于：所述配置区用于组合APP页面的功能模块。

4.如权利要求2所述的装置，其特征在于：所述预览区模拟APP进行页面展示。

5.如权利要求2所述的装置，其特征在于：所述编辑区用于编辑功能模块，修改功能模块中的属性和功能；同时编辑区与预览区进行通信，预览区接收到配置区的消息后重新查询数据，实现实时更新。

6.如权利要求1所述的装置，其特征在于：所述角色校验模块根据角色进行权限校验，在角色管理后台中或代码中设置每个角色不同的权限。

7.如权利要求1所述的装置，其特征在于：所述APP端配置信息处理模块获取APP页面配置信息后进行整理，将整理后的信息转换为数据请求接口需要的传参格式，并请求图表数据接口，获得数据。

8.一种实现APP内容可配置和实时更新的方法，其特征在于，包括以下步骤：

1）开发Web页面的设计器；

2）登录设计器端进行权限校验，根据设计器端已有的功能和模块配置页面；

3）登录APP进行角色校验；若角色有权限，执行步骤4）；若角色没有权限，则提示无权限，不进行数据查询，页面展示空白；

4）APP调用配置接口，获取步骤2）中的配置信息后进行解析，配置信息包括页面布局的信息、页面上每个功能模块的配置信息，并根据配置中包含的模块和模块所配置的功能的内容设置页面布局；

5）调用查询数据的接口查询各个模块的数据；在查询过程中先渲染出每个模块的布局，在数据返回之前先展示空布局进行页面占位，每个模块独立调用各自接口查询数据；

6）APP端进行数据渲染，将接口返回的数据在渲染页面上进行展示；

7）在设计器端进行布局的调整和功能的编辑，编辑完后进行保存。

9.如权利要求8所述的方法，其特征在于，步骤（2）所述的配置为：页面由多个功能模块组合而成，每个模块包含多个功能选项，对每一个模块的功能选项进行勾选和配置，配置完成后通过点击更新按钮调用查询接口查询数据，实时预览页面效果，点击保存按钮保存配置。

10.如权利要求8所述的方法，其特征在于，所述步骤（6）中：如果查询到数据，则将数据渲染到对应的模块中；如果没查到，则展示默认选项或空的布局展示；如果查询数据出错，则给出错误提示。

Images