[發明專利]代碼生成方法、裝置、服務器及計算機可讀介質

有效

• 申請號: 201910024809.0
• 申請日: 2019-01-10
• 公開（公告）號: CN109857388B
• 公開（公告）日: 2021-06-15
• 發明（設計）人: 李健;吳鵬麗;黃文存
• 申請（專利權）人: 北京城市網鄰信息技術有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30
• 代理公司: 北京潤澤恒知識產權代理有限公司 11319
• 代理人: 莎日娜

本申請實施例公開了代碼生成方法、裝置、服務器及計算機可讀介質。該方法的實施例包括：獲取待處理的圖片源文件；提取該圖片源文件中的各元素和各元素的屬性信息；對該屬性信息進行解析，生成各元素的位置關系信息；基于該位置關系信息，對各元素進行布局；基于布局結果和該屬性信息，生成用于還原圖片的程序代碼。該實施方式提高了網頁的開發效率。

技術領域

本申請實施例涉及計算機技術領域，具體涉及代碼生成方法、裝置、服務器及計算機可讀介質。

背景技術

用戶界面(User Interface，UI)一般可以認為是對軟件或網頁的人機交互、操作邏輯、界面美觀的整體設計。優秀的用戶界面不僅可以讓軟件或網頁變得有個性有品位，還可以讓軟件或網頁的操作更加舒適、簡單、自然，進而充分體現軟件或網頁的定位和特點等等。

在軟件或網頁的開發過程中，通常，需要先由視覺設計師對用戶界面進行設計，形成圖片源文件(即UI設計稿)，再由前端工程師按照用戶界面設計稿完成從用戶界面設計稿到代碼的還原工作。該還原工作中對用戶界面設計稿的解析工作尤為重要，往往需要消耗數小時甚至數天的時間，效率低，且對前端工程師的技能要求較高。

發明內容

本申請實施例提出了代碼生成方法、裝置、服務器及計算機可讀介質，以解決現有技術中對圖片源文件的解析工作效率低，且對前端工程師的技能要求較高的問題。

第一方面，本申請實施例提供了一種代碼生成方法，應用于服務器，該方法包括：獲取待處理的圖片源文件；提取圖片源文件中的各元素和各元素的屬性信息；對屬性信息進行解析，生成元素間的位置關系信息；基于位置關系信息，對各元素進行布局；基于布局結果和屬性信息，生成用于還原圖片的程序代碼。

在一些實施例中，屬性信息還包括元素位置信息和元素尺寸信息；以及對屬性信息進行解析，生成元素間的位置關系信息，包括：基于元素位置信息和元素尺寸信息，生成各元素對應的盒子模型信息；基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素間的位置關系信息，其中，位置關系信息包括元素對應的盒子模型間的距離。

在一些實施例中，基于位置關系信息，確定每行待布局的元素的列數，包括：基于位置關系信息，確定每行待布局的元素是否存在重合關系，其中，重合關系包括全部重合關系和局部重合關系；將存在重合關系的元素作為一列，將每一個不存在重合關系的元素作為一列，統計每行待布局的元素的列數，按照所確定的列數對每行的元素進行布局。

在一些實施例中，屬性信息包括元素覆蓋順序；以及在基于位置關系信息，對各元素進行布局之后，方法還包括：按照元素覆蓋順序，對各元素的布局結果進行調整。

在一些實施例中，提取圖片源文件中的各元素和各元素的屬性信息，包括：對圖片源文件進行預處理，其中，預處理包括以下至少一項：對圖片源文件中的各元素進行檢查、對圖片源文件中的各元素進行存儲；提取各元素，并從圖片源文件中提取各元素的屬性信息。

在一些實施例中，預處理還包括存儲圖片源文件對應的待還原圖片；以及在生成用于還原圖片的程序代碼之后，該方法還包括：運行用于還原圖片的程序代碼，生成還原后圖片；將還原后圖片與待還原圖片進行對比，確定還原后圖片的還原度；基于還原度與預設數值的比較，確定用于還原圖片的程序代碼是否合格。

在一些實施例中，在生成還原后圖片之后，該方法還包括：確定還原后圖片與待還原圖片的像素差值。

在一些實施例中，獲取待處理的圖片源文件，包括：響應于接收到存儲服務器發送的解析任務消息，從存儲服務器中獲取待處理的圖片源文件；以及在基于布局結果和屬性信息，生成用于還原圖片的程序代碼之后，該方法還包括：將用于還原圖片的程序代碼發送至存儲服務器。

在一些實施例中，該方法還包括：按照預設維度對圖片源文件的處理過程進行實時監控，其中，預設維度包括以下至少一項：異常狀態、還原成功率、耗時信息。