一种基于H5的低代码生成方法、系统及计算机存储介质技术方案

本发明专利技术公开了一种基于H5的低代码生成方法、系统及计算机存储介质，涉及低代码生成技术领域。本发明专利技术充分利用一整套规范化json数据格式的组件和响应器规则设置，以及vuex状态管理器的特性，突破传统通过event事件更新数据，大大简化了低代码H5页面实现的难度和代码量，显著提升了开发效率，同时兼顾编辑预览的实时性和用户操作的简易性；在展示静态页面的基础上，完美解决客户数据私有化需求，直接读取客户提供接口的数据进行展示，同时对用户行为事件提供数据采集支持，相对于同类型的产品，无论是开发层面还是用户使用层面都有很大优势。论是开发层面还是用户使用层面都有很大优势。论是开发层面还是用户使用层面都有很大优势。

【技术实现步骤摘要】
一种基于H5的低代码生成方法、系统及计算机存储介质


[0001]本专利技术属于低代码生成
，特别是涉及一种基于H5的低代码生成方法、系统及计算机存储介质。

技术介绍

[0002]本技术方案基于两个方面的背景，一是目前逐渐流行的基于微信平台的H5微站点开发，能够迅速的进行粉丝引流，推广公司产品线；二是低代码平台，能够在最短开发成本下，快速实现页面内容展示和交互。
[0003]由于两方面结合的优势已经越来越明显，市面上也涌现了不少对应的产品，提供大量页面组件，生成基于H5的低代码页面。虽然同类型产品很多，但大多数具有以下缺陷：(1)提供的页面组件功能复杂，非常难上手，且往往需要经过专人培训才能操作；(2)对于页面、组件的配置无法做到实时响应，需要预览功能才能看到实际效果；(3)着重展示静态内容(如轮播、图片等)，对于动态化的包括图文、视频等内容需要在平台上重新维护数据，大大增加了配置成本；(4)配置用户行为相应的功能较弱，无法满足客户私有数据采集的多样需求。

技术实现思路

[0004]本专利技术提供了一种基于H5的低代码生成方法、系统及计算机存储介质，设计一套前端组件数据格式规则，既能够满足不同场景使用的拓展性，同时尽可能简化配置内容，做到人人都能上手配置；彻底解决实时预览问题，保证用户的所有操作，能第一时间同步展示，加快配置效率，提高用户体验，并且实时组件直接接入第三方库数据，动态展示图文等内容类需要在平台上重新维护数据，大大增加了配置成本；配置用户行为相应功能较弱，无法满足客户私有化数据采集的多样需求。
[0005]为解决上述技术问题，本专利技术是通过以下技术方案实现的：
[0006]本专利技术的一种基于H5的低代码生成方法，依托Vue.js前端技术框架，以及vuex全局状态管理模式实现，包括如下步骤：
[0007]S1、于控制端创建一系列页面内容组件，各组件提供一套规则化的json元数据，记录内容的数据设置部分、样式设置部分和高级设置部分；所述组件包括基础类、数据类、营销类、布局类；
[0008]S2、用户通过拖拽组件，将其添加到页面编辑器的指定位置，此时会将页面内容组件对应的json数据添加到页面json数据中；
[0009]S3、页面编辑器读取新添加的组件json数据，并且按照其中提供的默认样式和内容进行渲染；
[0010]S4、用户在页面编辑器中，点击各组件中某个组件内容，将该组件的当前数据存入vuex全局状态管理模块中，使其处于激活编辑状态；
[0011]S5、打开组件编辑面板模块，组件编辑面板模块读取vuex全局状态管理模块中当
前组件的json数据，并根据当前组件的json数据结构动态渲染可编辑的内容；
[0012]S6、用户通过组件编辑面板模块，对当前组件各项内容进行修改，利用vue框架底层的数据监听，将用户修改的json数据字段实时更新到vuex全局状态管理模块中，且组件编辑面板模块自动读取组件数据；
[0013]S7、页面编辑器中对应的组件监听到vuex状态管理器中数据的变化，立即根据新数据渲染对应的内容，实现用户的任意修改，页面编辑器同步更新展示；
[0014]S8、自动将各组件的最新数据保存在页面json数据中，用户保存页面，即生成当前整个H5页面json数据；
[0015]S9、用户进入H5站点，通过接口获取每个页面的json数据包，读取页面中各组件json数据，结合组件配置规则，以组件的方式最终渲染成用户设置的H5页面，并完成页面动态内容展示。
[0016]进一步地，所述数据类的组件包括图文、视频，且组件编辑支持响应器配置，即针对该类组件内容和行为相应的动态数据接口配置，响应器同样提供一套结构化的json元数据，编辑的内容将插入到对应组件的json数据中；数据类的组件具体设置和使用流程如下：
[0017]P1、在控制端设置接口触发的事件类型，包括加载数据、点击内容；
[0018]P2、匹配组件json数据中对应的响应器设置内容，设置接口的地址路径和方法；
[0019]P3、设置接口的请求参数，设置包括参数名、参数类型、参数值、说明描述在内的信息；
[0020]P4、设置接口的响应内容，包括状态码的设置、返回值的结构配置、以及针对各层返回字段的响应方式；
[0021]P5、用户进入h5页面，各组件初始化时，读取对应的响应器配置json内容，在不同事件触发时，匹配响应器内容；
[0022]P6、如果匹配成功，开始根据参数结构和映射规则，读取组件中的数据，或者全局数据作为参数；若未匹配成功，做不做响应，并且继续监听组件事件；
[0023]P7、根据配置的接口路径及映射规则，获取接口参数，并调起接口，获取对应的接口返回数据；
[0024]P8、获取到数据后，读取接口的响应配置，如果用户设置了响应规则，则依次匹配两者内容，若满足设置规则，则按照其设置的响应方式进行处理，并根据响应规则，将获取到的数据进行展示或存储；若未能匹配响应规则，则结束本事件的响应并继续监听组件事件。
[0025]进一步地，所述可编辑的内容包括数据选择、文字、颜色、布局，均采用统一的表单形式。
[0026]进一步地，所述请求参数包括params、body、header中的参数。
[0027]进一步地，所述参数值为实际值或映射规则。
[0028]一种基于H5的低代码生成系统，包括控制端和H5用户端，所述控制端包括组件编辑面板模块、vuex全局状态管理模块、响应器模块；所述H5用户端包括H5页面展示模块、H5响应处理模块；
[0029]各模块之间共用一套json数据，所述vuex全局状态管理模块将json数据存入json数据驱动，且json数据驱动对vuex全局状态管理模块进行监听，vuex全局状态管理模块与
组件编辑面板模块、响应模块之间交互设置和数据展示实时同步；
[0030]所述响应器模块用于对组件编辑面板模块进行高级设置；
[0031]通过各页面组件模块组合，以及组件编辑面板模块、响应器模块的配置，在json数据驱动下来生成完整的页面json数据；
[0032]所述H5用户端以页面组件模块组合，根据json数据实际渲染出完整页面，以及通过接口获取的动态数据进行展示，对行为事件触发接口响应进行采集。
[0033]进一步地，所述高级设置具体包括如下流程：
[0034]Q1、点击组件，并选择高级设置；
[0035]Q2、开启响应器配置面板，读取组件数据中相关设置内容；
[0036]Q3、动态展示可编辑内容；
[0037]Q4、根据各组件具体类型和场景进行配置，包括设置接口事件类型、设置接口地址和方法、设置接口请求参数、设置接口响应规则；
[0038]Q5、存入组件json数据中。
[0039]一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于H5的低代码生成方法，依托Vue.js前端技术框架，以及vuex全局状态管理模式实现，其特征在于，包括如下步骤：S1、于控制端创建一系列页面内容组件，各组件提供一套规则化的json元数据，记录内容的数据设置部分、样式设置部分和高级设置部分；所述组件包括基础类、数据类、营销类、布局类；S2、用户通过拖拽组件，将其添加到页面编辑器的指定位置，此时会将页面内容组件对应的json数据添加到页面json数据中；S3、页面编辑器读取新添加的组件json数据，并且按照其中提供的默认样式和内容进行渲染；S4、用户在页面编辑器中，点击各组件中某个组件内容，将该组件的当前数据存入vuex全局状态管理模块中，使其处于激活编辑状态；S5、打开组件编辑面板模块，组件编辑面板模块读取vuex全局状态管理模块中当前组件的json数据，并根据当前组件的json数据结构动态渲染可编辑的内容；S6、用户通过组件编辑面板模块，对当前组件各项内容进行修改，利用vue框架底层的数据监听，将用户修改的json数据字段实时更新到vuex全局状态管理模块中，且组件编辑面板模块自动读取组件数据；S7、页面编辑器中对应的组件监听到vuex状态管理器中数据的变化，立即根据新数据渲染对应的内容，实现用户的任意修改，页面编辑器同步更新展示；S8、自动将各组件的最新数据保存在页面json数据中，用户保存页面，即生成当前整个H5页面json数据；S9、用户进入H5站点，通过接口获取每个页面的json数据包，读取页面中各组件json数据，结合组件配置规则，以组件的方式最终渲染成用户设置的H5页面，并完成页面动态内容展示。2.根据权利要求1所述的一种基于H5的低代码生成方法、系统及计算机存储介质，其特征在于，所述数据类的组件包括图文、视频，且组件编辑支持响应器配置，即针对该类组件内容和行为相应的动态数据接口配置，响应器同样提供一套结构化的json元数据，编辑的内容将插入到对应组件的json数据中；数据类的组件具体设置和使用流程如下：P1、在控制端设置接口触发的事件类型，包括加载数据、点击内容；P2、匹配组件json数据中对应的响应器设置内容，设置接口的地址路径和方法；P3、设置接口的请求参数，设置包括参数名、参数类型、参数值、说明描述在内的信息；P4、设置接口的响应内容，包括状态码的设置、返回值的结构配置、以及针对各层返回字段的响应方式；P5、用户进入h5页面，各组件初始化时，读取对应的响应器配置json内容，在不同事件触发时...

【专利技术属性】
技术研发人员：乔明辉，周昌，
申请(专利权)人：上海悦米信息技术有限公司，
类型：发明
国别省市：