[發(fā)明專利]一種界面處理方法、裝置及終端

有效

• 申請?zhí)枺?/td>: 201910343319.7
• 申請日: 2019-04-25
• 公開（公告）號: CN110069257B
• 公開（公告）日: 2022-02-11
• 發(fā)明（設(shè)計）人: 朱政義;涂超;劉亦明;楊文澤;陳建平;馮智超;何聃;陳春勇
• 申請（專利權(quán)）人: 騰訊科技（深圳）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 廣州三環(huán)專利商標(biāo)代理有限公司 44202
• 代理人: 郝傳鑫;熊永強(qiáng)

1.一種界面處理方法，其特征在于，包括：

獲取前端界面的設(shè)計文件，所述設(shè)計文件包括所述前端界面中的元素的圖層數(shù)據(jù)結(jié)構(gòu)及位置信息；元素的圖層數(shù)據(jù)結(jié)構(gòu)包括父圖層及從屬于所述父圖層的子圖層；元素的位置信息包括第一位置信息或第二位置信息；所述第一位置信息用于描述所述元素在所述前端界面中的絕對位置；所述第二位置信息用于描述所述元素在所述前端界面中的相對位置；其中，針對所述前端界面中的任一元素，若所述任一元素未被進(jìn)行位置標(biāo)注操作，則所述設(shè)計文件中所述任一元素的位置信息為所述任一元素的第一位置信息；若所述任一元素被執(zhí)行位置標(biāo)注操作，則所述設(shè)計文件中所述任一元素的位置信息是標(biāo)注后得到的所述任一元素的第二位置信息；在完成所述前端界面的設(shè)計稿之后顯示配置按鈕以對所述設(shè)計稿中的自適應(yīng)調(diào)整的元素進(jìn)行標(biāo)注；當(dāng)所述配置按鈕被點(diǎn)擊后，同時顯示所述前端界面的設(shè)計稿和標(biāo)注列表，所述標(biāo)注列表包括了多個標(biāo)注項，通過所述標(biāo)注項來對所述任一元素執(zhí)行所述位置標(biāo)注操作；

對所述元素的圖層數(shù)據(jù)結(jié)構(gòu)進(jìn)行精簡；

根據(jù)所述元素的位置信息及精簡后的所述元素的圖層數(shù)據(jù)結(jié)構(gòu)，獲取所述前端界面布局所需的控件信息，所述控件信息包括控件的屬性及控件之間的關(guān)系；

按照所述控件信息生成所述前端界面的通用布局文件；

將所述前端界面的通用布局文件轉(zhuǎn)換為目標(biāo)平臺的目標(biāo)布局文件；

其中，所述對所述元素的圖層數(shù)據(jù)結(jié)構(gòu)進(jìn)行精簡，包括：

若子圖層的數(shù)量為零，則從所述元素的圖層數(shù)據(jù)結(jié)構(gòu)中剔除所述父圖層；或者，

若所述子圖層中包括用于描述所述元素的風(fēng)格屬性的風(fēng)格圖層，則將所述風(fēng)格圖層合并至所述父圖層；或者，

若子圖層的數(shù)量為1，則將所述子圖層與所述父圖層進(jìn)行合并。

2.如權(quán)利要求1所述的方法，其特征在于，所述獲取前端界面的設(shè)計文件，包括：

獲取前端界面的設(shè)計稿，并獲取所述前端界面中的元素的圖層數(shù)據(jù)結(jié)構(gòu)；

從所述設(shè)計稿識別出所述元素的第一位置信息；

若檢測到對所述元素的位置標(biāo)注操作，響應(yīng)于所述位置標(biāo)注操作，獲取所述元素被標(biāo)注的第二位置信息；

根據(jù)所述元素的圖層數(shù)據(jù)結(jié)構(gòu)及所述第一位置信息，或者根據(jù)所述元素的圖層數(shù)據(jù)結(jié)構(gòu)及所述第二位置信息，生成所述前端界面的設(shè)計文件。

3.如權(quán)利要求1所述的方法，其特征在于，所述通用布局文件包括領(lǐng)域?qū)Ｓ谜Z言文件；所述按照所述控件信息生成所述前端界面的通用布局文件，具體包括：按照領(lǐng)域?qū)Ｓ谜Z言的數(shù)據(jù)結(jié)構(gòu)存儲所述控件信息得到所述前端界面的通用布局文件。

4.如權(quán)利要求1所述的方法，其特征在于，所述將所述前端界面的通用布局文件轉(zhuǎn)換為目標(biāo)平臺的目標(biāo)布局文件，包括：

解析所述通用布局文件，得到所述控件信息；

按照所述控件信息在目標(biāo)平臺環(huán)境下進(jìn)行模擬布局，得到模擬布局方案；

將所述模擬布局方案中的布局模板與參考布局模板進(jìn)行匹配；

若匹配成功，則采用參考布局模板替換所述模擬布局方案中的布局模板，得到優(yōu)化后的模擬布局方案；

根據(jù)優(yōu)化后的模擬布局方案生成目標(biāo)平臺的目標(biāo)布局文件，所述目標(biāo)布局文件包括目標(biāo)布局代碼。

5.如權(quán)利要求1所述的方法，其特征在于，還包括：

在目標(biāo)平臺環(huán)境下執(zhí)行所述目標(biāo)布局文件以顯示所述前端界面。