本發(fā)明涉及計算機技術(shù)領(lǐng)域，特別是涉及一種頁面生成方法和裝置。

背景技術(shù)：

隨著計算機技術(shù)的發(fā)展，出現(xiàn)了各種類型的終端，這些終端上可以運行應(yīng)用程序，通過應(yīng)用程序生成頁面，從而通過該頁面?zhèn)鬟f信息并與用戶交互，方便了人們的生活和工作。

目前，生成頁面主要是在頁面代碼中定義頁面元素在頁面中以像素為單位的尺寸，從而按照預(yù)先定義的以像素為單位的尺寸繪制頁面元素，形成頁面。然而，當(dāng)在不同的顯示屏上采用相同的以像素為單位的尺寸繪制頁面元素時，呈現(xiàn)的頁面元素會因顯示屏的不同而呈現(xiàn)出不同的效果，兼容性差。

技術(shù)實現(xiàn)要素：

基于此，有必要針對目前在不同的顯示屏上采用相同的以像素為單位的尺寸繪制頁面元素兼容性差的問題，提供一種頁面生成方法和裝置。

一種頁面生成方法，包括：

獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼；

根據(jù)所述頁面結(jié)構(gòu)代碼，從公共組件庫中選擇公共組件；

根據(jù)所述頁面樣式代碼，獲取所述公共組件的像素級尺寸相對于顯示屏像素級尺寸的相對尺寸；

根據(jù)所述相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定所述公共組件的像素級尺寸；

按照所述公共組件的像素級尺寸繪制所述公共組件，形成頁面。

一種頁面生成裝置，包括：

代碼獲取模塊，用于獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼；

公共組件選擇模塊，用于根據(jù)所述頁面結(jié)構(gòu)代碼，從公共組件庫中選擇公共組件；

像素級尺寸確定模塊，用于根據(jù)所述頁面樣式代碼，獲取所述公共組件的像素級尺寸相對于顯示屏像素級尺寸的相對尺寸；根據(jù)所述相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定所述公共組件的像素級尺寸；

繪制模塊，用于按照所述公共組件的像素級尺寸繪制所述公共組件，形成頁面。

上述頁面生成方法和裝置，根據(jù)頁面結(jié)構(gòu)代碼，可以直接從公共組件庫中選擇公共組件，而不必在頁面結(jié)構(gòu)代碼中詳細定義每個頁面元素，節(jié)省頁面結(jié)構(gòu)代碼的代碼量，提高生成頁面的效率。而且，根據(jù)頁面樣式代碼，獲取公共組件相對于顯示屏像素級尺寸的相對尺寸，再利用相對尺寸和當(dāng)前的顯示屏像素級尺寸確定公共組件的像素級尺寸，進而據(jù)此繪制公共組件。因采用了相對尺寸，可自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。

附圖說明

圖1為一個實施例中頁面生成方法的應(yīng)用環(huán)境圖；

圖2為一個實施例中終端的結(jié)構(gòu)框圖；

圖3為一個實施例中頁面生成方法的流程示意圖；

圖4為一個實施例中操作系統(tǒng)、母應(yīng)用程序、子應(yīng)用程序以及子應(yīng)用程序的頁面之間關(guān)系的示意圖；

圖5為另一個實施例中頁面生成方法的流程示意圖；

圖6為一個實施例中頁面生成裝置的結(jié)構(gòu)框圖；

圖7為另一個實施例中頁面生成裝置的結(jié)構(gòu)框圖。

具體實施方式

為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對本發(fā)明進行進一步詳細說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

圖1為一個實施例中頁面生成方法的應(yīng)用環(huán)境圖。參照圖1，本實施例中該頁面生成方法應(yīng)用于一種應(yīng)用程序管理系統(tǒng)中。該應(yīng)用程序管理系統(tǒng)包括電子設(shè)備110、服務(wù)器120和終端130，且電子設(shè)備110和終端130均可通過網(wǎng)絡(luò)連接到服務(wù)器120。電子設(shè)備110和終端130可以是相同類型或者不同類型的物理設(shè)備，如個人計算機或者移動終端等。服務(wù)器120可以是獨立的物理服務(wù)器或者多個物理服務(wù)器構(gòu)成的服務(wù)器集群。

其中，電子設(shè)備110可用于編輯頁面結(jié)構(gòu)源代碼、頁面樣式源代碼和頁面邏輯源代碼，并將頁面結(jié)構(gòu)源代碼、頁面樣式源代碼和頁面邏輯源代碼發(fā)送至服務(wù)器120。服務(wù)器120將頁面結(jié)構(gòu)源代碼、頁面樣式源代碼和頁面邏輯源代碼分別編譯，分別獲得頁面結(jié)構(gòu)代碼、頁面樣式代碼和頁面邏輯代碼。終端130可從服務(wù)器120下載包括頁面結(jié)構(gòu)代碼、頁面樣式代碼和頁面邏輯代碼的程序包，從而根據(jù)程序包中的頁面結(jié)構(gòu)代碼和頁面樣式代碼生成頁面。頁面結(jié)構(gòu)代碼、頁面樣式代碼和頁面邏輯代碼均可以是腳本代碼，如JavaScript腳本代碼。

圖2為一個實施例中終端130的結(jié)構(gòu)框圖。參照圖2，該終端130包括通過系統(tǒng)總線連接的處理器、非易失性存儲介質(zhì)、內(nèi)存儲器、網(wǎng)絡(luò)接口、顯示屏和輸入裝置。其中，終端130的非易失性存儲介質(zhì)存儲有操作系統(tǒng)，還存儲有一種頁面生成裝置，該頁面生成裝置用于實現(xiàn)一種頁面生成方法。終端130的處理器用于提供計算和控制能力，支撐整個終端130的運行。終端130中的內(nèi)存儲器為非易失性存儲介質(zhì)中的頁面生成裝置的運行提供環(huán)境。該內(nèi)存儲器中可存儲有計算機可讀指令，該計算機可讀指令被處理器執(zhí)行時，可使得處理器執(zhí)行一種頁面生成方法。終端130的網(wǎng)絡(luò)接口用于與服務(wù)器進行網(wǎng)絡(luò)通信，如從服務(wù)器下載頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼等。終端130的顯示屏可以是液晶顯示屏或者電子墨水顯示屏，終端130的輸入裝置可以是顯示屏上覆蓋的觸摸層，也可以是終端130外殼上設(shè)置的按鍵、軌跡球或觸控板，還可以是外接的鍵盤、觸控板或鼠標(biāo)等。該終端130可以是個人計算機或者移動終端，移動終端包括手機、平板電腦、個人數(shù)字助理或者穿戴式設(shè)備等中的至少一種。本領(lǐng)域技術(shù)人員可以理解，圖2中示出的結(jié)構(gòu)，僅僅是與本申請方案相關(guān)的部分結(jié)構(gòu)的框圖，并不構(gòu)成對本申請方案所應(yīng)用于其上的終端的限定，具體的終端可以包括比圖中所示更多或更少的部件，或者組合某些部件，或者具有不同的部件布置。

圖3為一個實施例中頁面生成方法的流程示意圖。本實施例主要以該方法應(yīng)用于上述圖1中的終端130來舉例說明。參照圖3，該方法具體包括如下步驟：

S302，獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼。

其中，頁面結(jié)構(gòu)代碼是定義頁面組成的代碼。頁面結(jié)構(gòu)代碼可包括頁面所包括的公共組件的標(biāo)識。頁面樣式代碼是定義頁面樣式的代碼。

頁面樣式代碼至少定義了下述步驟S304和步驟S306中所涉及的相對尺寸。頁面樣式代碼還可以定義公共組件的顏色或背景圖像等其它樣式。頁面結(jié)構(gòu)代碼和頁面樣式代碼均對應(yīng)于相同的頁面。頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼可以記錄在不同或者相同的文件中。

具體地，終端可從服務(wù)器下載程序包，從而從程序包中獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼。終端也可以從本地直接獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼。

S304，根據(jù)頁面結(jié)構(gòu)代碼，從公共組件庫中選擇公共組件。

具體地，終端可執(zhí)行頁面結(jié)構(gòu)代碼，按照頁面結(jié)構(gòu)代碼中定義的公共組件的標(biāo)識，從公共組件庫中選擇與該標(biāo)識對應(yīng)的公共組件。公共組件庫存儲于終端本地，具體可在首次生成頁面時從服務(wù)器下載到本地。選擇的公共組件是頁面結(jié)構(gòu)代碼中定義的在生成頁面時所需的公共組件。其中，公共組件是不同應(yīng)用程序的頁面所共用的組件，具有視覺形態(tài)，是頁面的組成單元。公共組件具有唯一的標(biāo)識，可以是公共組件的名稱。公共組件可以是圖標(biāo)、文本容器、進度條、表單組件、導(dǎo)航組件、媒體組件、地圖組件或者畫布組件。表單組件可以包括按鈕、選擇框、表單以及開關(guān)等。

S306，根據(jù)頁面樣式代碼，獲取公共組件的像素級尺寸相對于顯示屏像素級尺寸的相對尺寸。

其中，像素級尺寸是指以像素為單位計量的尺寸。像素具體可以是邏輯像素或者物理像素。一個邏輯像素可以包括多于一個的物理像素，比如可以用4個物理像素表示一個邏輯像素。

具體地，頁面樣式代碼中，定義了與公共組件的標(biāo)識對應(yīng)的相對尺寸(可以用rpx表示相對尺寸的單位)，該相對尺寸表示了公共組件的像素級尺寸相對于顯示屏像素級尺寸的大小關(guān)系。終端可從頁面樣式代碼中，直接讀取與公共組件的標(biāo)識對應(yīng)的相對尺寸。

其中，相對尺寸可以直接采用公共組件的像素級尺寸與顯示屏像素級尺寸的比值。相對尺寸也可以為公共組件的像素級尺寸與顯示屏像素級尺寸的比值再乘以預(yù)設(shè)值。預(yù)設(shè)值為非零值，可以是正值。預(yù)設(shè)值可以小于或者大于1。預(yù)設(shè)值具體可以是750。公共組件的像素級尺寸包括公共組件的像素級寬度和像素級高度。

顯示屏像素級尺寸，是指以像素為單位(可以用px表示像素單位)計量的顯示屏的尺寸。顯示屏像素級尺寸可以是以像素為單位的顯示屏寬度，或者可以是以像素為單位的顯示屏高度。

S308，根據(jù)相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定公共組件的像素級尺寸。

其中，相對尺寸是固定的，因終端的不同會導(dǎo)致顯示屏像素級尺寸的不同，從而導(dǎo)致公共組件的像素級尺寸的不同。顯示屏像素級尺寸越大，公共組件的像素級尺寸越大；顯示屏像素級尺寸越小，公共組件的像素級尺寸越小。

具體地，當(dāng)相對尺寸為公共組件的像素級尺寸與顯示屏像素級尺寸的比值時，步驟S308包括：將相對尺寸乘以當(dāng)前的顯示屏像素級尺寸，得到公共組件的像素級尺寸。

在一個實施例中，當(dāng)相對尺寸為公共組件的像素級尺寸與顯示屏像素級尺寸的比值再乘以預(yù)設(shè)值時，步驟S308包括：將相對尺寸乘以當(dāng)前的顯示屏像素級尺寸再除以預(yù)設(shè)值，得到公共組件的像素級尺寸。

舉例說明，假設(shè)規(guī)定顯示屏寬度為750rpx，其中750為預(yù)設(shè)值，那么對于寬度為375px(邏輯像素)的顯示屏，750rpx＝375px，則1rpx＝0.5px；若該顯示屏的一個邏輯像素的寬度和高度分別為2個物理像素，則1rpx＝0.5px＝1物理像素。

進一步地，假設(shè)一個公共組件的相對尺寸包括相對寬度和相對高度，且相對寬度和相對高度均為200rpx；公共組件的像素級尺寸包括像素級寬度和像素級高度；當(dāng)前的顯示屏像素級尺寸為顯示屏像素級寬度。那么當(dāng)顯示屏像素級寬度為375px時，公共組件的像素級寬度和像素級高度均為200*375/750＝100px；當(dāng)顯示屏像素級寬度為315px，公共組件的像素級寬度和像素級高度均為200*315/750＝84px。這樣當(dāng)顯示屏尺寸不同時，公共組件的尺寸將會自適應(yīng)地調(diào)整，以適應(yīng)當(dāng)前的顯示屏。

S310，按照公共組件的像素級尺寸繪制公共組件，形成頁面。

具體地，終端可先確定公共組件在頁面中的位置，再在該位置處按照公共組件的像素級尺寸繪制公共組件，繪制的組件最終形成頁面。

在一個實施例中，終端可根據(jù)頁面中公共組件的數(shù)量自動確定位置。在一個實施例中，終端也可以獲取頁面樣式代碼中定義的相對位置，確定公共組件的像素級位置；相對位置表示公共組件的像素級位置相對于顯示屏像素級尺寸的相對關(guān)系。

上述頁面生成方法，根據(jù)頁面結(jié)構(gòu)代碼，可以直接從公共組件庫中選擇公共組件，而不必在頁面結(jié)構(gòu)代碼中詳細定義每個頁面元素，節(jié)省頁面結(jié)構(gòu)代碼的代碼量，提高生成頁面的效率。而且，根據(jù)頁面樣式代碼，獲取公共組件相對于顯示屏像素級尺寸的相對尺寸，再利用相對尺寸和當(dāng)前的顯示屏像素級尺寸確定公共組件的像素級尺寸，進而據(jù)此繪制公共組件。因采用了相對尺寸，可自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。

在一個實施例中，在步驟S308之后，該頁面生成方法還包括：將頁面結(jié)構(gòu)代碼轉(zhuǎn)換為包括公共組件的像素級尺寸的標(biāo)準(zhǔn)樣式格式數(shù)據(jù)；步驟S310包括：按照標(biāo)準(zhǔn)樣式格式數(shù)據(jù)繪制公共組件，形成頁面。

其中，標(biāo)準(zhǔn)樣式格式數(shù)據(jù)，是按照標(biāo)準(zhǔn)樣式格式記錄的樣式數(shù)據(jù)。標(biāo)準(zhǔn)樣式格式，具體如CSS(Cascading Style Sheets，層疊樣式表)或者XML(eXtensible Markup Language，可擴展標(biāo)記語言)。

具體地，終端可按照標(biāo)準(zhǔn)樣式格式，將頁面樣式代碼進行轉(zhuǎn)換，生成標(biāo)準(zhǔn)樣式格式數(shù)據(jù)。該標(biāo)準(zhǔn)樣式格式數(shù)據(jù)包括公共組件的像素級尺寸，還可以包括公共組件的顏色或者背景圖像等其它樣式數(shù)據(jù)。

終端在通過瀏覽器控件并按照標(biāo)準(zhǔn)樣式格式數(shù)據(jù)繪制公共組件時，按照公共組件的像素級尺寸繪制公共組件，從而渲染出頁面。其中，瀏覽器控件是具有網(wǎng)頁解析能力的控件。

本實施例中，將頁面樣式代碼轉(zhuǎn)換為包括公共組件的像素級尺寸的標(biāo)準(zhǔn)樣式格式數(shù)據(jù)，進而利用該標(biāo)準(zhǔn)樣式格式數(shù)據(jù)生成頁面，可進一步提高兼容性。

在一個實施例中，頁面樣式代碼根據(jù)采用相對尺寸計量公共組件的尺寸的自定義樣式格式數(shù)據(jù)生成。

其中，自定義樣式格式數(shù)據(jù)是按照自定義樣式格式記錄的樣式數(shù)據(jù)。自定義樣式格式，是電子設(shè)備、服務(wù)器和終端之間約定采用的樣式格式，具體是電子設(shè)備上的開發(fā)程序、服務(wù)器上的服務(wù)程序和終端上的母應(yīng)用程序所約定采用的樣式格式。自定義樣式格式支持相對尺寸。自定義樣式格式可以是在標(biāo)準(zhǔn)樣式格式基礎(chǔ)上進行局部調(diào)整而形成的樣式格式，如可在CSS基礎(chǔ)上調(diào)整形成自定義樣式格式。

具體地，電子設(shè)備可采用自定義樣式格式編輯頁面樣式源代碼，該頁面樣式源代碼包括自定義樣式格式數(shù)據(jù)，該自定義樣式格式數(shù)據(jù)中采用相對尺寸衡量公共組件的尺寸。電子設(shè)備將編輯完畢的頁面樣式源代碼發(fā)送至服務(wù)器，由服務(wù)器將該頁面樣式源代碼編譯為頁面樣式代碼。

本實施例中，采用相對尺寸計量公共組件的尺寸的自定義樣式格式數(shù)據(jù)，便于開發(fā)人員按照相對尺寸直接編輯自定義樣式格式數(shù)據(jù)，降低了開發(fā)難度，提高了開發(fā)效率。

在一個實施例中，在步驟S310之后，該頁面生成方法還包括：獲取用于觸發(fā)公共組件尺寸變化的事件；響應(yīng)于事件，獲取公共組件尺寸變化后相對于顯示屏像素級尺寸的相對尺寸；根據(jù)變化后的相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定變化后的公共組件的像素級尺寸；按照變化后的公共組件的像素級尺寸更新頁面中的公共組件。

其中，用于觸發(fā)公共組件尺寸變化的事件，是能夠?qū)е鹿步M件的尺寸發(fā)生變化的事件。事件類型具體可以是光標(biāo)點擊事件、光標(biāo)長按事件、觸摸點擊事件或者觸摸長按事件等任意的事件。用于觸發(fā)公共組件尺寸變化的事件具體可由開發(fā)人員設(shè)定，具體可設(shè)定在頁面邏輯代碼中。

舉例說明，假設(shè)公共組件的相對尺寸包括相對寬度和相對高度，且相對寬度和相對高度均為200rpx；公共組件尺寸變化后的相對寬度和相對高度分別變化為180rpx和150rpx；當(dāng)前的顯示屏像素級尺寸為顯示屏像素級寬度，該顯示屏像素級寬度為375px。公共組件的像素級寬度和像素級高度均為200*375/750＝100px，尺寸變化后的像素級寬度為180*375/750＝90px，尺寸變化后的像素級高度為150*375/750＝75px。

本實施例中，當(dāng)公共組件尺寸變化時，根據(jù)公共組件尺寸變化后的相對尺寸更新頁面中的該公共組件的尺寸，保證了各種顯示屏上的公共組件在變化時依然能夠保持基本一致的效果，進一步提高了兼容性。

在一個實施例中，步驟S304包括：通過子應(yīng)用程序，并根據(jù)頁面結(jié)構(gòu)代碼，從母應(yīng)用程序所提供的公共組件庫中選擇公共組件；子應(yīng)用程序運行于母應(yīng)用程序所提供的環(huán)境中，且母應(yīng)用程序運行于操作系統(tǒng)上。

其中，參照圖4，終端上運行操作系統(tǒng)，并在操作系統(tǒng)上運行母應(yīng)用程序，母應(yīng)用程序為子應(yīng)用程序的運行提供環(huán)境。終端在獲取到子應(yīng)用程序的程序包后，根據(jù)該程序包創(chuàng)建用于實現(xiàn)子應(yīng)用程序的子應(yīng)用程序邏輯層單元和相應(yīng)的子應(yīng)用程序視圖層單元。子應(yīng)用程序邏輯層單元可用于執(zhí)行程序包中的邏輯代碼。子應(yīng)用程序視圖層單元用于執(zhí)行程序包中的頁面結(jié)構(gòu)代碼，還可以執(zhí)行程序包中的頁面樣式代碼。

操作系統(tǒng)(Operating System，簡稱OS)是管理和控制終端硬件與軟件資源的計算機程序，是直接運行在終端裸機上的最基本的系統(tǒng)軟件，應(yīng)用程序需要在操作系統(tǒng)的支持下運行。操作系統(tǒng)可以是視窗(Windows)操作系統(tǒng)或Linux操作系統(tǒng)或者Mac OS(蘋果桌面操作系統(tǒng))等桌面操作系統(tǒng)，也可以是iOS(蘋果移動終端操作系統(tǒng))或者安卓(Android)操作系統(tǒng)等移動操作系統(tǒng)。

母應(yīng)用程序是承載子應(yīng)用程序的應(yīng)用程序，為子應(yīng)用程序的實現(xiàn)提供環(huán)境。母應(yīng)用程序是原生應(yīng)用程序。原生應(yīng)用程序是可直接運行于操作系統(tǒng)的應(yīng)用程序。母應(yīng)用程序可以是社交應(yīng)用程序、專門支持子應(yīng)用程序的專用應(yīng)用程序、文件管理應(yīng)用程序、郵件應(yīng)用程序或者游戲應(yīng)用程序等。社交應(yīng)用程序包括即時通信應(yīng)用、SNS(Social Network Service，社交網(wǎng)站)應(yīng)用或者直播應(yīng)用等。子應(yīng)用程序則是可在母應(yīng)用程序提供的環(huán)境中實現(xiàn)的應(yīng)用程序。子應(yīng)用程序具體可以是社交應(yīng)用程序、文件管理應(yīng)用程序、郵件應(yīng)用程序或者游戲應(yīng)用程序等。

子應(yīng)用程序邏輯層單元和相應(yīng)的子應(yīng)用程序視圖層單元用于實現(xiàn)子應(yīng)用程序?qū)嵗?。一個子應(yīng)用程序可由一個子應(yīng)用程序邏輯層單元以及至少一個子應(yīng)用程序視圖層單元實現(xiàn)。子應(yīng)用程序視圖層單元和子應(yīng)用程序的頁面可以是一一對應(yīng)關(guān)系。

子應(yīng)用程序視圖層單元用于組織子應(yīng)用程序的視圖并渲染。子應(yīng)用程序邏輯層單元用于處理子應(yīng)用程序及相應(yīng)的子應(yīng)用程序的頁面的數(shù)據(jù)處理邏輯。單元具體可以是進程或者線程，子應(yīng)用程序視圖層單元如子應(yīng)用程序視圖層線程，子應(yīng)用程序邏輯層單元如子應(yīng)用程序邏輯層線程。子應(yīng)用程序邏輯層單元可運行于虛擬機中。子應(yīng)用程序視圖層單元和子應(yīng)用程序邏輯層單元可通過母應(yīng)用程序原生單元中轉(zhuǎn)通信，母應(yīng)用程序原生單元是母應(yīng)用程序與子應(yīng)用程序通信的接口，母應(yīng)用程序原生單元可以是母應(yīng)用程序自身的線程或進程。各子應(yīng)用程序的頁面的屬于程序包的頁面邏輯代碼，可由子應(yīng)用程序邏輯層單元在啟動時進行注冊，并在需要該頁面邏輯代碼處理數(shù)據(jù)時執(zhí)行注冊的頁面邏輯代碼。

終端可通過子應(yīng)用程序視圖層單元并根據(jù)相應(yīng)子應(yīng)用程序的頁面的初始頁面數(shù)據(jù)和選擇的公共組件渲染頁面，并向子應(yīng)用程序邏輯層單元反饋初始渲染完成通知。終端通過子應(yīng)用程序邏輯層單元接收到初始渲染完成通知后，獲取頁面更新數(shù)據(jù)，將頁面更新數(shù)據(jù)發(fā)送至子應(yīng)用程序視圖層單元。終端通過子應(yīng)用程序視圖層單元并根據(jù)頁面更新數(shù)據(jù)重渲染頁面中更新的部分。

在一個實施例中，子應(yīng)用程序視圖層單元可在啟動時預(yù)加載公共資源，從而在接收到頁面的初始頁面數(shù)據(jù)后，根據(jù)渲染頁面所需的公共資源和頁面的初始頁面數(shù)據(jù)渲染頁面，并向子應(yīng)用程序邏輯層單元反饋初始渲染完成通知。其中，公共資源是指生成不同的子應(yīng)用程序的頁面所共用的資源，包括公共組件庫，還可以包括渲染引擎、公共的頁面結(jié)構(gòu)代碼或公共的樣式數(shù)據(jù)等。

頁面更新數(shù)據(jù)是用于將頁面進行更新渲染的數(shù)據(jù)。終端可通過子應(yīng)用程序邏輯層單元并根據(jù)頁面的邏輯代碼中定義的自動執(zhí)行代碼，自動生成頁面更新數(shù)據(jù)。終端也可以通過子應(yīng)用程序邏輯層單元在接收到子應(yīng)用程序視圖層單元發(fā)送的事件后，根據(jù)頁面的邏輯代碼對該事件進行響應(yīng)以生成相應(yīng)的頁面更新數(shù)據(jù)。

更新的部分是頁面中需要變化的部分，可以是相較于根據(jù)初始頁面數(shù)據(jù)渲染得到的頁面變化的部分，也可以是相較于前一次渲染的頁面變化的部分。具體地，終端可通過子應(yīng)用程序視圖層單元并基于根據(jù)初始頁面數(shù)據(jù)渲染得到的頁面進行重渲染，也可以基于前一次渲染的頁面進行重渲染。

本實施例中，公共組件是母應(yīng)用程序所提供的可供不同的子應(yīng)用程序共用的組件，具有視覺形態(tài)，是子應(yīng)用程序的頁面的組成單元。公共組件可通過相應(yīng)的公共組件標(biāo)識唯一標(biāo)識。不同的子應(yīng)用程序共用公共組件，具體可以是同時或者在不同時刻調(diào)用相同的公共組件。公共組件還可由母應(yīng)用程序和子應(yīng)用程序所共用。

公共組件庫可由子應(yīng)用程序視圖層單元在創(chuàng)建后進行初始化時從母應(yīng)用程序加載，從而在執(zhí)行步驟S304時，由子應(yīng)用程序視圖層單元，根據(jù)頁面結(jié)構(gòu)代碼，從該加載的公共組件庫中選擇公共組件。公共組件庫也可以由母應(yīng)用程序加載，從而在執(zhí)行步驟S304時，由子應(yīng)用程序視圖層單元，根據(jù)頁面結(jié)構(gòu)代碼，從該加載的公共組件庫中按需選擇公共組件。

本實施例中，母應(yīng)用程序可以依據(jù)不同的頁面結(jié)構(gòu)代碼和頁面樣式代碼，在該母應(yīng)用程序提供的環(huán)境中實現(xiàn)不同的子應(yīng)用程序。當(dāng)母應(yīng)用程序在運行時，便可以利用母程序提供的公共組件快速構(gòu)建子應(yīng)用程序的頁面，節(jié)省了安裝應(yīng)用程序的耗時，提高了應(yīng)用程序使用效率。

在一個實施例中，步驟S310包括：通過子應(yīng)用程序，按照公共組件的像素級尺寸，繪制公共組件，形成屬于子應(yīng)用程序的頁面。

具體地，終端可通過子應(yīng)用程序的子應(yīng)用程序視圖層單元，按照公共組件的像素級尺寸，繪制從公共組件庫中選擇的公共組件，生成屬于該子應(yīng)用程序的頁面。

本實施例中，在母應(yīng)用程序提供的環(huán)境中，各種子應(yīng)用程序可以根據(jù)頁面結(jié)構(gòu)代碼所指定的相對尺寸，自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。

在一個實施例中，步驟S310包括：通過子應(yīng)用程序，生成屬于子應(yīng)用程序的頁面，并在頁面中保留與公共組件的像素級尺寸匹配的空間；通過母應(yīng)用程序，按照公共組件的像素級尺寸，在空間中繪制公共組件。

具體地，終端可通過子應(yīng)用程序，繪制頁面中除了需要母應(yīng)用程序繪制的公共組件之外其他的頁面元素，該頁面元素可以是不需要母應(yīng)用程序繪制的公共組件，在公共組件的像素級位置處，按照公共組件的像素級尺寸預(yù)留空間。終端可通過母應(yīng)用程序，在預(yù)留的空間中，按照該公共組件的像素級尺寸繪制該公共組件。子應(yīng)用程序生成頁面并在頁面中保留空間的步驟，以及母應(yīng)用程序在保留的空間中繪制公共組件的步驟，兩個步驟的先后順序可以互換。需要母應(yīng)用程序繪制的公共組件，比如可以是調(diào)用母應(yīng)用程序外部接口的公共組件，也可以是繪制難度較高的公共組件。需要母應(yīng)用程序繪制的公共組件比如畫布組件和地圖組件。

本實施例中，通過母應(yīng)用程序和子應(yīng)用程序的協(xié)作，生成屬于子應(yīng)用程序的頁面，母應(yīng)用程序提供補充的渲染能力，可以避免因子應(yīng)用程序渲染能力不足而無法完成頁面渲染的問題。

如圖5所示，在一個具體的實施例中，一種頁面生成方法，具體包括如下步驟：

S502，通過母應(yīng)用程序，從服務(wù)器下載程序包。

S504，通過母應(yīng)用程序，根據(jù)程序包創(chuàng)建子應(yīng)用程序視圖層單元和相應(yīng)的子應(yīng)用程序邏輯層單元。

S506，通過子應(yīng)用程序視圖層單元，從母應(yīng)用程序預(yù)加載公共組件庫。

S508，通過子應(yīng)用程序視圖層單元，加載程序包中的頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼。

S510，通過子應(yīng)用程序視圖層單元，根據(jù)頁面結(jié)構(gòu)代碼，從預(yù)加載的公共組件庫中選擇公共組件。

S512，通過子應(yīng)用程序視圖層單元，根據(jù)頁面樣式代碼，獲取公共組件的像素級尺寸相對于顯示屏像素級尺寸的相對尺寸。相對尺寸為公共組件的像素級尺寸與顯示屏像素級尺寸的比值再乘以預(yù)設(shè)值。

S514，通過子應(yīng)用程序視圖層單元，將相對尺寸乘以當(dāng)前的顯示屏像素級尺寸再除以預(yù)設(shè)值，得到公共組件的像素級尺寸。

S516，通過子應(yīng)用程序視圖層單元，生成屬于子應(yīng)用程序的頁面，并在頁面中保留與公共組件的像素級尺寸匹配的空間。

S518，通過母應(yīng)用程序，按照公共組件的像素級尺寸，在保留的空間中繪制公共組件。該公共組件屬于該頁面。

S520，通過子應(yīng)用程序視圖層單元，獲取頁面中觸發(fā)的事件。

S522，通過子應(yīng)用程序邏輯層單元，對事件進行相應(yīng)，生成頁面更新數(shù)據(jù)。

S524，通過子應(yīng)用程序視圖層單元，根據(jù)頁面更新數(shù)據(jù)更新頁面。

本實施例中，根據(jù)頁面結(jié)構(gòu)代碼，可以直接從公共組件庫中選擇公共組件，而不必在頁面結(jié)構(gòu)代碼中詳細定義每個頁面元素，節(jié)省頁面結(jié)構(gòu)代碼的代碼量，提高生成頁面的效率。而且，根據(jù)頁面樣式代碼，獲取公共組件相對于顯示屏像素級尺寸的相對尺寸，再利用相對尺寸和當(dāng)前的顯示屏像素級尺寸確定公共組件的像素級尺寸，進而據(jù)此繪制公共組件。因采用了相對尺寸，可自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。母應(yīng)用程序可以依據(jù)不同的頁面結(jié)構(gòu)代碼和頁面樣式代碼，在該母應(yīng)用程序提供的環(huán)境中實現(xiàn)不同的子應(yīng)用程序。當(dāng)母應(yīng)用程序在運行時，便可以利用母程序提供的公共組件快速構(gòu)建子應(yīng)用程序的頁面，節(jié)省了安裝應(yīng)用程序的耗時，提高了應(yīng)用程序使用效率。

圖6為一個實施例中頁面生成裝置600的結(jié)構(gòu)框圖。參照圖6，該頁面生成裝置包括：代碼獲取模塊601、公共組件選擇模塊602、像素級尺寸確定模塊603和繪制模塊604。

代碼獲取模塊601，用于獲取頁面結(jié)構(gòu)代碼和相應(yīng)的頁面樣式代碼。

公共組件選擇模塊602，用于根據(jù)頁面結(jié)構(gòu)代碼，從公共組件庫中選擇公共組件。

像素級尺寸確定模塊603，用于根據(jù)頁面樣式代碼，獲取公共組件的像素級尺寸相對于顯示屏像素級尺寸的相對尺寸。根據(jù)相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定公共組件的像素級尺寸。

繪制模塊604，用于按照公共組件的像素級尺寸繪制公共組件，形成頁面。

上述頁面生成裝置600，根據(jù)頁面結(jié)構(gòu)代碼，可以直接從公共組件庫中選擇公共組件，而不必在頁面結(jié)構(gòu)代碼中詳細定義每個頁面元素，節(jié)省頁面結(jié)構(gòu)代碼的代碼量，提高生成頁面的效率。而且，根據(jù)頁面樣式代碼，獲取公共組件相對于顯示屏像素級尺寸的相對尺寸，再利用相對尺寸和當(dāng)前的顯示屏像素級尺寸確定公共組件的像素級尺寸，進而據(jù)此繪制公共組件。因采用了相對尺寸，可自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。

在一個實施例中，相對尺寸為公共組件的像素級尺寸與顯示屏像素級尺寸的比值再乘以預(yù)設(shè)值。

像素級尺寸確定模塊603還用于將相對尺寸乘以當(dāng)前的顯示屏像素級尺寸再除以預(yù)設(shè)值，得到公共組件的像素級尺寸。

在一個實施例中，顯示屏像素級尺寸為以像素為單位的顯示屏寬度或以像素為單位的顯示屏高度。

如圖7所示，在一個實施例中，頁面生成裝置600還包括：標(biāo)準(zhǔn)樣式格式數(shù)據(jù)生成模塊605，用于將頁面結(jié)構(gòu)代碼轉(zhuǎn)換為包括公共組件的像素級尺寸的標(biāo)準(zhǔn)樣式格式數(shù)據(jù)。繪制模塊604還用于按照標(biāo)準(zhǔn)樣式格式數(shù)據(jù)繪制公共組件，形成頁面。

本實施例中，將頁面樣式代碼轉(zhuǎn)換為包括公共組件的像素級尺寸的標(biāo)準(zhǔn)樣式格式數(shù)據(jù)，進而利用該標(biāo)準(zhǔn)樣式格式數(shù)據(jù)生成頁面，可進一步提高兼容性。

在一個實施例中，頁面樣式代碼根據(jù)采用相對尺寸計量公共組件的尺寸的自定義樣式格式數(shù)據(jù)生成。

本實施例中，采用相對尺寸計量公共組件的尺寸的自定義樣式格式數(shù)據(jù)，便于開發(fā)人員按照相對尺寸直接編輯自定義樣式格式數(shù)據(jù)，降低了開發(fā)難度，提高了開發(fā)效率。

在一個實施例中，頁面生成裝置600還包括：事件處理模塊606，用于獲取用于觸發(fā)公共組件尺寸變化的事件；響應(yīng)于事件，獲取公共組件尺寸變化后相對于顯示屏像素級尺寸的相對尺寸。

像素級尺寸確定模塊603還用于根據(jù)變化后的相對尺寸和當(dāng)前的顯示屏像素級尺寸，確定變化后的公共組件的像素級尺寸。

繪制模塊604還用于按照變化后的公共組件的像素級尺寸更新頁面中的公共組件。

本實施例中，當(dāng)公共組件尺寸變化時，根據(jù)公共組件尺寸變化后的相對尺寸更新頁面中的該公共組件的尺寸，保證了各種顯示屏上的公共組件在變化時依然能夠保持基本一致的效果，進一步提高了兼容性。

在一個實施例中，公共組件選擇模塊602還用于通過子應(yīng)用程序，并根據(jù)頁面結(jié)構(gòu)代碼，從母應(yīng)用程序所提供的公共組件庫中選擇公共組件；子應(yīng)用程序運行于母應(yīng)用程序所提供的環(huán)境中，且母應(yīng)用程序運行于操作系統(tǒng)上。

本實施例中，母應(yīng)用程序可以依據(jù)不同的頁面結(jié)構(gòu)代碼和頁面樣式代碼，在該母應(yīng)用程序提供的環(huán)境中實現(xiàn)不同的子應(yīng)用程序。當(dāng)母應(yīng)用程序在運行時，便可以利用母程序提供的公共組件快速構(gòu)建子應(yīng)用程序的頁面，節(jié)省了安裝應(yīng)用程序的耗時，提高了應(yīng)用程序使用效率。

在一個實施例中，繪制模塊604還用于通過子應(yīng)用程序，按照公共組件的像素級尺寸，繪制公共組件，形成屬于子應(yīng)用程序的頁面。

本實施例中，在母應(yīng)用程序提供的環(huán)境中，各種子應(yīng)用程序可以根據(jù)頁面結(jié)構(gòu)代碼所指定的相對尺寸，自適應(yīng)調(diào)整公共組件的尺寸，在不同的顯示屏上都可以顯示出基本一致的效果，避免了因顯示屏差異而導(dǎo)致的在呈現(xiàn)頁面時的兼容性問題。

在一個實施例中，繪制模塊604還用于通過子應(yīng)用程序，生成屬于子應(yīng)用程序的頁面，并在頁面中保留與公共組件的像素級尺寸匹配的空間；通過母應(yīng)用程序，按照公共組件的像素級尺寸，在空間中繪制公共組件。

本實施例中，通過母應(yīng)用程序和子應(yīng)用程序的協(xié)作，生成屬于子應(yīng)用程序的頁面，母應(yīng)用程序提供補充的渲染能力，可以避免因子應(yīng)用程序渲染能力不足而無法完成頁面渲染的問題。

本領(lǐng)域普通技術(shù)人員可以理解實現(xiàn)上述實施例方法中的全部或部分流程，是可以通過計算機程序來指令相關(guān)的硬件來完成，該計算機程序可存儲于一計算機可讀取存儲介質(zhì)中，該程序在執(zhí)行時，可包括如上述各方法的實施例的流程。其中，前述的存儲介質(zhì)可為磁碟、光盤、只讀存儲記憶體(Read-Only Memory，ROM)等非易失性存儲介質(zhì)，或隨機存儲記憶體(Random Access Memory，RAM)等。

以上實施例的各技術(shù)特征可以進行任意的組合，為使描述簡潔，未對上述實施例中的各個技術(shù)特征所有可能的組合都進行描述，然而，只要這些技術(shù)特征的組合不存在矛盾，都應(yīng)當(dāng)認(rèn)為是本說明書記載的范圍。

以上實施例僅表達了本發(fā)明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進，這些都屬于本發(fā)明的保護范圍。因此，本發(fā)明專利的保護范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。