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

在審

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

1.一種頁面代碼生成方法，其特征在于，包括：

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

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

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

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

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

2.根據權利要求1所述的方法，其特征在于，在所述獲取目標格式的UI設計圖之前，還包括：利用預設圖像編輯工具在編輯界面上添加所需的元素，并為添加的每一個元素賦予屬性值以形成對應元素的樣式，將編輯界面上形成的UI設計圖存儲為所述目標格式；所述目標格式的UI設計圖中存儲有元素和元素對應的樣式。

3.根據權利要求2所述的方法，其特征在于，所述目標格式為PSD。

4.根據權利要求1所述的方法，其特征在于，所述樣式代碼模板中包括多種屬性對應的屬性代碼模塊，每一個屬性代碼模塊中均缺少對應屬性的屬性值；

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

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

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

5.根據權利要求4所述的方法，其特征在于，在所述確定樣式對應屬性的屬性值之后，還包括：

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

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

6.根據權利要求5所述的方法，其特征在于，

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

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

針對每一個分類，當該分類下的元素數量為多個時，確定該多個元素中是否存在至少兩個元素，該至少兩個元素的樣式所對應相同屬性值的屬性數量在該樣式所對應的屬性總數量中的比例不小于預設比例，若存在，則將該至少兩個元素確定為相同樣式的元素；

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

確定該類樣式對應的相同屬性值的第一屬性和不同屬性值的第二屬性；

從所述樣式代碼模板中獲取所述第一屬性對應的第一屬性代碼模塊、所述第二屬性對應的第二屬性代碼模塊；

將所述第一屬性的屬性值添加至所述第一屬性代碼模塊的對應位置上；

將該類樣式包含的各元素分別對應所述第二屬性的屬性值，一一對應的添加至各第二屬性代碼模塊的對應位置上。

7.根據權利要求1-6中任一所述的方法，其特征在于，所述結構代碼文件和所述樣式代碼文件是相互獨立的兩個文件；

所述將所述結構代碼文件和所述樣式代碼文件進行關聯，包括：根據所述樣式代碼文件，在所述結構代碼文件中寫入關聯函數，以將兩個文件進行關聯。