[發(fā)明專利]一種頁面校驗方法和裝置

在審

• 申請?zhí)枺?/td>: 202110412803.8
• 申請日: 2021-04-16
• 公開（公告）號: CN113076165A
• 公開（公告）日: 2021-07-06
• 發(fā)明（設(shè)計）人: 王超
• 申請（專利權(quán)）人: 北京沃東天駿信息技術(shù)有限公司;北京京東世紀(jì)貿(mào)易有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F11/36;G06F16/958
• 代理公司: 中原信達知識產(chǎn)權(quán)代理有限責(zé)任公司 11219
• 代理人: 李陽;郭晗

本發(fā)明公開了一種頁面校驗方法和裝置，涉及計算機技術(shù)領(lǐng)域。該方法的一具體實施方式包括：通過添加在目標(biāo)頁面上的瀏覽器控件，加載與目標(biāo)頁面對應(yīng)的設(shè)計稿頁面，確定設(shè)計稿頁面的背景色為透明色，并將目標(biāo)頁面與背景色為透明色的設(shè)計稿頁面進行比對，以校驗?zāi)繕?biāo)頁面與設(shè)計稿頁面的一致性，能夠使人直觀地看到APP頁面和設(shè)計稿頁面之間的差異，通過調(diào)整目標(biāo)頁面與設(shè)計稿頁面二者的頁面寬度一致，便于發(fā)現(xiàn)適配后頁面與設(shè)計稿頁面在細(xì)節(jié)上的不符之處，提高頁面校驗的精細(xì)度和準(zhǔn)確率，有助于提高開發(fā)效率。

技術(shù)領(lǐng)域

本發(fā)明涉及計算機技術(shù)領(lǐng)域，尤其涉及一種頁面校驗方法和裝置。

背景技術(shù)

UI(User Interface，用戶界面)視覺稿是UI設(shè)計師提供的視覺規(guī)范，通常是通過一個HTML網(wǎng)頁進行展示，點擊該網(wǎng)頁上的任何一個元素都會顯示出它的視覺屬性：顏色、字號、大小、寬高等。移動端APP(應(yīng)用程序)開發(fā)的每個頁面其實就是用代碼去實現(xiàn)UI視覺稿上的所有UI元素。移動端APP開發(fā)完成以后，會有UI設(shè)計師去進行UI視覺走查，即設(shè)計師按照之前提供的UI視覺稿對照APP上的頁面，查看相關(guān)元素是否一致(字號、顏色、間距、寬高等)。

在APP開發(fā)工程中，開發(fā)工程師通常只能通過眼睛觀察，粗略地對比開發(fā)的頁面UI和設(shè)計稿是否一致，很難做到準(zhǔn)確無誤，經(jīng)常出現(xiàn)小問題而影響開發(fā)效率。另外，UI設(shè)計稿通常只是針對移動設(shè)備(例如手機)的一種分辨率提供的，而開發(fā)工程師在實際開發(fā)過程中需要去適配很多種不同分辨率的機型，這就涉及到寬高、間距等的轉(zhuǎn)換適配，有可能會導(dǎo)致轉(zhuǎn)換適配后和UI設(shè)計稿不符，這種細(xì)節(jié)很難被開發(fā)工程師發(fā)現(xiàn)。

在實現(xiàn)本發(fā)明過程中，發(fā)明人發(fā)現(xiàn)現(xiàn)有技術(shù)中至少存在如下問題：

通過粗略觀察的方式使得頁面校驗的精細(xì)度和準(zhǔn)確率均比較低，且適配后的頁面與設(shè)計稿頁面的不符之處難以發(fā)現(xiàn)，導(dǎo)致影響開發(fā)效率。

發(fā)明內(nèi)容

有鑒于此，本發(fā)明實施例提供一種頁面校驗方法和裝置，能夠使人直觀地看到APP頁面和設(shè)計稿頁面之間的差異，且便于發(fā)現(xiàn)適配后頁面與設(shè)計稿頁面在細(xì)節(jié)上的不符之處，提高頁面校驗的精細(xì)度和準(zhǔn)確率，有助于提高開發(fā)效率。

為實現(xiàn)上述目的，根據(jù)本發(fā)明實施例的一個方面，提供了一種頁面校驗方法。

一種頁面校驗方法，包括：通過添加在目標(biāo)頁面上的瀏覽器控件，加載與所述目標(biāo)頁面對應(yīng)的設(shè)計稿頁面；確定所述設(shè)計稿頁面的背景色為透明色，并將所述目標(biāo)頁面與背景色為透明色的所述設(shè)計稿頁面進行比對，以校驗所述目標(biāo)頁面與所述設(shè)計稿頁面的一致性。

可選地，所述通過添加在目標(biāo)頁面上的瀏覽器控件，加載與所述目標(biāo)頁面對應(yīng)的設(shè)計稿頁面之前，包括：響應(yīng)于用戶的校驗功能啟動指令，在所述目標(biāo)頁面上顯示網(wǎng)址輸入框，通過所述網(wǎng)址輸入框接收所述用戶輸入的所述設(shè)計稿頁面的網(wǎng)址或顯示所述設(shè)計稿頁面的已存的網(wǎng)址，所述網(wǎng)址用于所述瀏覽器控件加載所述設(shè)計稿頁面。

可選地，通過顯示于所述目標(biāo)頁面上的用戶界面比對控件，接收所述校驗功能啟動指令，所述用戶界面比對控件還用于接收所述用戶的校驗功能關(guān)閉指令。

可選地，所述用戶界面比對控件設(shè)置于所述目標(biāo)頁面所屬的應(yīng)用程序的根頁面視圖中，當(dāng)所述目標(biāo)頁面被打開后，所述用戶界面比對控件自動顯示于所述目標(biāo)頁面上。

可選地，所述通過所述網(wǎng)址輸入框接收所述用戶輸入的所述設(shè)計稿頁面的網(wǎng)址或顯示所述設(shè)計稿頁面的已存的網(wǎng)址，包括：查找所述設(shè)計稿頁面的已存的網(wǎng)址；若查找到已存的所述網(wǎng)址，則將已存的所述網(wǎng)址顯示到所述網(wǎng)址輸入框中；若未查找到已存的所述網(wǎng)址，則通過所述網(wǎng)址輸入框接收所述用戶輸入的所述網(wǎng)址。