页面生成方法、系统、装置、设备及存储介质制造方法及图纸

本申请实施例提供一种页面生成方法、系统、装置、设备及存储介质。在本申请实施例中，将编辑层和渲染层解耦，对于初始布局信息上目标组件关联的编辑对象，编辑层可编辑目标组件的属性信息，渲染层根据目标组件编辑后的属性信息对目标组件进行渲染，得到目标页面的目标布局信息，由于编辑层和渲染层实现了解耦，渲染层成为可插拔的结构，可兼容不同前端开发框架对应的渲染层，实现了编辑层的高度复用节省开发资源。同时，由于编辑层与渲染层的解耦，可以对编辑层实时编辑和实时渲染，及时查看编辑后的页面效果，并且编辑后的页面效果与线上的渲染效果是一致的，实现所见即所得功能。实现所见即所得功能。实现所见即所得功能。

【技术实现步骤摘要】
页面生成方法、系统、装置、设备及存储介质


[0001]本申请涉及互联网
，尤其涉及一种页面生成方法、系统、装置、设备及存储介质。

技术介绍

[0002]随着互联网技术的不断发展，互联网应用的数量越来越多。其中，页面是互联网应用的核心组成，页面不仅是互联网应用向用户展示各种信息的媒介，也是用户与互联网应用进行交互的接口。其中，页面的开发效率决定互联网应用的交付时效。为此，现有技术中出现了一些所见即所得的页面构造器，用以辅助开发人员快速完成页面布局等界面设计。
[0003]但是，现有页面构造器与前端开发框架之间存在紧耦合关系，即针对不同前端开发框架需要设计不同的页面构造器，一个页面构造器只能服务于一个应用开发框架，这就存在开发资源浪费的问题。

技术实现思路

[0004]本申请的多个方面提供一种页面生成方法、系统、装置、设备及存储介质，用以节省开发资源。
[0005]本申请实施例提供一种页面生成系统，包括：展示层、编辑层以及可动态接入页面生成系统的渲染层，渲染层可基于不同前端开发框架实现；展示层，用于显示布局编辑本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面生成系统，其特征在于，包括：展示层、编辑层以及可动态接入所述页面生成系统的渲染层，所述渲染层可基于不同前端开发框架实现；所述展示层，用于显示布局编辑界面，所述布局编辑界面至少包括组件区和编辑区，所述组件区用于显示目标组件库中的多个组件，所述目标组件库是实现所述渲染层使用的目标前端开发框架提供的组件库；所述渲染层，用于响应组件选择操作，确定被选择的目标组件，所述目标组件用于构建目标页面，根据所述目标组件对应的初始属性信息，将所述目标组件渲染至所述编辑区中，以得到所述目标页面的初始布局信息，所述目标组件为至少一个；所述编辑层，用于从所述渲染层获取所述初始布局信息，根据所述初始布局信息在所述编辑区显示与所述目标组件关联的编辑对象；以及响应对所述编辑对象的编辑操作，编辑所述目标组件的属性信息；所述渲染层，还用于根据所述目标组件的编辑后的属性信息，重新对所述目标组件进行渲染，以得到所述目标页面的目标布局信息。2.根据权利要求1所述的系统，其特征在于，根据所述目标组件对应的初始属性信息，将所述目标组件渲染至所述编辑区中，以得到所述目标页面的初始布局信息，包括：响应组件选择操作，确定被选中的目标组件的标识信息，并根据所述目标组件的标识信息，从所述目标组件库中加载所述目标组件的初始属性信息；根据所述目标组件的初始属性信息，将所述目标组件渲染至所述编辑区中，以及根据所述目标组件在所述编辑区中的位置信息，得到所述目标组件之间的层级关系；根据所述目标组件的初始属性信息和所述目标组件之间的层级关系，生成所述目标页面的领域特定语言DSL描述文件，所述DSL描述文件是脱离平台特性的信息描述文件，至少包括所述目标页面的初始布局信息。3.根据权利要求1所述的系统，其特征在于，根据所述初始布局信息在所述编辑区显示与所述目标组件关联的编辑对象，包括：从所述初始布局信息中，获取所述目标组件的标识信息、初始样式信息和初始展示位置；根据所述目标组件的初始样式信息，生成与所述目标组件的外轮廓相同的编辑对象，并建立所述编辑对象的标识信息与所述目标组件的标识信息之间的绑定关系；根据所述目标组件的初始展示位置，在所述编辑区内显示所述编辑对象，以使述编辑对象与所述目标组件的外轮廓重合。4.根据权利要求3所述的系统，其特征在于，根据所述目标组件的初始展示位置，在所述编辑区内显示所述编辑对象，包括：从所述目标组件的初始样式信息中，获取所述目标组件的初始颜色信息；选择不同于所述目标组件的初始颜色信息的其它颜色，作为所述编辑对象的初始颜色信息；根据所述目标组件的初始展示位置，按照所述编辑对象的初始颜色信息，在所述编辑区内显示所述编辑对象，以使述编辑对象与所述目标组件的外轮廓重合。5.根据权利要求1所述的系统，其特征在于，响应对所述编辑对象的编辑操作，编辑所述目标组件的属性信息，包括：
响应对所述编辑对象的编辑操作，从所述初始布局信息中获取所述目标组件的至少一个属性项及其对应的初始属性值，并将所述至少一个属性项及其对应的初始属性值显示于一属性编辑层；响应对任一属性项对应的初始属性值的编辑操作，获取所述任一属性项对应的目标属性信息，每个属性项为长度、宽度、颜色、展示位置或是否关联组件中的一个。6.根据权利要求5所述的系统，其特征在于，还包括：根据所述目标组件的目标属性信息，同步改变所述编辑对象的属性信息，以使属性信息改变后的编辑框与属性信息改变后的目标组件适配。7.根据权利要求1
‑
6任一项所述的系统，其特征在于，实现所述编辑层使用的前端开发框架为所述目标前端开发框架，或者，实现所述编辑层使用的前端开发框架不同于所述目标前端开发框架。8.一种页面生成方法，其特征在于，包括：显示布局编辑界面，所述布局编辑界面至少包括组件区和编辑区，所述组件区用于显示目标组件库中的多个组件，所述目标组件库是目标前端开发框架提供的组件库；响应组件选择操作，确定被选择的目标组件，所述目标组件用于构建目标页面，根据所述目标组件对应的初始属性信息，将所述目标组件渲染至所述编辑区中，以得到所述目标页面的初始布局信息，所述目标...

【专利技术属性】
技术研发人员：高飞宇，周雨，
申请(专利权)人：瑞庭网络技术上海有限公司，
类型：发明
国别省市：