[发明专利]一种可被集成的高扩展性页面设计方法及系统

说明书

本发明属于页面设计技术领域，尤其为一种可被集成的高扩展性页面设计方法及系统，页面设计方法包括：S1、设计具有画布区域、控件栏、属性面板的页面设计器；S2、管理所有已定义的控件模型，针对当前页面的控件树结构，提供新增、删除、拖入容器控件、拖出容器控件、显示属性定义、设置属性功能；S3、页面渲染；S4、旧版本页面属性转换。本发明提供模型定义的升级机制，可以适配多种实现框架和组件库，并且在使用过程中，随着不断调整升级，仍然可以保证技术实现总是最新的版本，极大提升了可视化设计器的适应能力，与现在同类设计方案相比更加灵活，不与具技术框架绑定、不与后台传输结构耦合，便于更换与嵌入到产品实现框架中。

技术领域

本发明涉及页面设计技术领域，具体为一种可被集成的高扩展性页面设计方法及系统。

背景技术

页面设计器主要由四部分组成：可视化设计器、控件、页面、页面渲染器。其中，可视化设计器为负责对控件的排版布局的设计工具，控件显示在设计器控件栏中，可以被放置在设计器画布上，进行排版的项；页由设计器产生的对于多个组件排版后产生的结果；页面渲染器为解释页面结构，并渲染的工具。

大多数的页面设计器这四部分的技术实现是一致的，即：都使用同一套技术框架和同一版本的组件库，页面和页面渲染器也是符合这套技术框架和组件库特征的，具有实现成本低且快速的优点。但仍存在以下缺陷：

1、技术框架与组件库迭代频率不同(技术框架一般在5年，组件库一般在2年)，旧的技术框架、组件库会被认为是过时且缺乏竞争力的产品。(如： Vue2升级到Vue3、Angular1升级到Angular2、React14升级到React16， ElementUI2升级到ElementUI3、AntDesign2升级到AntDesign3)。可视化设计器、页面渲染器为了适应新的技术框架需要重新开发，大量的功能要重写和重新测试，代价巨大；

2、页面与技术实现已经绑定(如：页面就是一段Vue、React代码)。针对不同的技术框架只能开发不同的可视化设计器和页面渲染器；

3、对于页面布局的不同解释方式，无法复用已有的页面。如：需要在word 中根据设计页面的排版生成对应相似布局的套打页面。

因此我们提出了一种可被集成的高扩展性页面设计方法及系统来解决上述问题。

发明内容

(一)解决的技术问题

针对现有技术的不足，本发明提供了一种可被集成的高扩展性页面设计方法及系统，解决了可视化设计器的页面不能适配多种页面渲染器，可视化设计器适应能力弱的问题。

(二)技术方案

本发明为了实现上述目的具体采用以下技术方案：

一种可被集成的高扩展性页面设计方法，所述可被集成的高扩展性页面设计方法包括：

S1、设计具有画布区域、控件栏、属性面板的页面设计器，在画布区域排版控件、配置控件属性，最终生成页面模型；

S2、管理所有已定义的控件模型，针对当前页面的控件树结构，提供新增、删除、拖入容器控件、拖出容器控件、显示属性定义、设置属性功能；

S3、将生成的页面模型放置在基于具体技术框架配合具体组件库上进行页面渲染；

S4、根据版本号判断，旧版本页面属性通过版本转换引擎逐级转换成为新版本属性。

进一步地，所述页面设计器具有布局控件和普通控件两种类型的控件，布局控件中可以放置布局控件或普通控件，普通控件只能被放置于布局控件中，所述普通控件可设置包括允许上传的文件类型、最多上传文件数量和最大上传文件大小的特征属性，所述布局控件除了可以设置自身的特征属性以外，还具有子控件集合。