[发明专利]一种响应式界面实现方法及设备

权利要求书

1.一种响应式界面实现方法，其特征在于，所述方法包括：

确定响应式界面的界面描述；所述界面描述包括所述响应式界面的自定义模式判定规则与标准模式判定规则、所述标准模式对应的响应式界面实现规则；

确定所述响应式界面的组件描述；所述组件描述包括组件归属分组转换规则、组件所占栅格数转换规则以及组件在二维排布下的行转换规则；

通过预先设置的转换接口，根据所述界面描述与所述组件描述，对容器内的组件参数进行处理，以将所述组件参数转换为可执行代码；

根据所述可执行代码，生成所述响应式界面的可视化操作界面；

接收用户的配置请求，对所述可视化操作界面进行界面分辨率配置与界面布局配置，得到更新的可执行代码；

根据所述更新的可执行代码，生成html dom结构；

将所述html dom结构渲染至表单组件区域，以生成所述响应式界面。

2.根据权利要求1所述的方法，其特征在于，所述确定响应式界面的界面描述，具体包括：

根据预设栅格系统，将所述响应式界面按照分辨率宽度划分为十二等份，在预设断点规则表中，确定所述响应式界面的分辨率宽度对应的断点，并将所述响应式界面的显示列数确定为所述断点对应的指定显示列数，以确定所述标准模式对应的响应式界面实现规则；以及

确定表单设计器内容器的多个组件分别对应的组件所占栅格数；

判断所述组件所占栅格数是否均满足预设断点规则；

若是，则确定所述响应式界面为标准模式；

若否，则确定所述响应式界面为自定义模式；在所述自定义模式下，所述多个组件在不同界面分辨下的显示列数由用户控制。

3.根据权利要求1所述的方法，其特征在于，所述确定所述响应式界面的组件描述，具体包括：

对所述表单设计器内容器的组件进行ID标记，确定分组节点与未分组节点；确定所述分组节点内的组件，在所述分组节点内部设置组件宽度以及组件位置，以确定所述响应式界面的组件归属分组转换规则；以及

根据标准模式的组件class样式与自定义模式的组件class样式，以确定所述响应式界面的组件所占栅格数转换规则；以及

根据所述表单设计器内容器的多个组件分别对应的所占栅格数，将一维数据转换为二维数据，通过对剩余栅格数与组件所占栅格数进行相减，确定行分配算法，根据所述行分配算法确定多个组件分别所处于的行位置，以确定所述组件在二维排布下的行转换规则。

4.根据权利要求1所述的方法，其特征在于，确定预先设置的转换接口，具体包括：

确定所述容器内的接口标识；所述接口标识包括当前断点、当前分组、当前组件名、断点设置、组件值存储；所述组件值存储记录了当前组件在不同界面分辨率下的配置值，所述组件值存储包括超大屏幕所占栅格数、极大屏幕所占栅格数、中等屏幕所占栅格数、小屏幕所占栅格数、极小屏幕所占栅格数、超大屏幕上组件所占列数、极大屏幕上组件所占列数、中等屏幕上组件所占列数、小屏幕上组件所占列数、极小屏幕上组件所占列数；

通过所述接口标识，确定所述转换接口。

5.根据权利要求1所述的方法，其特征在于，所述根据所述可执行代码，生成所述响应式界面的可视化操作界面，具体包括：

根据所述可执行代码，将所述可视化操作界面划分为控制区、操作区以及视图区；

其中，所述控制区用于配置所述响应式界面的组件；所述操作区用于确定所述响应式界面的组件布局方式及调整所述响应式界面的组件宽度；所述视图区用于响应所述操作区的拖拽变更与数据变更，以渲染预览界面。