[發(fā)明專利]網(wǎng)頁(yè)描述方法和裝置

在審

• 申請(qǐng)?zhí)枺?/td>: 201610289205.5
• 申請(qǐng)日: 2016-05-04
• 公開（公告）號(hào): CN107346306A
• 公開（公告）日: 2017-11-14
• 發(fā)明（設(shè)計(jì)）人: 唐超
• 申請(qǐng)（專利權(quán)）人: 北京京東尚科信息技術(shù)有限公司;北京京東世紀(jì)貿(mào)易有限公司
• 主分類號(hào): G06F17/30
• 分類號(hào): G06F17/30
• 代理公司: 北京英賽嘉華知識(shí)產(chǎn)權(quán)代理有限責(zé)任公司11204
• 代理人: 王達(dá)佐,馬曉亞

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

本申請(qǐng)涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，具體涉及一種網(wǎng)頁(yè)描述方法和裝置。

背景技術(shù)

當(dāng)前的很多運(yùn)營(yíng)網(wǎng)站，都允許用戶對(duì)圖片進(jìn)行自定義布局設(shè)計(jì)，從而顯示設(shè)計(jì)后的網(wǎng)頁(yè)，提升網(wǎng)頁(yè)的瀏覽質(zhì)量。用戶可以通過(guò)上傳不同的圖片素材，進(jìn)行拖放以及配置操作，就可以實(shí)現(xiàn)自定義布局的、由多張圖片組成的網(wǎng)頁(yè)，如圖1所示。

但上述對(duì)圖片的自定義布局設(shè)計(jì)是在瀏覽器頁(yè)面中運(yùn)行的，所以得到的自定義布局圖片就是用HTML(Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言)語(yǔ)言或CSS(Cascading Style Sheets，層疊樣式表)來(lái)描述的，只能在瀏覽器中查看運(yùn)行。但人們對(duì)包含自定義布局圖片的網(wǎng)頁(yè)的期望是不僅僅是能在瀏覽器中查看運(yùn)行，還要能在不同移動(dòng)操作系統(tǒng)(如android、IOS)的APP(Application，應(yīng)用程序)中也可以查看運(yùn)行。但因?yàn)椴煌僮飨到y(tǒng)使用的描述語(yǔ)言不同，相互之間存在不兼容的問(wèn)題。因此，需要將包含自定義布局圖片的網(wǎng)頁(yè)轉(zhuǎn)換為不同平臺(tái)都可以解析的數(shù)據(jù)格式，即需要一種包含自定義布局圖片的網(wǎng)頁(yè)描述方法。

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

本申請(qǐng)的目的在于提供一種網(wǎng)頁(yè)描述方法和裝置，來(lái)滿足上述背景技術(shù)部分提到的需求。

第一方面，本申請(qǐng)?zhí)峁┝艘环N網(wǎng)頁(yè)描述方法，所述方法包括：獲取包含自定義布局圖片的網(wǎng)頁(yè)的源代碼，所述源代碼包括：所述自定義布局圖片中各子圖片的標(biāo)識(shí)信息、鏈接信息以及布局信息；對(duì)所述 布局信息進(jìn)行解析，確定所述各子圖片在其所屬自定義布局圖片中的比例信息；按照預(yù)設(shè)的代碼轉(zhuǎn)換規(guī)則，將所述源代碼以及所述比例信息轉(zhuǎn)換為JSON數(shù)據(jù)。

在一些實(shí)施例中，所述對(duì)所述布局信息進(jìn)行解析，確定所述各子圖片在其所屬自定義布局圖片中的比例信息，包括：確定所述自定義布局圖片在所屬網(wǎng)頁(yè)中的第一面積參數(shù)，所述第一面積參數(shù)包括第一高度和第一寬度；分析所述布局信息，提取所述各子圖片的位置坐標(biāo)和第二面積參數(shù)，所述第二面積參數(shù)包括第二高度和第二寬度；根據(jù)所述第一面積參數(shù)、所述位置坐標(biāo)以及所述第二面積參數(shù)，確定所述各子圖片在其所屬自定義布局圖片中的比例信息。

在一些實(shí)施例中，所述根據(jù)所述第一面積參數(shù)、所述位置坐標(biāo)以及所述第二面積參數(shù)，確定所述各子圖片在其所屬自定義布局圖片中的比例信息，包括：確定由所述第一高度和所述第一寬度構(gòu)成的第一矩形的四條邊分別為所述自定義布局圖片的第一上邊、第一底邊、第一左邊和第一右邊；確定由所述第二高度和所述第二寬度構(gòu)成的第二矩形的四條邊分別為所述各子圖片的第二上邊、第二底邊、第二左邊和第二右邊；確定所述第二上邊與所述第一上邊之間的距離占所述第一高度的百分比為所述各子圖片的top值，確定所述第二底邊與所述第一底邊之間的距離占所述第一高度的百分比為所述各子圖片的bottom值，確定所述第二左邊與所述第一左邊之間的距離占所述第一寬度的百分比為所述各子圖片的left值，確定所述第二右邊與所述第一右邊之間的距離占所述第一寬度的百分比為所述各子圖片的right值。

在一些實(shí)施例中，所述按照預(yù)設(shè)的代碼轉(zhuǎn)換規(guī)則，將所述源代碼以及所述比例信息轉(zhuǎn)換為JSON數(shù)據(jù)，包括：利用JavaScript腳本語(yǔ)言將所述源代碼及所述比例信息轉(zhuǎn)換為JSON數(shù)據(jù)。

在一些實(shí)施例中，所述方法還包括：將所述JSON數(shù)據(jù)提交至服務(wù)器，以供所述服務(wù)器將所述JSON數(shù)據(jù)存儲(chǔ)至數(shù)據(jù)庫(kù)中。

在一些實(shí)施例中，所述方法還包括：向所述服務(wù)器發(fā)送對(duì)所述包含自定義布局圖片的網(wǎng)頁(yè)的請(qǐng)求；響應(yīng)于接收到所述服務(wù)器返回的所 述JSON數(shù)據(jù)，對(duì)所述JSON數(shù)據(jù)進(jìn)行換算，確定所述布局信息；基于所述布局信息，顯示所述包含自定義布局圖片的網(wǎng)頁(yè)。

第二方面，本申請(qǐng)?zhí)峁┮环N網(wǎng)頁(yè)描述裝置，所述裝置包括：獲取單元，用于獲取包含自定義布局圖片的網(wǎng)頁(yè)的源代碼，所述源代碼包括：所述自定義布局圖片中各子圖片的標(biāo)識(shí)信息、鏈接信息以及布局信息；解析單元，用于對(duì)所述布局信息進(jìn)行解析，確定所述各子圖片在其所屬自定義布局圖片中的比例信息；轉(zhuǎn)換單元，用于按照預(yù)設(shè)的代碼轉(zhuǎn)換規(guī)則，將所述源代碼以及所述比例信息轉(zhuǎn)換為JSON數(shù)據(jù)。