一种H5组件的多条目配置的显示方法及存储介质与流程

本方案涉及h5应用领域，尤其涉及一种h5的多条目配置的显示方法。

背景技术：

1、随着web应用的不断发展，h5技术渐渐崭露头角。随着h5技术的兴起，为了快速开发界面，需要h5可视化页面自定义拖拽布局功能。

2、现有实现h5可视化页面自定义拖拽布局的技术有很多种，目前市面上广泛运用在可视化页面自定义拖拽布局的实现方式主要是基于h5的拖放属性，通过该属性规定元素是否可拖放，进而拖放元素来实现的。

3、上述h5的显示过程主要是通过硬编码直接按照ui界面原型开发。也有一种方式是通过h5组件参数配置来实现在页面上的布局，并通过自适应布局的方式来实现组件在界面上的位置和大小的排布。现有技术无法实现对h5组件配置字段的直观化展示，降低了编辑组件的效率。

技术实现思路

1、为此，需要提供一种h5的多层级窗口快速响应的方法，能够节省计算量，提升拖拽元素的资源利用率。

2、为实现上述目的，发明人提供了一种h5组件的多条目配置的显示方法，包括如下步骤：

3、步骤101，获取系统预设的组件表征条目，所述组件表征条目包括多个条目字段，所述条目字段包括字段属性、组件表征内容及属性类型与组件表征内容的映射关系；

4、步骤102，解析总线对所述组件表征条目进行解析，识别每个组件的标识属性，按照预设解析规则解析得到所述组件表征条目包括的所有组件列表表单，所述组件列表表单包括所有组件的标识属性及各组件对应的条目字段；

5、步骤103，配置总线遍历所述组件列表表单获取对应的条目字段，解析所述条目字段形成各个组件对应的组件配置表单，为每个配置表单赋上id，所述表单id与各个组件一一对应；

6、步骤104，将解析生成的所述组件配置表单与对应组件条目字段中的字段属性一同进行显示。

7、在本申请的一些实施例中，包括如下步骤：接收对所述组件配置表单的字段属性的编辑更改请求，根据请求，更改对应组件的字段属性或更新对应组件的显示。

8、在本申请的一些实施例中，还包括步骤，配置总线将编辑更改后的所述字段属性更新所述条目配置表单。

9、在本申请的一些实施例中，还包括步骤：

10、步骤201，配置总线生成的组件配置表单接收用户编辑的操作请求；

11、步骤202，根据编辑的操作请求将条目配置保存到数据描述对象中；

12、步骤203，组件通过条目解析引擎调用数据描述对象的记录，将条目配置分解成多个独立的配置属性，所述独立的配置属性包括组件的x坐标、组件的y坐标、组件的缩放比例和/或组件的叠放层级；

13、步骤204，判断用户是否对组件进行拉伸拖拽操作，若否，组件直接采用用户选择的条目配置进行呈现，是则进行步骤205；

14、步骤205，将拖拽伸缩操作后生成的数据，解析生成新的配置属性并更新到所述条目配置表单中。

15、在本申请的一些实施例中，当用户点选第一组件时，在界面上展示第一组件对应的配置表单。

16、一种h5组件的多条目配置的显示存储介质，存储有计算机程序，所述计算机程序在被运行时执行包括如下步骤：

17、步骤101，获取系统预设的组件表征条目，所述组件表征条目包括多个条目字段，所述条目字段包括字段属性、组件表征内容及属性类型与组件表征内容的映射关系；

18、步骤102，解析总线对所述组件表征条目进行解析，识别每个组件的标识属性，按照预设解析规则解析得到所述组件表征条目包括的所有组件列表表单，所述组件列表表单包括所有组件的标识属性及各组件对应的条目字段；

19、步骤103，配置总线遍历所述组件列表表单获取对应的条目字段，解析所述条目字段形成各个组件对应的组件配置表单，为每个配置表单赋上id，所述表单id与各个组件一一对应；

20、步骤104，将解析生成的所述组件配置表单与对应组件条目字段中的字段属性一同进行显示。

21、在本申请的一些实施例中，所述计算机程序在被运行时还执行如下步骤：接收对所述组件配置表单的字段属性的编辑更改请求，根据请求，更改对应组件的字段属性或更新对应组件的显示。

22、在本申请的一些实施例中，所述计算机程序在被运行时还执行如下步骤：配置总线将编辑更改后的所述字段属性更新所述条目配置表单。

23、在本申请的一些实施例中，所述计算机程序在被运行时还执行如下步骤：

24、步骤201，配置总线生成的组件配置表单接收用户编辑的操作请求；

25、步骤202，根据编辑的操作请求将条目配置保存到数据描述对象中；

26、步骤203，组件通过条目解析引擎调用数据描述对象的记录，将条目配置分解成多个独立的配置属性，所述独立的配置属性包括组件的x坐标、组件的y坐标、组件的缩放比例和/或组件的叠放层级；

27、步骤204，判断用户是否对组件进行拉伸拖拽操作，若否，组件直接采用用户选择的条目配置进行呈现，是则进行步骤205；

28、步骤205，将拖拽伸缩操作后生成的数据，解析生成新的配置属性并更新到所述条目配置表单中。

29、在本申请的一些实施例中，所述计算机程序在被运行时还执行如下步骤：当用户点选第一组件时，在界面上展示第一组件对应的配置表单。

30、区别于现有技术，上述技术方案通过在h5设计页面中，能够将各组件表征条目根据映射规则按照各个组件的进行对应配置并生成各个组件对应的配置表单，从而便于多个组件进行编辑操作的时候针对每个组件都能够进行条目展示。

技术特征：

1.一种h5组件的多条目配置的显示方法，其特征在于，包括如下步骤：

2.根据权利要求1所述的h5组件的多条目配置的显示方法，其特征在于，包括如下步骤：接收对所述组件配置表单的字段属性的编辑更改请求，根据请求，更改对应组件的字段属性或更新对应组件的显示。

3.根据权利要求2所述的h5组件的多条目配置的显示方法，其特征在于，还包括步骤，配置总线将编辑更改后的所述字段属性更新所述条目配置表单。

4.根据权利要求1所述的h5组件的多条目配置的显示方法，其特征在于，还包括步骤：

5.根据权利要求1所述的h5组件的多条目配置的显示方法，其特征在于，当用户点选其中一组件时，在界面上展示被点选组件对应的配置表单。

6.一种h5组件的多条目配置的显示存储介质，其特征在于，存储有计算机程序，所述计算机程序在被运行时执行包括如下步骤：

7.根据权利要求6所述的h5组件的多条目配置的显示存储介质，其特征在于，所述计算机程序在被运行时还执行如下步骤：接收对所述组件配置表单的字段属性的编辑更改请求，根据请求，更改对应组件的字段属性或更新对应组件的显示。

8.根据权利要求7所述的h5组件的多条目配置的显示存储介质，其特征在于，所述计算机程序在被运行时还执行如下步骤：配置总线将编辑更改后的所述字段属性更新所述条目配置表单。

9.根据权利要求6所述的h5组件的多条目配置的显示存储介质，其特征在于，所述计算机程序在被运行时还执行如下步骤：

10.根据权利要求6所述的h5组件的多条目配置的显示方法，其特征在于，所述计算机程序在被运行时还执行如下步骤：当用户点选第一组件时，在界面上展示第一组件对应的配置表单。

技术总结
一种H5组件的多条目配置的显示方法及存储介质，其中方法包括如下步骤：步骤101，获取系统预设的组件表征条目，所述组件表征条目包括多个条目字段，所述条目字段包括字段属性、组件表征内容及属性类型与组件表征内容的映射关系；步骤102，解析总线对所述组件表征条目进行解析，识别每个组件的标识属性，按照预设解析规则解析得到所述组件表征条目包括的所有组件列表表单，所述组件列表表单包括所有组件的标识属性及各组件对应的条目字段；上述技术方案通过在H5设计页面中，能够将各组件表征条目根据映射规则按照各个组件的进行对应配置并生成各个组件对应的配置表单，从而便于多个组件进行编辑操作的时候针对每个组件都能够进行条目展示。

技术研发人员：邓振琰,张鹏,郑翰星,陈桂彬,蓝晏琪,陈州
受保护的技术使用者：福建星网锐捷通讯股份有限公司
技术研发日：
技术公布日：2024/1/13