[發明專利]一種可被集成的高擴展性頁面設計方法及系統

在審

• 申請號: 202210407724.2
• 申請日: 2022-04-19
• 公開（公告）號: CN114995806A
• 公開（公告）日: 2022-09-02
• 發明（設計）人: 郝晨光;梁紅敏;戚雨;姜楠
• 申請（專利權）人: 北京百特云享科技有限公司
• 主分類號: G06F8/35
• 分類號: G06F8/35;G06F8/34;G06F8/38;G06F8/71;G06F16/957;G06F16/958
• 代理公司: 滁州弘知潤創知識產權代理事務所(普通合伙) 34222
• 代理人: 林凡燕

本發明屬于頁面設計技術領域，尤其為一種可被集成的高擴展性頁面設計方法及系統，頁面設計方法包括：S1、設計具有畫布區域、控件欄、屬性面板的頁面設計器；S2、管理所有已定義的控件模型，針對當前頁面的控件樹結構，提供新增、刪除、拖入容器控件、拖出容器控件、顯示屬性定義、設置屬性功能；S3、頁面渲染；S4、舊版本頁面屬性轉換。本發明提供模型定義的升級機制，可以適配多種實現框架和組件庫，并且在使用過程中，隨著不斷調整升級，仍然可以保證技術實現總是最新的版本，極大提升了可視化設計器的適應能力，與現在同類設計方案相比更加靈活，不與具技術框架綁定、不與后臺傳輸結構耦合，便于更換與嵌入到產品實現框架中。

技術領域

本發明涉及頁面設計技術領域，具體為一種可被集成的高擴展性頁面設計方法及系統。

背景技術

頁面設計器主要由四部分組成：可視化設計器、控件、頁面、頁面渲染器。其中，可視化設計器為負責對控件的排版布局的設計工具，控件顯示在設計器控件欄中，可以被放置在設計器畫布上，進行排版的項；頁由設計器產生的對于多個組件排版后產生的結果；頁面渲染器為解釋頁面結構，并渲染的工具。

大多數的頁面設計器這四部分的技術實現是一致的，即：都使用同一套技術框架和同一版本的組件庫，頁面和頁面渲染器也是符合這套技術框架和組件庫特征的，具有實現成本低且快速的優點。但仍存在以下缺陷：

1、技術框架與組件庫迭代頻率不同(技術框架一般在5年，組件庫一般在2年)，舊的技術框架、組件庫會被認為是過時且缺乏競爭力的產品。(如： Vue2升級到Vue3、Angular1升級到Angular2、React14升級到React16， ElementUI2升級到ElementUI3、AntDesign2升級到AntDesign3)?？梢暬O計器、頁面渲染器為了適應新的技術框架需要重新開發，大量的功能要重寫和重新測試，代價巨大；

2、頁面與技術實現已經綁定(如：頁面就是一段Vue、React代碼)。針對不同的技術框架只能開發不同的可視化設計器和頁面渲染器；

3、對于頁面布局的不同解釋方式，無法復用已有的頁面。如：需要在word 中根據設計頁面的排版生成對應相似布局的套打頁面。

因此我們提出了一種可被集成的高擴展性頁面設計方法及系統來解決上述問題。

發明內容

(一)解決的技術問題

針對現有技術的不足，本發明提供了一種可被集成的高擴展性頁面設計方法及系統，解決了可視化設計器的頁面不能適配多種頁面渲染器，可視化設計器適應能力弱的問題。

(二)技術方案

本發明為了實現上述目的具體采用以下技術方案：

一種可被集成的高擴展性頁面設計方法，所述可被集成的高擴展性頁面設計方法包括：

S1、設計具有畫布區域、控件欄、屬性面板的頁面設計器，在畫布區域排版控件、配置控件屬性，最終生成頁面模型；

S2、管理所有已定義的控件模型，針對當前頁面的控件樹結構，提供新增、刪除、拖入容器控件、拖出容器控件、顯示屬性定義、設置屬性功能；

S3、將生成的頁面模型放置在基于具體技術框架配合具體組件庫上進行頁面渲染；

S4、根據版本號判斷，舊版本頁面屬性通過版本轉換引擎逐級轉換成為新版本屬性。

進一步地，所述頁面設計器具有布局控件和普通控件兩種類型的控件，布局控件中可以放置布局控件或普通控件，普通控件只能被放置于布局控件中，所述普通控件可設置包括允許上傳的文件類型、最多上傳文件數量和最大上傳文件大小的特征屬性，所述布局控件除了可以設置自身的特征屬性以外，還具有子控件集合。