[發明專利]頁面代碼生成方法、裝置、計算設備及存儲介質

在審

• 申請號: 202210362529.2
• 申請日: 2022-04-08
• 公開（公告）號: CN114780091A
• 公開（公告）日: 2022-07-22
• 發明（設計）人: 饒凌劍;張根生;肖新光
• 申請（專利權）人: 安天科技集團股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06V30/413;G06V30/416
• 代理公司: 北京格允知識產權代理有限公司 11609
• 代理人: 王文雅

本發明提供了一種頁面代碼生成方法、裝置、計算設備及存儲介質，其中方法包括：獲取目標格式的UI設計圖；識別所述UI設計圖中包含的元素以及每一個元素的樣式；所述樣式用于指示對應元素在所述UI設計圖中的呈現效果；基于預先構建的元素與結構代碼的對應關系，獲取與每一個元素分別對應的結構代碼，得到結構代碼文件；所述結構代碼文件用于將所述UI設計圖中包含的元素呈現在UI頁面中；根據預設的樣式代碼模板和每一個元素的樣式，生成所述UI設計圖的樣式代碼文件；將所述結構代碼文件和所述樣式代碼文件進行關聯，得到頁面代碼文件。本方案，能夠降低錯誤率，提高開發效率。

技術領域

本發明實施例涉及代碼生成技術領域，特別涉及一種頁面代碼生成方法、裝置、計算設備及存儲介質。

背景技術

在UI(User Interface，用戶界面)頁面設計完成后，需要由前端開發人員對UI設計圖進行代碼編寫，以實現UI設計圖的效果展示。在以往的人工代碼開發過程中，存在大量重復性勞動，且人工開發存在錯誤率高、效率低的缺點。

發明內容

基于現有方案中人工開發存在錯誤率高、效率低的問題，本發明實施例提供了一種頁面代碼生成方法、裝置、計算設備及存儲介質，能夠降低錯誤率，提高開發效率。

第一方面，本發明實施例提供了一種頁面代碼生成方法，包括：

獲取目標格式的UI設計圖；

識別所述UI設計圖中包含的元素以及每一個元素的樣式；所述樣式用于指示對應元素在所述UI設計圖中的呈現效果；

基于預先構建的元素與結構代碼的對應關系，獲取與每一個元素分別對應的結構代碼，得到結構代碼文件；所述結構代碼文件用于將所述UI設計圖中包含的元素呈現在UI頁面中；

根據預設的樣式代碼模板和每一個元素的樣式，生成所述UI設計圖的樣式代碼文件；

將所述結構代碼文件和所述樣式代碼文件進行關聯，得到頁面代碼文件。

優選地，在所述獲取目標格式的UI設計圖之前，還包括：利用預設圖像編輯工具在編輯界面上添加所需的元素，并為添加的每一個元素賦予屬性值以形成對應元素的樣式，將編輯界面上形成的UI設計圖存儲為所述目標格式；所述目標格式的UI設計圖中存儲有元素和元素對應的樣式。

優選地，所述目標格式為PSD。

優選地，所述樣式代碼模板中包括多種屬性對應的屬性代碼模塊，每一個屬性代碼模塊中均缺少對應屬性的屬性值；

所述根據預設的樣式代碼模板和每一個元素的樣式，生成所述UI設計圖的樣式代碼文件，包括：

根據每一個元素的樣式，確定樣式對應屬性的屬性值；

從所述樣式代碼模板中獲取對應屬性的屬性代碼模塊，將屬性值添加至對應屬性代碼模塊的對應位置上，得到所述樣式代碼文件。

優選地，在所述確定樣式對應屬性的屬性值之后，還包括：

根據每一個元素的樣式所對應屬性的屬性值，確定相同樣式的元素，將相同樣式的元素分為同一類樣式；

針對每一類樣式從所述樣式代碼模板中獲取該類樣式對應屬性的屬性代碼模塊，并執行所述將屬性值添加至對應屬性代碼模塊的對應位置上，得到所述樣式代碼文件。

優選地，所述根據每一個元素的樣式所對應屬性的屬性值，確定相同樣式的元素，包括：

基于元素類型按照相同類型將各元素進行分類；