一种跨平台页面渲染系统、电子设备及存储介质的制作方法

本发明属于互联网领域，尤其涉及一种跨平台页面渲染系统、电子设备及存储介质。

背景技术：

1、传统页面开发流程是：运营人员提出需求->产品整理补充需求->ui设计师出设计图->前端开发进行编码->测试工程师进行测试->服务端部署。

2、在这种开发流程下：做一个多平台（例如：h5页面、微信小程序和百度小程序）的活动页面是需要针对多个平台做重复的页面开发，效率非常低。

技术实现思路

1、为解决上述技术问题，本发明提出一种跨平台页面渲染系统、电子设备及存储介质的技术方案。

2、本发明第一方面公开了一种跨平台页面渲染系统，所述系统包括：页面可视化编辑工具、存储介质、通用解析器和渲染器；

3、通过点击或拖拽页面可视化编辑工具内的预设组件模块和页面布局模块，在设计器的页面布局或自定义布局生成组件的预览态，再通过拖拽页面可视化编辑工具内的属性编辑模块对所述组件的属性、事件和样式进行修改并生成最终的页面结构化数据；

4、将所述页面结构化数据存储到存储介质，移动端再向后台请求数据后，经过所述通用解析器处理后再由各个平台的渲染器动态渲染页面。

5、根据本发明第一方面的系统，所述通过点击或拖拽页面可视化编辑工具内的预设组件模块和页面布局模块，在设计器的页面布局或自定义布局生成组件的预览态的方法包括：

6、通过点击或拖拽所述预设组件模块触发全局事件拦截分发器对事件进行解析后，得到要生成的组件类型和组件的预设数据；

7、然后通过数据状态管理器提供的插入数据方法在页面级数据结构下的components的数组内插入组件的预设数据结构；

8、所述页面布局模块会监听到所述预设数据结构的变化后，遍历页面级数据结构下components数组所在的页面布局或自定义布局后生成组件的预览态，完成对页面预览态的展示。

9、根据本发明第一方面的系统，所述对所述组件的属性、事件和样式进行修改的方法包括：

10、通过属性编辑模块的内容设置模块设置组件自定义的数据字段；

11、通过属性编辑模块的样式设置模块设置组件css样式的属性；

12、通过属性编辑模块的事件设置模块设置组件行为动作事件。

13、根据本发明第一方面的系统，所述页面结构化数据的数据结构为：

14、页面结构化数据的数据结构定义相当于树状结构的根节点；

15、数据结构中定义的components数组为存放布局组件与基础组件的数据结构，布局组件也存放基础组件的数据结构，并形成一个树状结构；

16、数据结构中定义的config是组件内容设置数据存储对象；

17、数据结构中定义的style是标准的css样式的规范；

18、数据结构中定义的global是页面的全局变量。

19、根据本发明第一方面的系统，所述通用解析器由独立一段javascript脚本编写，能够在所有支持运行javascript的环境进行使用。

20、根据本发明第一方面的系统，每个组件都设有独立的parse类，且都继承于基础类baseparse；

21、所述通用解析器解析页面结构化数据中的css样式，进行css样式的属性的单位换算，转换为字符串类型的格式进行平台适配；

22、所述通用解析器将模版语法中的变量替换成全局变量的值，实现动态数据渲染。

23、根据本发明第一方面的系统，所述渲染器预设布局组件和基础组件的组件库并实现与页面可视化编辑工具的组件的预览态效果一致；

24、所述渲染器的递归循环页面数据结构，根据组件类型创建组件库内对应组件的实例挂载到容器上实现组件的渲染展示。

25、根据本发明第一方面的系统，所述渲染器的全局context内置api请求方法、triggeraction触发行为事件方法和provider。

26、本发明第二方面提供了一种电子设备，所述设备包括存储器和处理器，所述存储器上存储有计算机程序，该计算机程序被所述处理器执行时，执行如本发明第一方面所述的一种跨平台页面渲染系统中的方法。

27、本发明第三方面提供了一种存储介质，该存储介质存储的计算机程序，能够被一个或多个处理器执行，能够用来实现如本发明第一方面所述的一种跨平台页面渲染系统中的方法。

28、综上，本发明提出的方案只需要实现对应平台的渲染器部分即可实现跨平台页面的动态渲染，减少了重复开发的工作，提升了工作效率。

技术特征：

1.一种跨平台页面渲染系统，其特征在于，所述系统包括：页面可视化编辑工具、存储介质、通用解析器和渲染器；

2.根据权利要求1所述的一种跨平台页面渲染系统，其特征在于，所述通过点击或拖拽页面可视化编辑工具内的预设组件模块和页面布局模块，在设计器的页面布局或自定义布局生成组件的预览态的方法包括：

3.根据权利要求2所述的一种跨平台页面渲染系统，其特征在于，所述对所述组件的属性、事件和样式进行修改的方法包括：

4.根据权利要求1所述的一种跨平台页面渲染系统，其特征在于，所述页面结构化数据的数据结构为：

5.根据权利要求1所述的一种跨平台页面渲染系统，其特征在于，所述通用解析器由独立一段javascript脚本编写。

6.根据权利要求1所述的一种跨平台页面渲染系统，其特征在于，每个组件都设有独立的parse类，且都继承于基础类baseparse；

7.根据权利要求1所述的一种跨平台页面渲染系统，其特征在于，所述渲染器预设布局组件和基础组件的组件库并实现与页面可视化编辑工具的组件的预览态效果一致；

8.根据权利要求7所述的一种跨平台页面渲染系统，其特征在于，所述渲染器的全局context内置api请求方法、triggeraction触发行为事件方法和provider。

9.一种电子设备，其特征在于，包括存储器和处理器，所述存储器上存储有计算机程序，该计算机程序被所述处理器执行时，执行如权利要求1至8任一项所述的一种跨平台页面渲染系统中的方法。

10.一种存储介质，其特征在于，该存储介质存储的计算机程序，能够被一个或多个处理器执行，能够用来实现如权利要求1至8中任一项所述的一种跨平台页面渲染系统中的方法。

技术总结
本发明提供一种跨平台页面渲染系统、电子设备及存储介质，属于互联网领域，其中，系统包括：页面可视化编辑工具、存储介质、通用解析器和渲染器；通过点击或拖拽页面可视化编辑工具内的预设组件模块和页面布局模块，在设计器的页面布局或自定义布局生成组件的预览态，再通过拖拽页面可视化编辑工具内的属性编辑模块对所述组件的属性、事件和样式进行修改并生成最终的页面结构化数据；将所述页面结构化数据存储到存储介质，移动端再向后台请求数据后，经过所述通用解析器处理后再由各个平台的渲染器动态渲染页面。本发明提出的方案只需要实现对应平台的渲染器部分即可实现跨平台页面的动态渲染，减少了重复开发的工作，提升了工作效率。

技术研发人员：张嘉文,郑辉
受保护的技术使用者：北京纷扬科技有限责任公司
技术研发日：
技术公布日：2024/1/16