[發明專利]一種前端頁面的生成方法及裝置、存儲介質、電子裝置

在審

• 申請號: 202011569030.6
• 申請日: 2020-12-25
• 公開（公告）號: CN112558973A
• 公開（公告）日: 2021-03-26
• 發明（設計）人: 蘇優
• 申請（專利權）人: 青島海爾科技有限公司;海爾智家股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/34;G06F16/958
• 代理公司: 北京康信知識產權代理有限責任公司 11240
• 代理人: 王曉婷

本發明實施例提供了一種前端頁面的生成方法及裝置、存儲介質、電子裝置，其中，方法包括：獲取用戶界面的設計圖；識別設計圖中所包括的組件的名稱；根據組件的名稱獲取與組件對應的代碼文本；根據各組件的代碼文本生成用戶界面的前端頁面，即，直接識別設計圖中的組件，然后獲取組件的代碼生成前端頁面，因此，可以解決前端頁面的生成的效率較低問題，達到快速生成前端頁面的技術效果。

技術領域

本發明實施例涉及通信領域，具體而言，涉及一種前端頁面的生成方法及裝置、存儲介質、電子裝置。

背景技術

相關技術中，Web前端開發技術包括三要素：html(結構)、css(樣式)、javascript(行為動作)，隨著h5穩定版本的形成，前端三要素演化成HTML5、CSS3、jQuery(js中常用的庫)；原始的前端開發主要就是用文本編輯器來編寫代碼，無需編譯，本地預覽確認無誤后部署到服務器，為用戶提供訪問。但是這種用文本編輯器生成代碼的方式過程緩慢并且出錯率較高，使得前端頁面的生成的效率較低。

發明內容

本發明實施例提供了一種前端頁面的生成方法及裝置、存儲介質、電子裝置，以至少解決相關技術中前端頁面的生成的效率較低的問題。

根據本發明的一個實施例，提供了一種前端頁面的生成方法，包括：

獲取用戶界面的設計圖；

識別所述設計圖中所包括的組件的名稱；

根據所述組件的名稱獲取與所述組件對應的代碼文本；

根據各所述組件的代碼文本生成所述用戶界面的前端頁面。

在一個示例性的實施方式中，所述方法還包括：識別所述設計圖中所包括的組件的位置信息；根據所述組件的所述位置信息確定所述前端頁面中各所述組件的代碼文本的順序。

在一個示例性的實施方式中，所述前端頁面中各所述組件的代碼文本的順序與對應的所述設計圖中所述組件的位置一致。

在一個示例性的實施方式中，識別所述設計圖中所包括的組件的名稱，包括：識別所述設計圖中的圖形元素和/或文字；根據識別出的圖形元素和/或文字確定所述設計圖中所包括的組件的名稱。

在一個示例性的實施方式中，根據所述組件的名稱獲取與所述組件對應的代碼文本，包括：根據所述組件的名稱在預設的組件代碼庫中查詢所述組件的代碼文本。

在一個示例性的實施方式中，還包括：對生成的所述前端頁面進行測試。

根據本發明的另一個實施例，還提供了一種前端頁面的生成裝置，包括：

第一獲取模塊，用于獲取用戶界面的設計圖；

識別模塊，用于識別所述設計圖中所包括的組件的名稱；

第二獲取模塊，用于根據所述組件的名稱獲取與所述組件對應的代碼文本；

生成模塊，用于根據各所述組件的代碼文本生成所述用戶界面的前端頁面。

在一個示例性的實施方式中，所述識別模塊，還用于識別所述設計圖中所包括的組件的位置信息；所述裝置還包括：確定模塊，用于根據所述組件的所述位置信息確定所述前端頁面中各所述組件的代碼文本的順序。

根據本發明的又一個實施例，還提供了一種計算機可讀存儲介質，所述計算機可讀存儲介質中存儲有計算機程序，其中，所述計算機程序被設置為運行時執行上述任一項方法實施例中的步驟。

根據本發明的又一個實施例，還提供了一種電子裝置，包括存儲器和處理器，所述存儲器中存儲有計算機程序，所述處理器被設置為運行所述計算機程序以執行上述任一項方法實施例中的步驟。