本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別涉及一種在移動(dòng)終端的瀏覽器內(nèi)加載web(worldwideweb，萬(wàn)維網(wǎng))頁(yè)面的方法及系統(tǒng)。

背景技術(shù)：

目前，ota(onlinetravelagent，在線旅行社)移動(dòng)端網(wǎng)站一般采用傳統(tǒng)的分頁(yè)面加載形式，用戶從表達(dá)搜索意向、瀏覽搜索結(jié)果、選擇意向訂單以及填寫訂單信息，每一步流程都需要跳轉(zhuǎn)新的頁(yè)面，每個(gè)頁(yè)面對(duì)應(yīng)獨(dú)立的url(uniformresourcelocator，統(tǒng)一資源定位符)。window.location對(duì)象用于獲得當(dāng)前頁(yè)面的地址(url)，并把瀏覽器重定向到新的頁(yè)面。

通過(guò)分頁(yè)面加載形式在webapp(基于web的系統(tǒng)和應(yīng)用)中切換頁(yè)面時(shí)，一方面，由于不同機(jī)型、不同瀏覽器的渲染技術(shù)差異，很容易出現(xiàn)白屏卡頓等不流暢的現(xiàn)象，嚴(yán)重影響用戶體驗(yàn)；另一方面，用戶切換到下一個(gè)頁(yè)面時(shí)，可能會(huì)因?yàn)榫W(wǎng)絡(luò)問(wèn)題加載時(shí)間過(guò)長(zhǎng)造成用戶的流失，導(dǎo)致頁(yè)面的跳失率變高。其中，跳失率是指顯示顧客通過(guò)相應(yīng)入口進(jìn)入，只訪問(wèn)了一個(gè)頁(yè)面就離開的訪問(wèn)次數(shù)占該頁(yè)面總訪問(wèn)次數(shù)的比例。

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

本發(fā)明要解決的技術(shù)問(wèn)題是為了克服現(xiàn)有技術(shù)中window.location頁(yè)面跳轉(zhuǎn)時(shí)存在卡頓、不流暢以及加載時(shí)間過(guò)長(zhǎng)等的缺陷，提供一種在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的方法及系統(tǒng)。

本發(fā)明是通過(guò)下述技術(shù)方案來(lái)解決上述技術(shù)問(wèn)題的：

一方面，本發(fā)明提供一種在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的方法，其特點(diǎn)在于，包括以下步驟：

將構(gòu)成目標(biāo)web頁(yè)面的不同元素封裝進(jìn)多個(gè)組件中，并將所述組件存儲(chǔ)于web服務(wù)器；

從所述web服務(wù)器獲取預(yù)設(shè)的組件，并加載包括所述預(yù)設(shè)的組件的初始web頁(yè)面；

根據(jù)訪問(wèn)web頁(yè)面的不同操作，從所述web服務(wù)器獲取與所述操作相對(duì)應(yīng)的目標(biāo)組件，并加載包括所述目標(biāo)組件的web頁(yè)面。

較佳地，通過(guò)ajax異步加載技術(shù)從所述web服務(wù)器獲取組件。

較佳地，加載web頁(yè)面的步驟包括：

按照所述瀏覽器的模板對(duì)獲取的組件進(jìn)行渲染；

加載包括渲染后的組件的web頁(yè)面。

較佳地，所述方法還包括：記錄訪問(wèn)web頁(yè)面的路徑，并根據(jù)所述路徑從所述web服務(wù)器獲取目標(biāo)組件。

較佳地，所述操作的類型包括點(diǎn)擊和/或手勢(shì)。

另一方面，本發(fā)明還提供一種在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的系統(tǒng)，其特點(diǎn)在于，包括：

封裝模塊，用于將構(gòu)成目標(biāo)web頁(yè)面的不同元素封裝進(jìn)多個(gè)組件中，并將所述組件存儲(chǔ)于web服務(wù)器；

初始化模塊，用于從所述web服務(wù)器獲取預(yù)設(shè)的組件，并加載包括所述預(yù)設(shè)的組件的初始web頁(yè)面；

處理模塊，用于根據(jù)訪問(wèn)web頁(yè)面的不同操作，從所述web服務(wù)器獲取與所述操作相對(duì)應(yīng)的目標(biāo)組件，并加載包括所述目標(biāo)組件的web頁(yè)面。

較佳地，所述初始化模塊和所述處理模塊均用于通過(guò)ajax異步加載技術(shù)從所述web服務(wù)器獲取組件。

較佳地，所述初始化模塊和所述處理模塊均用于通過(guò)以下方式加載web頁(yè)面：

按照所述瀏覽器的模板對(duì)獲取的組件進(jìn)行渲染；

加載包括渲染后的組件的web頁(yè)面。

較佳地，所述系統(tǒng)還包括記錄模塊，用于記錄訪問(wèn)web頁(yè)面的路徑；

所述處理模塊還用于根據(jù)所述路徑從所述web服務(wù)器獲取目標(biāo)組件。

較佳地，所述操作的類型包括點(diǎn)擊和/或手勢(shì)。

在符合本領(lǐng)域常識(shí)的基礎(chǔ)上，上述各優(yōu)選條件，可任意組合，即得本發(fā)明各較佳實(shí)例。

本發(fā)明的積極進(jìn)步效果在于：與現(xiàn)有技術(shù)相比，本發(fā)明利用單頁(yè)web框架技術(shù)，以組件為單位，將不同元素封裝進(jìn)不同組件，從而在用戶進(jìn)入任務(wù)頁(yè)時(shí)只加載最基本的元素，節(jié)約流量，提升了移動(dòng)終端的響應(yīng)速度；以及根據(jù)用戶訪問(wèn)web頁(yè)面的不同操作，通過(guò)在web頁(yè)面中加載不同的元素，使得用戶在任務(wù)操作過(guò)程中不會(huì)被頁(yè)面跳轉(zhuǎn)干擾，大大降低了移動(dòng)終端web頁(yè)面間跳轉(zhuǎn)出現(xiàn)的卡頓問(wèn)題，整個(gè)任務(wù)流程在一個(gè)頁(yè)面內(nèi)完成，有效提升了人機(jī)交互的效率和舒適度。

附圖說(shuō)明

圖1為本發(fā)明實(shí)施例的在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的方法流程圖。

圖2為本發(fā)明實(shí)施例的手機(jī)中加載的初始機(jī)票搜索頁(yè)面的示意圖。

圖3為本發(fā)明實(shí)施例的手機(jī)中加載的搜索結(jié)果頁(yè)面的示意圖。

圖4為本發(fā)明實(shí)施例的手機(jī)中加載的搜索結(jié)果頁(yè)面的另一示意圖。

圖5為本發(fā)明實(shí)施例的在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的系統(tǒng)的結(jié)構(gòu)框圖。

具體實(shí)施方式

下面通過(guò)實(shí)施例的方式進(jìn)一步說(shuō)明本發(fā)明，但并不因此將本發(fā)明限制在所述的實(shí)施例范圍之中。

本實(shí)施例提供一種在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的方法，如圖1所示，包括以下步驟：

步驟101、將構(gòu)成目標(biāo)web頁(yè)面的不同元素封裝進(jìn)多個(gè)組件中，并將所述組件存儲(chǔ)于web服務(wù)器。本實(shí)施例中的web服務(wù)器是指通過(guò)特定的接口和服務(wù)能夠與前端完成數(shù)據(jù)交互功能的服務(wù)器。通過(guò)存儲(chǔ)代碼的方式將組件存儲(chǔ)于web服務(wù)器中。

另外，本發(fā)明中的元素和組件均是web應(yīng)用的不同維度，類似后端開發(fā)中的接口和類，舉個(gè)例子，若將導(dǎo)航條看作是一個(gè)組件的話，導(dǎo)航條中的每個(gè)項(xiàng)目即為元素。需要說(shuō)明的是，本發(fā)明中不對(duì)元素和組件的劃分進(jìn)行限制，例如，對(duì)于導(dǎo)航條來(lái)說(shuō)，也可以將其看作是一個(gè)元素。

在可選的一種實(shí)施方式中，利用mocha框架(一種javascript測(cè)試框架)對(duì)代碼進(jìn)行自動(dòng)化測(cè)試和單元測(cè)試的覆蓋。單元測(cè)試即在編碼時(shí)同時(shí)編寫測(cè)試用例，每寫好一個(gè)組件則對(duì)該組件進(jìn)行對(duì)應(yīng)功能的測(cè)試和ui測(cè)試。

步驟102、從所述web服務(wù)器獲取預(yù)設(shè)的組件，并加載包括所述預(yù)設(shè)的組件的初始web頁(yè)面。其中，預(yù)設(shè)的組件中包含構(gòu)成初始web頁(yè)面的最基本的元素。舉個(gè)例子，用戶希望利用手機(jī)中的瀏覽器搜索機(jī)票，當(dāng)用戶進(jìn)入機(jī)票搜索頁(yè)時(shí)，加載的初始機(jī)票搜索頁(yè)面20如圖2中所示，只加載了最基本的一些元素，例如始發(fā)地、目的地、去程時(shí)間、搜索按鈕以及一些查詢選項(xiàng)(包括我的訂單、航班動(dòng)態(tài)、在線選座和發(fā)現(xiàn)低價(jià))等。用戶可以在圖2的初始機(jī)票搜索頁(yè)面中表達(dá)機(jī)票的搜索意向，例如可以通過(guò)選擇始發(fā)地、目的地和去程時(shí)間的方式表達(dá)機(jī)票的搜索意向。

步驟103、根據(jù)訪問(wèn)web頁(yè)面的不同操作，從所述web服務(wù)器獲取與所述操作相對(duì)應(yīng)的目標(biāo)組件，并加載包括所述目標(biāo)組件的web頁(yè)面。其中，所述操作的類型可以為點(diǎn)擊，例如單擊和雙擊，也可以為手勢(shì)，例如向上滑動(dòng)、向下滑動(dòng)、向左滑動(dòng)和向右滑動(dòng)等。

舉個(gè)例子，當(dāng)用戶單擊圖2中的搜索按鈕之后，加載的搜索結(jié)果頁(yè)面30如圖3所示，共有95條搜索結(jié)果，其中，當(dāng)前頁(yè)面只顯示了3條搜索結(jié)果。用戶可以通過(guò)單擊返回按鈕31的方式返回到圖2中。

在另一個(gè)例子中，當(dāng)用戶單擊圖2中的搜索按鈕之后，加載的搜索結(jié)果頁(yè)面40如圖4所示，用戶可以通過(guò)向下滑動(dòng)的手勢(shì)41返回到圖2中。

在上述例子中，采用本實(shí)施例提供的方法可以將包括用戶表達(dá)機(jī)票搜索意向、瀏覽機(jī)票搜索結(jié)果、選擇意向訂單以及填寫訂單信息的所有流程都整合在一個(gè)獨(dú)立的web頁(yè)面中實(shí)現(xiàn)，具體地，通過(guò)用戶對(duì)web頁(yè)面的不同操作，加載包括不同元素或組件的web頁(yè)面，這樣用戶在任務(wù)操作過(guò)程中不會(huì)被頁(yè)面跳轉(zhuǎn)所干擾。

在可選的一種實(shí)施方式中，通過(guò)ajax異步加載技術(shù)從所述web服務(wù)器獲取預(yù)設(shè)的組件。

在可選的一種實(shí)施方式中，加載web頁(yè)面(包括初始web頁(yè)面)的步驟包括：

按照所述瀏覽器的模板對(duì)獲取的組件進(jìn)行渲染；

加載包括渲染后的組件的web頁(yè)面。

在上述步驟101中，從web服務(wù)器獲取的組件的代碼可能是源碼，也可能是渲染后的html代碼。若為源碼，則需要按照移動(dòng)終端中瀏覽器的模板對(duì)源碼進(jìn)行渲染，即將源碼編譯成html代碼，以使其在移動(dòng)終端的瀏覽器內(nèi)顯示。通過(guò)在瀏覽器端請(qǐng)求服務(wù)加載數(shù)據(jù)后根據(jù)模板渲染成瀏覽器元素，減輕了web服務(wù)器端的渲染能力，增大了吞吐量。

傳統(tǒng)的web應(yīng)用開發(fā)都是前后端融合的，邏輯和表現(xiàn)沒(méi)有分離，后端直接在網(wǎng)頁(yè)模板中插值傳入數(shù)據(jù)最終渲染成頁(yè)面。在本發(fā)明可選的一種實(shí)施方式中，與restfulapi結(jié)合使用，實(shí)現(xiàn)了移動(dòng)終端與web服務(wù)器的分離，具體地，基于restfulapi的技術(shù)使得后端代碼只考慮如何跟數(shù)據(jù)庫(kù)交互把對(duì)應(yīng)的值取出來(lái)傳輸給前端，前端通過(guò)組件化的方式將數(shù)據(jù)和表現(xiàn)分離，把從后端拿到的數(shù)據(jù)插入到對(duì)應(yīng)的組件模板中，并渲染成最終頁(yè)面。

在可選的一種實(shí)施方式中，上述方法還包括：記錄訪問(wèn)web頁(yè)面的路徑，并根據(jù)所述路徑從所述web服務(wù)器獲取目標(biāo)組件。具體地，可以利用瀏覽器historyapi來(lái)記錄用戶訪問(wèn)web頁(yè)面的路徑，以路由為邏輯，在移動(dòng)終端記錄用戶瀏覽軌跡，寫入路由鏈路，從而可以實(shí)現(xiàn)用戶訪問(wèn)過(guò)程中的前進(jìn)、后退以及跳轉(zhuǎn)等邏輯，擴(kuò)展了原有瀏覽器的導(dǎo)航能力。

本實(shí)施例還提供一種在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的系統(tǒng)50，如圖5所示，包括封裝模塊51、初始化模塊52以及處理模塊53。下面對(duì)各個(gè)模塊的功能進(jìn)行詳細(xì)介紹。

封裝模塊用于將構(gòu)成目標(biāo)web頁(yè)面的不同元素封裝進(jìn)多個(gè)組件中，并將所述組件存儲(chǔ)于web服務(wù)器。

初始化模塊用于從所述web服務(wù)器獲取預(yù)設(shè)的組件，并加載包括所述預(yù)設(shè)的組件的初始web頁(yè)面。

處理模塊用于根據(jù)訪問(wèn)web頁(yè)面的不同操作，從所述web服務(wù)器獲取與所述操作相對(duì)應(yīng)的目標(biāo)組件，并加載包括所述目標(biāo)組件的web頁(yè)面。其中，所述操作的類型可以為點(diǎn)擊，例如單擊和雙擊，也可以為手勢(shì)，例如向上滑動(dòng)、向下滑動(dòng)、向左滑動(dòng)和向右滑動(dòng)等。

在可選的一種實(shí)施方式中，所述初始化模塊和所述處理模塊均用于通過(guò)ajax異步加載技術(shù)從所述web服務(wù)器獲取組件。

在可選的一種實(shí)施方式中，所述初始化模塊和所述處理模塊均用于通過(guò)以下方式加載web頁(yè)面：

按照所述瀏覽器的模板對(duì)獲取的組件進(jìn)行渲染；

加載包括渲染后的組件的web頁(yè)面。

在可選的一種實(shí)施方式中，上述在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的系統(tǒng)還包括記錄模塊，用于記錄訪問(wèn)web頁(yè)面的路徑。其中，所述處理模塊還用于根據(jù)所述路徑從所述web服務(wù)器獲取目標(biāo)組件。

在本發(fā)明提供的在移動(dòng)終端的瀏覽器內(nèi)加載web頁(yè)面的方法及系統(tǒng)中，極大程度地利用了移動(dòng)終端的本地存儲(chǔ)和緩存能力，將數(shù)據(jù)和資源緩存在移動(dòng)終端中，較好地避免了資源重復(fù)請(qǐng)求，提升了移動(dòng)終端的整體速度。與傳統(tǒng)的window.location頁(yè)面跳轉(zhuǎn)相比，本發(fā)明利用單頁(yè)web框架技術(shù)，以組件為單位，將不同元素封裝進(jìn)不同組件，從而在用戶進(jìn)入任務(wù)頁(yè)時(shí)只加載最基本的元素，節(jié)約流量，提升了移動(dòng)終端的響應(yīng)速度；以及根據(jù)用戶訪問(wèn)web頁(yè)面的不同操作，通過(guò)在web頁(yè)面中加載不同的元素，使得用戶在任務(wù)操作過(guò)程中不會(huì)被頁(yè)面跳轉(zhuǎn)干擾，大大降低了移動(dòng)終端web頁(yè)面間跳轉(zhuǎn)出現(xiàn)的卡頓問(wèn)題，整個(gè)任務(wù)流程在一個(gè)頁(yè)面內(nèi)完成，有效提升了人機(jī)交互的效率和舒適度。

雖然以上描述了本發(fā)明的具體實(shí)施方式，但是本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，這些僅是舉例說(shuō)明，本發(fā)明的保護(hù)范圍是由所附權(quán)利要求書限定的。本領(lǐng)域的技術(shù)人員在不背離本發(fā)明的原理和實(shí)質(zhì)的前提下，可以對(duì)這些實(shí)施方式做出多種變更或修改，但這些變更和修改均落入本發(fā)明的保護(hù)范圍。