專利名稱：將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法、系統(tǒng)和裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法、系統(tǒng)和裝置。
背景技術(shù)：
隨著移動(dòng)終端的普及和智能化，越來越多的用戶使用移動(dòng)終端瀏覽網(wǎng)頁。但是移動(dòng)終端設(shè)備的屏幕分辨率大小不等，適配開發(fā)成本大。并且移動(dòng)終端設(shè)備的CPU處理性能低，內(nèi)存小。因此有些網(wǎng)站網(wǎng)頁并不適合在移動(dòng)終端直接進(jìn)行顯示，需要二次開發(fā)，在開發(fā)設(shè)計(jì)時(shí)要考慮到移動(dòng)終端的軟硬件因素。傳統(tǒng)的方法有針對某些網(wǎng)站進(jìn)行改進(jìn)的，但是沒有普適性。每一個(gè)傳統(tǒng)的網(wǎng)站網(wǎng)頁都對應(yīng)一個(gè)HTML頁面，每次用戶點(diǎn)擊一個(gè)新的鏈接，瀏覽器的URL發(fā)生變化時(shí)，都要重新刷新一次頁面。一些體驗(yàn)良好的網(wǎng)站會(huì)使用Ajax技術(shù)進(jìn)行頁面的動(dòng)態(tài)加載和局部刷新，這種方式可以一定程度減少用戶的等待時(shí)間，節(jié)省了重復(fù)加載的流量。但是這些對于流量敏感，功能有限的移動(dòng)終端來講，這種優(yōu)化的程度還不夠，用戶還是會(huì)在切換和加載過程中出現(xiàn)空白，需要較長等待時(shí)間，并且有時(shí)加載的頁面也不適合在移動(dòng)終端進(jìn)行顯示?，F(xiàn)有技術(shù)在流量、電量和時(shí)間方面都有很大的優(yōu)化空間
發(fā)明內(nèi)容
本發(fā)明旨在至少解決現(xiàn)有技術(shù)中存在的技術(shù)問題之一。為此，本發(fā)明的一個(gè)目的在于提出一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法。本方法提出一種快速無損的將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App的方法，充分優(yōu)化流量，頁面切換流暢，減少用戶等待時(shí)間，改善了在移動(dòng)終端瀏覽網(wǎng)頁的用戶體驗(yàn)。本發(fā)明的第二個(gè)目的在于提出一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)。本發(fā)明的第三個(gè)目的在于提出一種云端服務(wù)器。本發(fā)明的第四個(gè)目的在于提出一種移動(dòng)終端。為達(dá)到上述目的，本發(fā)明第一方面的實(shí)施例提出了一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法，包括以下步驟云端服務(wù)器獲得網(wǎng)站的域名，并根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型；所述云端服務(wù)器分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，所述多個(gè)前端模板與所述網(wǎng)站的標(biāo)識(shí)相關(guān)；所述云端服務(wù)器接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息；所述云端服務(wù)器將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，以供所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)；所述云端服務(wù)器將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法可以快速簡便的將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App，減少了對移動(dòng)終端進(jìn)行二次開發(fā)的成本，同時(shí)保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)eb App瀏覽體驗(yàn)。本方法只加載一次網(wǎng)站殼架構(gòu)，將其它用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間，在移動(dòng)終端瀏覽網(wǎng)頁更加流暢，改善了用戶體驗(yàn)，節(jié)省了人力成本。在本發(fā)明的一個(gè)實(shí)施例中，還包括當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí)，所述網(wǎng)站殼架構(gòu)劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求；所述網(wǎng)站殼架構(gòu)分析所述鏈接的內(nèi)容數(shù)據(jù)和類型；當(dāng)所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。對于全局的HTML前端模板，Java Script代碼和CSS代碼只加載一次,其他局部的JavaScript和CSS代碼按需加載,在不使用時(shí)不加載。在本發(fā)明的一個(gè)實(shí)施例中，還包括所述云端服務(wù)器根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲·得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端；所述移動(dòng)終端將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。在本發(fā)明的一個(gè)實(shí)施例中，還包括當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。在本發(fā)明的一個(gè)實(shí)施例中，所述前端模板中包括頁面布局信息和多個(gè)組件模板信
息在本發(fā)明的一個(gè)實(shí)施例中，所述移動(dòng)終端對獲得的多個(gè)組件模板信息進(jìn)行緩存。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端，可以減少請求次數(shù)和響應(yīng)時(shí)間，節(jié)省流量，使得用戶體驗(yàn)更加流暢。本方法在本發(fā)明的一個(gè)實(shí)施例中，還包括所述網(wǎng)站殼架構(gòu)對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記；當(dāng)所述網(wǎng)站殼架構(gòu)接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。加載的頁面切換流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。在本發(fā)明的一個(gè)實(shí)施例中，還包括所述網(wǎng)站殼架構(gòu)將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面進(jìn)行緩存。緩存使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，節(jié)省了流量，加快了響應(yīng)速度。本發(fā)明第二方面的實(shí)施例提出了一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)，包括開發(fā)者客戶端、云端服務(wù)器和移動(dòng)終端，其中，所述開發(fā)者客戶端，用于提供網(wǎng)站，并將所述網(wǎng)站的域名發(fā)送至所述云端服務(wù)器；所述云端服務(wù)器，用于根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，并分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，每個(gè)網(wǎng)頁具有不同的類型，所述多個(gè)前端模板與所述網(wǎng)站的標(biāo)識(shí)相關(guān)，以及接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息，并將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，并在所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)之后，將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端；所述移動(dòng)終端，用于將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)可以快速簡便的將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App，減少了對移動(dòng)終端進(jìn)行二次開發(fā)的成本，同時(shí)保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)eb App瀏覽體驗(yàn)。本方法只加載一次網(wǎng)站殼架構(gòu)，將其它用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間，在移動(dòng)終端瀏覽網(wǎng)頁更加流暢，改善了用戶體驗(yàn)，節(jié)省了人力成本。在本發(fā)明的一個(gè)實(shí)施例中，所述移動(dòng)終端包括請求模塊，用于向所述云端服務(wù)器發(fā)送訪問請求消息；接收模塊，用于接收云端服務(wù)器發(fā)送的所述網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)，以及所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊，用于與所述移動(dòng)終端中的瀏覽器相互通信，將所述瀏覽器生成的訪問請求中添加所述網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至所述云端服務(wù)器；加載模塊，用于接收所述云端服務(wù)器反饋的前端模板和內(nèi)容數(shù)據(jù)，并將所述內(nèi)容數(shù)據(jù)加載至所述前端模板；渲染模塊，用于選擇加載之后的所述前端模板。在本發(fā)明的一個(gè)實(shí)施例中，當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí),所述網(wǎng)站殼架構(gòu)模塊還用于劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求，并分析所述鏈接的內(nèi)容數(shù)據(jù)和類型，以及在所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。對于全局的HTML前端模板，JavaScript代碼和CSS代碼只加載一次，其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。在本發(fā)明的一個(gè)實(shí)施例中，所述云端服務(wù)器還用于根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，所述移動(dòng)終端還用于 將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。在本發(fā)明的一個(gè)實(shí)施例中，當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，所述網(wǎng)站殼架構(gòu)模塊關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。在本發(fā)明的一個(gè)實(shí)施例中，所述前端模板中包括頁面布局信息和多個(gè)組件模板信
肩、O在本發(fā)明的一個(gè)實(shí)施例中，所述移動(dòng)終端還包括緩存模塊，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端，可以減少請求次數(shù)和響應(yīng)時(shí)間，節(jié)省流量，使得用戶體驗(yàn)更加流暢。在本發(fā)明的一個(gè)實(shí)施例中，所述網(wǎng)站殼架構(gòu)模塊還用于對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記，并在所述網(wǎng)站殼架構(gòu)模塊接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。加載的頁面切換流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。在本發(fā)明的一個(gè)實(shí)施例中，所述網(wǎng)站殼架構(gòu)還用于將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。緩存使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，節(jié)省了流量，加快了響應(yīng)速度。本發(fā)明第三方面的實(shí)施例提出了一種云端服務(wù)器，包括接收模塊、抓取模塊、模板管理模塊、請求接收模塊和控制模塊。接收模塊用于接收網(wǎng)站域名；抓取模塊用于根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型；模板管理模塊用于分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫；請求接收模塊用于接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息；控制模塊用于將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，并在所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)之后，將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。根據(jù)本發(fā)明實(shí)施例的云端服務(wù)器可以快速簡便的將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App，減少了對移動(dòng)終端進(jìn)行二次開發(fā)的成本，同時(shí)保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)eb App瀏覽體驗(yàn)。本云端服務(wù)器提供的Web App只加載一次網(wǎng)站殼架構(gòu)，將其它用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間，在移動(dòng)終端瀏覽網(wǎng)頁更加流暢，改善了用戶體驗(yàn)，節(jié)省了人力成本。在本發(fā)明的一個(gè)實(shí)施例中，所述接收模塊還用于當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí)，接收所述移動(dòng)終端發(fā)送的所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL，所述控制模塊還用于根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。在本發(fā)明的一個(gè)實(shí)施例中，所述前端模板中包括頁面布局信息和多個(gè)組件模板信`肩、O本發(fā)明第四方面的實(shí)施例提出了一種移動(dòng)終端，包括請求模塊、接收模塊、網(wǎng)站殼架構(gòu)模塊、加載模塊和渲染模塊。請求模塊用于向云端服務(wù)器發(fā)送訪問請求消息；接收模塊用于接收云端服務(wù)器發(fā)送的所述網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)，以及所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊用于與所述移動(dòng)終端中的瀏覽器相互通信，將所述瀏覽器生成的訪問請求中添加所述網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至所述云端服務(wù)器；力口載模塊用于接收所述云端服務(wù)器反饋的前端模板和內(nèi)容數(shù)據(jù)，并將所述內(nèi)容數(shù)據(jù)加載至所述前端模板；渲染模塊用于選擇加載之后的所述前端模板。根據(jù)本發(fā)明實(shí)施例的移動(dòng)終端顯示云端服務(wù)器轉(zhuǎn)換的適合移動(dòng)終端瀏覽的WebApp，只加載一次網(wǎng)站殼架構(gòu)，將其它用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間，瀏覽網(wǎng)頁更加流暢，改善了用戶體驗(yàn)，節(jié)省了人力成本。在本發(fā)明的一個(gè)實(shí)施例中，當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí),所述網(wǎng)站殼架構(gòu)模塊還用于劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求，并分析所述鏈接的內(nèi)容數(shù)據(jù)和類型，以及在所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。對于全局的HTML前端模板，JavaScript代碼和CSS代碼只加載一次，其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。在本發(fā)明的一個(gè)實(shí)施例中，當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，所述網(wǎng)站殼架構(gòu)模塊關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。在本發(fā)明的一個(gè)實(shí)施例中，所述前端模板中包括頁面布局信息和多個(gè)組件模板信
肩、O在本發(fā)明的一個(gè)實(shí)施例中，還包括緩存模塊，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端，可以減少請求次數(shù)和響應(yīng)時(shí)間，節(jié)省流量，使得用戶體驗(yàn)更加流暢。在本發(fā)明的一個(gè)實(shí)施例中，所述網(wǎng)站殼架構(gòu)模塊還用于對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記，并在所述網(wǎng)站殼架構(gòu)模塊接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。加載的頁面切換流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。在本發(fā)明的一個(gè)實(shí)施例中，所述網(wǎng)站殼架構(gòu)還用于將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。緩存使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，節(jié)省了流量，加快了響應(yīng)速度。本發(fā)明的附加方面和優(yōu)點(diǎn)將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過本發(fā)明的實(shí)踐了解到。



本發(fā)明的上述和/或附加的方面和優(yōu)點(diǎn)從結(jié)合下面附圖對實(shí)施例的描述中將變得明顯和容易理解，其中圖1是根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法流程圖；圖2是傳統(tǒng)網(wǎng)頁和根據(jù)本發(fā)明實(shí)施例的Web App的對比示意圖；圖3是根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)的結(jié)構(gòu)示意圖；圖4是根據(jù)本發(fā)明實(shí)施例的云端服務(wù)器的結(jié)構(gòu)示意圖；和圖5是根據(jù)本發(fā)明實(shí)施例的移動(dòng)終端的結(jié)構(gòu)示意圖。
具體實(shí)施例方式下面詳細(xì)描述本發(fā)明的實(shí)施例，所述實(shí)施例的示例在附圖中示出，其中自始至終相同或類似的標(biāo)號(hào)表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附圖描述的實(shí)施例是示例性的，僅用于解釋本發(fā)明，而不能理解為對本發(fā)明的限制。下面參考圖1描述根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法，包括以下步驟步驟SllO :云端服務(wù)器獲得網(wǎng)站的域名，并根據(jù)網(wǎng)站的域名抓取網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型。例如，可以由網(wǎng)站站長輸入需要建站的網(wǎng)站的域名，云端服務(wù)器根據(jù)獲得網(wǎng)站的域名自動(dòng)抓取出具有不同的類型的多個(gè)網(wǎng)頁，對于同一類型的網(wǎng)頁，一般只進(jìn)行一次標(biāo)注，同時(shí)生成用于唯一識(shí)別該網(wǎng)站站點(diǎn)的網(wǎng)站的標(biāo)識(shí)，記為AppID。步驟S120 :云端服務(wù)器分別對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，將多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，多個(gè)前端模板與網(wǎng)站的標(biāo)識(shí)相關(guān)。在本發(fā)明的一個(gè)實(shí)施例中，前端模板中包括頁面布局信息和多個(gè)組件模板信息。云端服務(wù)器對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，前端模板中包括頁面布局信息和多個(gè)組件模板信息。前端模板包含頁面的HTML結(jié)構(gòu)代碼、組件和組件類型、組件之間的順序關(guān)系以及組件對應(yīng)的數(shù)據(jù)內(nèi)容信息。例如，云端服務(wù)器識(shí)別出網(wǎng)頁的導(dǎo)航塊和欄目塊等組件，云端服務(wù)器將可視化的組件區(qū)域向用戶進(jìn)行的重點(diǎn)突出的提示。除了使用默認(rèn)識(shí)別出的導(dǎo)航塊和欄目塊組件，將其內(nèi)容信息作為前端模板的內(nèi)容信息，網(wǎng)站站長也可以手動(dòng)的輸入標(biāo)題和內(nèi)容，云端服務(wù)器將用戶自定義的數(shù)據(jù)保存在字典數(shù)據(jù)中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，同時(shí)將對應(yīng)的組件添加到生成的Web App站點(diǎn)。此時(shí)，網(wǎng)站站長可以預(yù)覽Web App的內(nèi)容頁面，同時(shí)對前端模板進(jìn)行操作和編輯，例如拖動(dòng)組件之間的先后順序，或者刪除組件，或者重新標(biāo)注整個(gè)頁面。云端服務(wù)器將Web App站點(diǎn)的前端模板存入數(shù)據(jù)庫中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，網(wǎng)站站長自定義的組件信息，比如標(biāo)題和內(nèi)容保存在字典數(shù)據(jù)中。步驟S130 :云端服務(wù)器接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息。例如，用戶在移動(dòng)終端的瀏覽器中輸入域名發(fā)起請求，云端服務(wù)器接收請求消息。步驟S140 :云端服務(wù)器將網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)發(fā)送至移動(dòng)終端，以供移動(dòng)終端加載網(wǎng)站殼架構(gòu)。 例如，云端服務(wù)器接收請求消息，并通過數(shù)據(jù)庫查找對應(yīng)的唯一標(biāo)識(shí)AppID。云端服務(wù)器將網(wǎng)站殼架構(gòu)和AppID發(fā)送至移動(dòng)終端，移動(dòng)終端加載網(wǎng)站殼架構(gòu)。其中，網(wǎng)站殼架構(gòu)包括初始化模板，是對網(wǎng)站站點(diǎn)之間的共同布局和公共功能抽象后的網(wǎng)站架構(gòu)。網(wǎng)站殼架構(gòu)運(yùn)行在Web App的整個(gè)生命周期內(nèi)，用于對Web App進(jìn)行管理以及分發(fā)請求。步驟S150 :云端服務(wù)器將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端，其中，移動(dòng)終端將內(nèi)容數(shù)據(jù)拼裝至前端模板，并渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給用戶。例如，云端服務(wù)器讀取數(shù)據(jù)庫中與AppID對應(yīng)的前端模板信息，將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端。前端模板中組件所對應(yīng)于原網(wǎng)站的數(shù)據(jù)通過XPATH與存儲(chǔ)的數(shù)據(jù)關(guān)聯(lián)。其中，前端模板以字符串形式返回，XPATH的字符串記錄在組件的DOM節(jié)點(diǎn)的屬性中。網(wǎng)站殼架構(gòu)根據(jù)AppID，讀取數(shù)據(jù)庫中該視圖對應(yīng)的數(shù)據(jù)，以JSON形式返回。移動(dòng)終端得到了頁面的前端模板信息和內(nèi)容數(shù)據(jù)，通過網(wǎng)站殼架構(gòu)將內(nèi)容數(shù)據(jù)拼裝至前端模板，對進(jìn)行渲染，得到了完整的頁面。在本發(fā)明的一個(gè)實(shí)施例中，根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法還包括步驟S210 :當(dāng)用戶點(diǎn)擊Web App頁面中的鏈接時(shí)，網(wǎng)站殼架構(gòu)劫持點(diǎn)擊鏈接所產(chǎn)生的請求。用戶點(diǎn)擊Web App頁面中的某一條鏈接，移動(dòng)終端對鏈接A標(biāo)簽被點(diǎn)擊的默認(rèn)處理方式為向云端服務(wù)器發(fā)送請求，但是Web App的網(wǎng)站殼架構(gòu)對自包含的點(diǎn)擊事件進(jìn)行了劫持。
步驟220 :網(wǎng)站殼架構(gòu)分析鏈接的內(nèi)容數(shù)據(jù)和類型。網(wǎng)站殼架構(gòu)劫持點(diǎn)擊鏈接所產(chǎn)生的請求，并分析該鏈接的內(nèi)容和類型,再選擇對應(yīng)的處理方式。步驟S230 :當(dāng)鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將當(dāng)前頁面的標(biāo)簽的HREF屬性添加至請求中，并發(fā)送至云端服務(wù)器。例如，如果該鏈接和當(dāng)前的鏈接屬于同一個(gè)域，那么會(huì)將A標(biāo)簽中的HREF屬性提取出來，作為GET請求的一個(gè)參數(shù)發(fā)至云端服務(wù)器。當(dāng)鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且鏈接所指頁面的域不屬于云端服務(wù)器所轉(zhuǎn)化的Web App時(shí),關(guān)閉網(wǎng)站殼架構(gòu)并在新窗口打開鏈接。例如,如果該鏈接和當(dāng)前鏈接屬于不同的域，那么認(rèn)為該鏈接的域并不是WebApp包括的域，則跳出Web App的范圍，在新窗口打開鏈接。步驟S240 :云端服務(wù)器根據(jù)網(wǎng)站的標(biāo)識(shí)和鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù),并將鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端。云端服務(wù)器根據(jù)Web App的AppID和A標(biāo)簽的URL，得到該頁面的布局及組件模板，同時(shí)得到頁面內(nèi) 要顯示的內(nèi)容數(shù)據(jù)，發(fā)送至移動(dòng)終端。步驟S250 :移動(dòng)終端將鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至前端模板，以及渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給用戶。例如，網(wǎng)站殼架構(gòu)將內(nèi)容數(shù)據(jù)和前端模板進(jìn)行拼裝和渲染，轉(zhuǎn)換為Web App頁面并展示給用戶。如果得到的視圖模板含有新的組件，即之前的視圖沒有加載過的，則按照按需加載的原則，加載新的組件所需要的HTML代碼、JS和CSS代碼。在本發(fā)明的一個(gè)實(shí)施例中，移動(dòng)終端對獲得的多個(gè)組件模板信息進(jìn)行緩存。緩存可以保證在下次用到該組件時(shí)，不需要發(fā)起新的請求來進(jìn)行加載。網(wǎng)站殼架構(gòu)可以進(jìn)行視圖間的切換，切換過程為隱藏原有的視圖，顯示新的頁面視圖。單文檔Web App通過在一個(gè)HTML文檔中包含多個(gè)具有data-role屬性的DIV來實(shí)現(xiàn)視圖間的切換。每個(gè)DIV都被視為一個(gè)視圖，每個(gè)視圖都以ID作為唯一的標(biāo)識(shí)，用于視圖間的切換。一般情況下，Web App顯示的第一個(gè)視圖是網(wǎng)站的首頁視圖，而除了當(dāng)前顯示的視圖外其他所有視圖都會(huì)被隱藏。在本發(fā)明的一個(gè)實(shí)施例中，還包括步驟S260 :網(wǎng)站殼架構(gòu)對用戶開啟的頁面進(jìn)行維護(hù)，并為用戶開啟的頁面進(jìn)行標(biāo)記。切換視圖之后，網(wǎng)站殼架構(gòu)對網(wǎng)站的URL要進(jìn)行維護(hù)。URL的主體是一直不變的，從而保證整個(gè)頁面不會(huì)被刷新。例如，網(wǎng)站殼架構(gòu)會(huì)在URL的主體后加“#”和視圖的標(biāo)識(shí)字符串，當(dāng)每次需要切換視圖時(shí)，需要修改“#”后面的標(biāo)識(shí)字符串。對于隱藏的視圖，網(wǎng)站殼架構(gòu)并不對其進(jìn)行銷毀，銷毀指刪除該視圖所在的DIV節(jié)點(diǎn)。在本發(fā)明的一個(gè)實(shí)施例中，網(wǎng)站殼架構(gòu)將用戶開啟的預(yù)設(shè)數(shù)量的頁面進(jìn)行緩存。例如，預(yù)設(shè)數(shù)量為10，網(wǎng)站殼架構(gòu)會(huì)在內(nèi)存中保留用戶最近瀏覽過的10個(gè)視圖。當(dāng)用戶切換到該隱藏視圖時(shí)，該視圖的DIV節(jié)點(diǎn)還在內(nèi)存中，可以直接從內(nèi)存中讀取并進(jìn)行顯示。如果切換的視圖是用戶曾經(jīng)瀏覽過的視圖，但是不在最近瀏覽的10個(gè)視圖之內(nèi)。網(wǎng)站殼架構(gòu)將會(huì)從本地緩存數(shù)據(jù)中取出視圖模板和視圖的數(shù)據(jù)，重新渲染拼裝，創(chuàng)建新的視圖。其中，視圖模板和視圖數(shù)據(jù)以字符串的形式緩存在本地。
網(wǎng)站殼架構(gòu)同時(shí)維護(hù)了移動(dòng)終端的前進(jìn)和后退的操作。后退按鈕表示返回上一個(gè)瀏覽視圖，前進(jìn)按鈕代表相反的含義。具體方法為每次創(chuàng)建視圖后，修改瀏覽器地址欄中的URL之前，將舊的URL放入移動(dòng)終端的歷史記錄中，之后再修改URL，更改“#”后面的內(nèi)容為新的視圖標(biāo)識(shí)字符串。步驟S270 :當(dāng)網(wǎng)站殼架構(gòu)接收到用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法，提供了快速將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App的解決方案。減少對移動(dòng)終端進(jìn)行二次開發(fā)的成本，保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)eb App瀏覽體驗(yàn)。Web App的優(yōu)點(diǎn)包括如圖2所示,不像傳統(tǒng)網(wǎng)站對應(yīng)每個(gè)文檔對應(yīng)一個(gè)頁面，需要分別加載，本方法在第一次打開Web App時(shí)，只加載一次網(wǎng)站殼架構(gòu)。之后所有的用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間。對于全局的HTML前端模板,Java Script代碼和CSS代碼只加載一次,其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端，使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，保證了省電省流量的目標(biāo)。本方法加載的頁面切換流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。下面參考圖2描述根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)100，包括開發(fā)者客戶端110、云端服務(wù)器120和移動(dòng)終端130。其中，開發(fā)者客戶端110用于提供網(wǎng)站，并將網(wǎng)站的域名發(fā)送至云端服務(wù)器120 ;云端服務(wù)器120用于根據(jù)網(wǎng)站的域名抓取網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，并分別對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，將多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，每個(gè)網(wǎng)頁具有不同的類型，多個(gè)前端模板與網(wǎng)站的標(biāo)識(shí)相關(guān)，以及接收用戶通過移動(dòng)終端130發(fā)送的訪問請求消息，并將網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)發(fā)送至移動(dòng)終端130，并在移動(dòng)終端130加載網(wǎng)站殼架構(gòu)之后，將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端130` ;移動(dòng)終端130用于將內(nèi)容數(shù)據(jù)拼裝至前端模板，并渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給用戶。其中，前端模板中包括頁面布局信息和多個(gè)組件模板信息。例如，開發(fā)者客戶端110提供網(wǎng)站，并將網(wǎng)站的域名發(fā)送至云端服務(wù)器120，云端服務(wù)器120根據(jù)獲得網(wǎng)站的域名自動(dòng)抓取出具有不同的類型的多個(gè)網(wǎng)頁，對于同一類型的網(wǎng)頁，一般只進(jìn)行一次標(biāo)注，同時(shí)生成用于唯一識(shí)別該網(wǎng)站站點(diǎn)的網(wǎng)站的標(biāo)識(shí)，記為AppID。云端服務(wù)器120對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，前端模板中包括頁面布局信息和多個(gè)組件模板信息。前端模板包含頁面的HTML結(jié)構(gòu)代碼、組件和組件類型、組件之間的順序關(guān)系以及組件對應(yīng)的數(shù)據(jù)內(nèi)容信息。例如，云端服務(wù)器120識(shí)別出網(wǎng)頁的導(dǎo)航塊和欄目塊等組件，云端服務(wù)器120將可視化的組件區(qū)域向用戶進(jìn)行的重點(diǎn)突出的提示。除了使用默認(rèn)識(shí)別出的導(dǎo)航塊和欄目塊組件，將其內(nèi)容信息作為前端模板的內(nèi)容信息，開發(fā)者客戶端HO也可以提供標(biāo)題和內(nèi)容，云端服務(wù)器120將用戶自定義的數(shù)據(jù)保存在字典數(shù)據(jù)中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，同時(shí)將對應(yīng)的組件添加到生成的Web App站點(diǎn)。此時(shí)，可以通過開發(fā)者客戶端110可以預(yù)覽Web App的內(nèi)容頁面，同時(shí)對前端模板進(jìn)行操作和編輯，例如拖動(dòng)組件之間的先后順序，或者刪除組件，或者重新標(biāo)注整個(gè)頁面。云端服務(wù)器120將Web App站點(diǎn)的前端模板存入數(shù)據(jù)庫中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，開發(fā)者客戶端110自定義的組件信息，比如標(biāo)題和內(nèi)容保存在字典數(shù)據(jù)中?？梢岳斫獾氖牵鲜鼍W(wǎng)站轉(zhuǎn)化過程僅出于示例目的，本發(fā)明實(shí)施例不限于此。在本發(fā)明的一個(gè)實(shí)施例中，移動(dòng)終端130包括請求模塊131、接收模塊132、網(wǎng)站殼架構(gòu)模塊133、加載模塊134和渲染模塊135。請求模塊131用于向云端服務(wù)器120發(fā)送訪問請求消息；接收模塊132用于接收云端服務(wù)器120發(fā)送的網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)，以及訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊133用于與移動(dòng)終端130中的瀏覽器相互通信，將瀏覽器生成的訪問請求中添加網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至云端服務(wù)器120 ;加載模塊134用于接收云端服務(wù)器120反饋的前端模板和內(nèi)容數(shù)據(jù)，并將內(nèi)容數(shù)據(jù)加載至前端模板；渲染模塊135用于選擇加載之后的前端模板。移動(dòng)終端130還包括緩存模塊136，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。例如，用戶在移動(dòng)終端130的瀏覽器中輸入域名，請求模塊131發(fā)起請求，云端服務(wù)器120接收請求消息。云端服務(wù)器120通過數(shù)據(jù)庫查找對應(yīng)的唯一標(biāo)識(shí)AppID，并將網(wǎng)站殼架構(gòu)和AppID發(fā)送至移動(dòng)終端130，移動(dòng)終端130接收模塊132接收云端服務(wù)器120發(fā)送的數(shù)據(jù)，并加載網(wǎng)站殼架構(gòu)。其中，網(wǎng)站殼架構(gòu)包括初始化模板，是對網(wǎng)站站點(diǎn)之間的共同布局和公共功能抽象后的網(wǎng)站架構(gòu)。網(wǎng)站殼架構(gòu)運(yùn)行在Web App的整個(gè)生命周期內(nèi)，用于對Web App進(jìn)行管理以及分發(fā)請求。云端服務(wù)器120讀取數(shù)據(jù)庫中與AppID對應(yīng)的前端模板信息，將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端130。前端模板中組件所對應(yīng)于原網(wǎng)站的數(shù)據(jù)通過XPATH與存儲(chǔ)的數(shù)據(jù)關(guān)聯(lián)。其中，前端模板以字符串形式返回，XPATH的字符串記錄在組件的DOM節(jié)點(diǎn)的屬性中。根據(jù)AppID讀取數(shù)據(jù)庫中該視圖對應(yīng)的數(shù)據(jù)并以JSON形式返回。移動(dòng)終端130接收模塊132得到了頁面的前端模板信息和內(nèi)容數(shù)據(jù)，加載模塊134對接收模塊132接受的數(shù)據(jù)進(jìn)行加載，將內(nèi)容數(shù)據(jù)拼裝至前端模板，渲染模塊135選擇加載之后的前端模板并進(jìn)行渲染，得到了完整的頁面?？梢岳斫獾氖?，上述移動(dòng)終端130加載頁面的過程僅 處于示例目的，本發(fā)明實(shí)施例不限于此。在本發(fā)明的一個(gè)實(shí)施例中，網(wǎng)站殼架構(gòu)模塊133與移動(dòng)終端130中的瀏覽器相互通信，將瀏覽器生成的訪問請求中添加網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至云端服務(wù)器120。當(dāng)用戶點(diǎn)擊Web App頁面中的鏈接時(shí)，網(wǎng)站殼架構(gòu)模塊133還用于劫持點(diǎn)擊鏈接所產(chǎn)生的請求，并分析鏈接的內(nèi)容數(shù)據(jù)和類型，以及在鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將當(dāng)前頁面的標(biāo)簽的HREF屬性添加至請求中，并發(fā)送至云端服務(wù)器120。當(dāng)鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且鏈接所指頁面的域不屬于云端服務(wù)器120所轉(zhuǎn)化的WebApp時(shí)，網(wǎng)站殼架構(gòu)模塊133關(guān)閉網(wǎng)站殼架構(gòu)并在新窗口打開鏈接。云端服務(wù)器120還用于根據(jù)網(wǎng)站的標(biāo)識(shí)和鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端130，移動(dòng)終端130還用于將鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至前端模板，以及渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給用戶。例如，用戶點(diǎn)擊Web App頁面中的某一條鏈接，移動(dòng)終端130對鏈接A標(biāo)簽被點(diǎn)擊的默認(rèn)處理方式為向云端服務(wù)器120發(fā)送請求，但是網(wǎng)站殼架構(gòu)模塊133對自包含的點(diǎn)擊事件進(jìn)行了劫持。網(wǎng)站殼架構(gòu)模塊133劫持點(diǎn)擊鏈接所產(chǎn)生的請求，并分析該鏈接的內(nèi)容和類型，再選擇對應(yīng)的處理方式。例如，如果該鏈接和當(dāng)前的鏈接屬于同一個(gè)域，那么網(wǎng)站殼架構(gòu)模塊133會(huì)將A標(biāo)簽中的HREF屬性提取出來，作為GET請求的一個(gè)參數(shù)發(fā)至云端服務(wù)器120。如果該鏈接和當(dāng)前鏈接屬于不同的域，那么網(wǎng)站殼架構(gòu)模塊133認(rèn)為該鏈接的域并不是Web App包括的域,貝U跳出Web App的范圍,在新窗口打開鏈接?？梢岳斫獾氖?上述劫持處理過程僅處于示例目的，本發(fā)明實(shí)施例不限于此。云端服務(wù)器120根據(jù)Web App的AppID和A標(biāo)簽的URL，得到該頁面的布局及組件模板，同時(shí)得到頁面內(nèi)要顯示的內(nèi)容數(shù)據(jù)，發(fā)送至移動(dòng)終端130。移動(dòng)終端130將內(nèi)容數(shù)據(jù)和前端模板進(jìn)行拼裝以及渲染前端模板，轉(zhuǎn)換為Web App頁面并展示給用戶。如果得到的視圖模板含有新的組件，即之前的視圖沒有加載過的，則按照按需加載的原則，加載新的組件所需要的HTML代碼、JS和CSS代碼。在本發(fā)明的一個(gè)實(shí)施例中，網(wǎng)站殼架構(gòu)模塊133還用于對用戶開啟的頁面進(jìn)行維護(hù)，并為用戶開啟的頁面進(jìn)行標(biāo)記，并在網(wǎng)站殼架構(gòu)模塊133接收到用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。網(wǎng)站殼架構(gòu)還用于將用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。緩存模塊對獲得的多個(gè)組件模板信息進(jìn)行緩存。緩存可以保證在下次用到該組件或者頁面時(shí)，不需要發(fā)起新的請求來進(jìn)行加載，節(jié)省流量，提高速度。例如，網(wǎng)站殼架構(gòu)模塊133可以進(jìn)行視圖間的切換，切換過程為隱藏原有的視圖，顯示新的頁面視圖。單文檔Web App通過在一個(gè)HTML文檔中包含多個(gè)具有data-role屬性的DIV來實(shí)現(xiàn)視圖間的切換。每個(gè)DIV都被視為一個(gè)視圖，每個(gè)視圖都以ID作為唯一的標(biāo)識(shí)，用于視圖間的切換。一般情況下，Web App顯示的第一個(gè)視圖是網(wǎng)站的首頁視圖，而除了當(dāng)前顯示的視圖外其他所有視圖都會(huì)被隱藏。切換視圖之后，網(wǎng)站殼架構(gòu)模塊133對網(wǎng)站的URL要進(jìn)行維護(hù)。URL的主體是一直不變的，從而保證整個(gè)頁面不會(huì)被刷新。網(wǎng)站殼架構(gòu)模塊133會(huì)在URL的主體后加“#”和視圖的標(biāo)識(shí)字符串，當(dāng)每次需要切換視圖時(shí)，需要修改“#”后面的標(biāo)識(shí)字符串。對于隱藏的視圖，網(wǎng)站殼架構(gòu)模塊133并不對其進(jìn)行銷毀，銷毀指刪除該視圖所在的D IV節(jié)點(diǎn)。假設(shè)預(yù)設(shè)數(shù)量為10。網(wǎng)站殼架構(gòu)模塊133會(huì)在內(nèi)存中保留用戶最近瀏覽過的10個(gè)視圖。當(dāng)用戶切換到該隱藏視圖時(shí)，該視圖的DIV節(jié)點(diǎn)還在內(nèi)存中，可以直接從內(nèi)存中讀取并進(jìn)行顯示。如果切換的視圖是用戶曾經(jīng)瀏覽過的視圖，但是不在最近瀏覽的10個(gè)視圖之內(nèi)。網(wǎng)站殼架構(gòu)模塊133將會(huì)從本地緩存數(shù)據(jù)中取出視圖模板和視圖的數(shù)據(jù)，重新渲染拼裝，創(chuàng)建新的視圖。其中，視圖模板和視圖數(shù)據(jù)以字符串的形式緩存在本地。網(wǎng)站殼架構(gòu)模塊133同時(shí)維護(hù)了移動(dòng)終端130的前進(jìn)和后退的操作。后退按鈕表示返回上一個(gè)瀏覽視圖，前進(jìn)按鈕代表相反的含義。具體方法為每次創(chuàng)建視圖后，修改瀏覽器地址欄中的URL之前，將舊的url放入移動(dòng)終端130的歷史記錄中，之后再修改URL，更改“ # ”后面的內(nèi)容為新的視圖標(biāo)識(shí)字符串?？梢岳斫獾氖?，上述網(wǎng)站殼架構(gòu)模塊133功能僅處于示例目的，本發(fā)明實(shí)施例不限于此。根據(jù)本發(fā)明實(shí)施例的將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)可以快速將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端130瀏覽的Web App，減少對移動(dòng)終端130進(jìn)行二次開發(fā)的成本，保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)ebApp瀏覽體驗(yàn)。Web App的優(yōu)點(diǎn)包括如圖2所示,不像傳統(tǒng)網(wǎng)站對應(yīng)每個(gè)文檔對應(yīng)一個(gè)頁面，需要分別加載，本系統(tǒng)在第一次打開Web App時(shí)，只加載一次網(wǎng)站殼架構(gòu)。之后所有的用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間。對于全局的HTML前端模板，JavaScript代碼和CSS代碼只加載一次，其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端130，使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，保證了省電省流量的目標(biāo)。本系統(tǒng)加載頁面以及切換更加流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。下面參考圖3描述根據(jù)本發(fā)明實(shí)施例的云端服務(wù)器200，包括接收模塊210、抓取模塊220、模板管理模塊230、請求接收模塊240和控制模塊250。接收模塊210用于接收網(wǎng)站域名；抓取模塊220用于根據(jù)網(wǎng)站的域名抓取網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型；模板管理模塊230用于分別對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，將多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫；請求接收模塊240用于接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息；控制模塊250用于將網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)發(fā)送至移動(dòng)終端，并在移動(dòng)終端加載網(wǎng)站殼架構(gòu)之后，將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端，其中，移動(dòng)終端將內(nèi)容數(shù)據(jù)拼裝至前端模板，并渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為WebApp頁面并展示給用戶。其中，前端模板中包括頁面布局信息和多個(gè)組件模板信息。例如，接收模塊210接收網(wǎng)站域名，抓取模塊220根據(jù)獲得網(wǎng)站的域名自動(dòng)抓取出具有不同的類型的多個(gè)網(wǎng)頁，對于同一類型的網(wǎng)頁生成用于唯一識(shí)別該網(wǎng)站站點(diǎn)的網(wǎng)站的標(biāo)識(shí)，記為AppID。模板管理模塊230對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板，前端模板中包括頁面布局信息和多個(gè)組件模板信息。前端模板包含頁面的HTML結(jié)構(gòu)代碼、組件和組件類型、組件之間的順序關(guān)系以及組件對應(yīng)的數(shù)據(jù)內(nèi)容信息。例如，模板管理模塊230識(shí)別出網(wǎng)頁的導(dǎo)航塊和欄目塊等組件，云端服務(wù)器將可視化的組件區(qū)域向用戶進(jìn)行的重點(diǎn)突出的提示。除了使用默認(rèn)識(shí)別出的導(dǎo)航塊和欄目塊組件，將其內(nèi)容信息作為前端模板的內(nèi)容信息，網(wǎng)站站長也可以提供標(biāo)題和內(nèi)容，模板管理模塊230將用戶自定義的數(shù)據(jù)保存在字典數(shù)據(jù)中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，同時(shí)將對應(yīng)的組件添加到生成的Web App站點(diǎn)。此時(shí)，網(wǎng)站站長可以預(yù) 覽Web App的內(nèi)容頁面，同時(shí)對前端模板進(jìn)行操作和編輯，例如拖動(dòng)組件之間的先后順序，或者刪除組件，或者重新標(biāo)注整個(gè)頁面。模板管理模塊230將Web App站點(diǎn)的前端模板存入數(shù)據(jù)庫中，并和AppID進(jìn)行關(guān)聯(lián)對應(yīng)，自定義的組件信息，比如標(biāo)題和內(nèi)容保存在字典數(shù)據(jù)中?？梢岳斫獾氖牵鲜鼍W(wǎng)站轉(zhuǎn)換過程僅出于示例目的，本發(fā)明實(shí)施例不限于此。在本發(fā)明的一個(gè)實(shí)施例中，接收模塊210還用于當(dāng)用戶點(diǎn)擊Web App頁面中的鏈接時(shí)，接收移動(dòng)終端發(fā)送的網(wǎng)站的標(biāo)識(shí)和鏈接對應(yīng)的URL，控制模塊250還用于根據(jù)網(wǎng)站的標(biāo)識(shí)和鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端，其中，移動(dòng)終端將鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至前端模板，以及渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給用戶。例如，用戶在移動(dòng)終端的瀏覽器中輸入域名發(fā)起請求，請求接收模塊240接收請求消息。云端服務(wù)器通過數(shù)據(jù)庫查找對應(yīng)的唯一標(biāo)識(shí)AppID，并將網(wǎng)站殼架構(gòu)和AppID發(fā)送至移動(dòng)終端，移動(dòng)終端接收模塊210接收云端服務(wù)器發(fā)送的數(shù)據(jù)，并加載網(wǎng)站殼架構(gòu)。其中，網(wǎng)站殼架構(gòu)包括初始化模板，是對網(wǎng)站站點(diǎn)之間的共同布局和公共功能抽象后的網(wǎng)站架構(gòu)。網(wǎng)站殼架構(gòu)運(yùn)行在WebApp的整個(gè)生命周期內(nèi)，用于對Web App進(jìn)行管理以及分發(fā)請求?？刂颇K250讀取數(shù)據(jù)庫中與AppID對應(yīng)的前端模板信息，將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端。前端模板中組件所對應(yīng)于原網(wǎng)站的數(shù)據(jù)通過XPATH與存儲(chǔ)的數(shù)據(jù)關(guān)聯(lián)。其中，前端模板以字符串形式返回，XPATH的字符串記錄在組件的DOM節(jié)點(diǎn)的屬性中。根據(jù)AppID讀取數(shù)據(jù)庫中該視圖對應(yīng)的數(shù)據(jù)并以JSON形式返回。接收模塊210接收Web App的AppID和A標(biāo)簽的URL，控制模塊250得到該頁面的布局及組件模板，同時(shí)得到頁面內(nèi)要顯示的內(nèi)容數(shù)據(jù)，發(fā)送至移動(dòng)終端。移動(dòng)終端接收并將內(nèi)容數(shù)據(jù)拼裝至前端模板并進(jìn)行渲染，得到了完整的頁面。可以理解的是，上述轉(zhuǎn)換過程僅處于示例目的，本發(fā)明實(shí)施例不限于此。根據(jù)本發(fā)明實(shí)施例的云端服務(wù)器可以快速將網(wǎng)絡(luò)站點(diǎn)轉(zhuǎn)換成適合移動(dòng)終端瀏覽的Web App，減少對移動(dòng)終端進(jìn)行二次開發(fā)的成本，保證了原頁面內(nèi)容塊數(shù)據(jù)的完整性、頁面布局的定制性和多樣性，無損的做到轉(zhuǎn)化后的網(wǎng)站W(wǎng)ebApp瀏覽體驗(yàn)。Web App的優(yōu)點(diǎn)包括不像傳統(tǒng)網(wǎng)站對應(yīng)每個(gè)文檔對應(yīng)一個(gè)頁面，需要分別加載，本系統(tǒng)在第一次打開WebApp時(shí)，只加載一次網(wǎng)站殼架構(gòu)。之后所有的用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間。對于全局的HTML前端模板，JavaScript代碼和CSS代碼只加載一次，其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。云端服務(wù)器提供的Web App在加載的頁面時(shí)候的切換更加流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。下面參考圖4描述根據(jù)本發(fā)明實(shí)施例的移動(dòng)終端300，包括請求模塊310、接收模塊320、網(wǎng)站殼架構(gòu)模塊330、加載模塊340和渲染模塊350。請求模塊用于向云端服務(wù)器發(fā)送訪問請求消息；接收模塊用于接收云端服務(wù)器發(fā)送的網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)，以及訪問請求消息所對應(yīng)的前端模板及內(nèi) 容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊用于與移動(dòng)終端中的瀏覽器相互通信，將瀏覽器生成的訪問請求中添加網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至云端服務(wù)器；加載模塊用于接收云端服務(wù)器反饋的前端模板和內(nèi)容數(shù)據(jù)，并將內(nèi)容數(shù)據(jù)加載至前端模板；渲染模塊用于選擇加載之后的前端模板。其中，前端模板中包括頁面布局信息和多個(gè)組件模板信息。移動(dòng)終端300還可以包括緩存模塊，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。例如，用戶在移動(dòng)終端的瀏覽器中輸入域名，請求模塊發(fā)起請求，云端服務(wù)器接收請求消息并將網(wǎng)站殼架構(gòu)和AppID發(fā)送至移動(dòng)終端。移動(dòng)終端接收模塊接收云端服務(wù)器發(fā)送的數(shù)據(jù)，并加載網(wǎng)站殼架構(gòu)。其中，網(wǎng)站殼架構(gòu)包括初始化模板，是對網(wǎng)站站點(diǎn)之間的共同布局和公共功能抽象后的網(wǎng)站架構(gòu)。網(wǎng)站殼架構(gòu)運(yùn)行在Web App的整個(gè)生命周期內(nèi)，用于對Web App進(jìn)行管理以及分發(fā)請求。接收模塊接收云端服務(wù)器發(fā)送的與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)。前端模板中組件所對應(yīng)于原網(wǎng)站的數(shù)據(jù)通過XPATH與存儲(chǔ)的數(shù)據(jù)關(guān)聯(lián)。其中，前端模板以字符串形式返回，XPATH的字符串記錄在組件的DOM節(jié)點(diǎn)的屬性中。根據(jù)AppID讀取數(shù)據(jù)庫中該視圖對應(yīng)的數(shù)據(jù)并以JSON形式返回。加載模塊對接收模塊接受的數(shù)據(jù)進(jìn)行加載，將內(nèi)容數(shù)據(jù)拼裝至前端模板，渲染模塊選擇加載之后的前端模板并進(jìn)行渲染，得到了完整的頁面?？梢岳斫獾氖?，上述移動(dòng)終端加載頁面的過程僅處于示例目的，本發(fā)明實(shí)施例不限于此。在本發(fā)明的一個(gè)實(shí)施例中，當(dāng)用戶點(diǎn)擊Web App頁面中的鏈接時(shí)，網(wǎng)站殼架構(gòu)模塊還用于劫持點(diǎn)擊鏈接所產(chǎn)生的請求，并分析鏈接的內(nèi)容數(shù)據(jù)和類型，以及在鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將當(dāng)前頁面的標(biāo)簽的HREF屬性添加至請求中，并發(fā)送至云端服務(wù)器。當(dāng)鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且鏈接所指頁面的域不屬于云端服務(wù)器所轉(zhuǎn)化的WebApp時(shí)，網(wǎng)站殼架構(gòu)模塊關(guān)閉網(wǎng)站殼架構(gòu)并在新窗口打開鏈接。例如，用戶點(diǎn)擊Web App頁面中的某一條鏈接，移動(dòng)終端對鏈接A標(biāo)簽被點(diǎn)擊的默認(rèn)處理方式為向云端服務(wù)器發(fā)送請求，但是網(wǎng)站殼架構(gòu)模塊對自包含的點(diǎn)擊事件進(jìn)行了劫持。網(wǎng)站殼架構(gòu)模塊劫持點(diǎn)擊鏈接所產(chǎn)生的請求，并分析該鏈接的內(nèi)容和類型，再選擇對應(yīng)的處理方式。例如，如果該鏈接和當(dāng)前的鏈接屬于同一個(gè)域，那么網(wǎng)站殼架構(gòu)模塊會(huì)將A標(biāo)簽中的HREF屬性提取出來，作為GET請求的一個(gè)參數(shù)發(fā)至云端服務(wù)器。如果該鏈接和當(dāng)前鏈接屬于不同的域，那么網(wǎng)站殼架構(gòu)模塊認(rèn)為該鏈接的域并不是Web App包括的域，則跳出Web App的范圍，在新窗口打開鏈接。可以理解的是，上述劫持處理過程僅處于示例目的，本發(fā)明實(shí)施例不限于此。云端服務(wù)器將該頁面的布局、組件模板以及頁面內(nèi)要顯示的內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端。移動(dòng)終端將內(nèi)容數(shù)據(jù)和前端模板進(jìn)行拼裝以及渲染前端模板，轉(zhuǎn)換為Web App頁面并展示給用戶。如果得到的視圖模板含有新的組件，即之前的視圖沒有加載過的，則按照按需加載的原則，加載新的組件所需要的HTML代碼、JS和CSS代碼。緩存模塊對獲得的多個(gè)組件模板信息進(jìn)行緩存。緩存可以保證在下次用到該組件或者頁面時(shí)，不需要發(fā)起新的請求來進(jìn)行加載，節(jié)省流量，提高速度。在本發(fā)明的一個(gè)實(shí)施例中，網(wǎng)站殼架構(gòu)模塊還用于對用戶開啟的頁面進(jìn)行維護(hù)，并為用戶開啟的頁面進(jìn)行標(biāo)記，并在網(wǎng)站殼架構(gòu)模塊接收到用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。網(wǎng)站殼架構(gòu)還用于將用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。例如，網(wǎng)站殼架構(gòu)模塊可以進(jìn)行視圖間的切換，切換過程為隱藏原有的視圖，顯示新的頁面視圖。單文檔Web App通過在一個(gè)HTML文檔中包含多個(gè)具有data-role屬性的DIV來實(shí)現(xiàn)視圖間的切換。每個(gè)DIV都被視為一個(gè)視圖，每個(gè)視圖都以ID作為唯一的標(biāo)識(shí)，用于視圖問的切換。一般情況下，WebApp顯示的第一個(gè)視圖是網(wǎng)站的首頁視圖，而除了當(dāng)前顯示的視圖外其他所有 視圖都會(huì)被隱藏。切換視圖之后，網(wǎng)站殼架構(gòu)模塊對網(wǎng)站的URL要進(jìn)行維護(hù)。URL的主體是一直不變的，從而保證整個(gè)頁面不會(huì)被刷新。網(wǎng)站殼架構(gòu)模塊會(huì)在URL的主體后加“#”和視圖的標(biāo)識(shí)字符串，當(dāng)每次需要切換視圖時(shí)，需要修改“#”后面的標(biāo)識(shí)字符串。對于隱藏的視圖，網(wǎng)站殼架構(gòu)模塊并不對其進(jìn)行銷毀，銷毀指刪除該視圖所在的DIV節(jié)點(diǎn)。假設(shè)預(yù)設(shè)數(shù)量為10。網(wǎng)站殼架構(gòu)模塊會(huì)在內(nèi)存中保留用戶最近瀏覽過的10個(gè)視圖。當(dāng)用戶切換到該隱藏視圖時(shí)，該視圖的DIV節(jié)點(diǎn)還在內(nèi)存中，可以直接從內(nèi)存中讀取并進(jìn)行顯示。如果切換的視圖是用戶曾經(jīng)瀏覽過的視圖，但是不在最近瀏覽的10個(gè)視圖之內(nèi)。網(wǎng)站殼架構(gòu)模塊將會(huì)從本地緩存數(shù)據(jù)中取出視圖模板和視圖的數(shù)據(jù)，重新渲染拼裝，創(chuàng)建新的視圖。其中，視圖模板和視圖數(shù)據(jù)以字符串的形式緩存在本地。網(wǎng)站殼架構(gòu)模塊同時(shí)維護(hù)了移動(dòng)終端的前進(jìn)和后退的操作。后退按鈕表示返回上一個(gè)瀏覽視圖，前進(jìn)按鈕代表相反的含義。具體方法為每次創(chuàng)建視圖后，修改瀏覽器地址欄中的URL之前，將舊的url放入移動(dòng)終端的歷史記錄中，之后再修改URL，更改“#”后面的內(nèi)容為新的視圖標(biāo)識(shí)字符串?？梢岳斫獾氖?，上述網(wǎng)站殼架構(gòu)模塊功能僅處于示例目的，本發(fā)明實(shí)施例不限于此。根據(jù)本發(fā)明實(shí)施例的移動(dòng)終端接收云端服務(wù)器發(fā)送的數(shù)據(jù)，將請求的網(wǎng)頁以更適合移動(dòng)終端瀏覽的Web App展示，其中，Web App的優(yōu)點(diǎn)包括不像傳統(tǒng)網(wǎng)站對應(yīng)每個(gè)文檔對應(yīng)一個(gè)頁面，需要分別加載，移動(dòng)終端在第一次打開Web App時(shí)，只加載一次網(wǎng)站殼架構(gòu)。之后所有的用戶請求用局部刷新來處理，將流量進(jìn)行了充分優(yōu)化，盡量減少用戶等待時(shí)間。對于全局的HTML前端模板，JavaScript代碼和CSS代碼只加載一次，其他局部的JavaScript和CSS代碼按需加載，在不使用時(shí)不加載。將服務(wù)器端的數(shù)據(jù)緩存到移動(dòng)終端，使得用戶近期訪問過的頁面在沒有網(wǎng)絡(luò)連接的情況下也能離線運(yùn)行，最大程度的節(jié)約了請求數(shù)量和請求的流量，保證了省電省流量的目標(biāo)。移動(dòng)終端加載的頁面以及切換更加流暢，用戶感覺不到在傳統(tǒng)網(wǎng)站上經(jīng)常出現(xiàn)的頁面空白樣的頁面的刷新，有效改善了用戶體驗(yàn)。在本說明書的描述中，參考術(shù)語“一個(gè)實(shí)施例”、“一些實(shí)施例”、“示例”、“具體示例”、或“一些示例”等的描述意指結(jié)合該實(shí)施例或示例描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)包含于本發(fā)明的至少一個(gè)實(shí)施例或示例中。在本說明書中，對上述術(shù)語的示意性表述不一定指的是相同的實(shí)施例或示例。而且，描述的具體特征、結(jié)構(gòu)、材料或者特點(diǎn)可以在任何的一個(gè)或多個(gè)實(shí)施例或示例中以合適的方式結(jié)合。盡管已經(jīng)示出和描述了本發(fā)明的實(shí)施例，對于本領(lǐng)域的普通技術(shù)人員而言，可以理解在不脫離本發(fā)明的原理和精神的情況下可以對這些實(shí)施例進(jìn)行多種變化、修改、替換和變型，本發(fā)明的范圍由所附權(quán)利`要求及其等同限定。
權(quán)利要求
1.一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法，其特征在于，包括以下步驟 云端服務(wù)器獲得網(wǎng)站的域名，并根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型； 所述云端服務(wù)器分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，所述多個(gè)前端模板與所述網(wǎng)站的標(biāo)識(shí)相關(guān)； 所述云端服務(wù)器接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息； 所述云端服務(wù)器將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，以供所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)； 所述云端服務(wù)器將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
2.如權(quán)利要求1所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，還包括 當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí)，所述網(wǎng)站殼架構(gòu)劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求； 所述網(wǎng)站殼架構(gòu)分析所述鏈接的內(nèi)容數(shù)據(jù)和類型； 當(dāng)所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。
3.如權(quán)利要求2所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，還包括 所述云端服務(wù)器根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端； 所述移動(dòng)終端將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
4.如權(quán)利要求1-3任一項(xiàng)所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，還包括 當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。
5.如權(quán)利要求1-4任一項(xiàng)所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，所述前端模板中包括頁面布局信息和多個(gè)組件模板信息。
6.如權(quán)利要求5所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，所述移動(dòng)終端對獲得的多個(gè)組件模板信息進(jìn)行緩存。
7.如權(quán)利要求3所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，還包括 所述網(wǎng)站殼架構(gòu)對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記； 當(dāng)所述網(wǎng)站殼架構(gòu)接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。
8.如權(quán)利要求7所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的方法，其特征在于，還包括 所述網(wǎng)站殼架構(gòu)將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面進(jìn)行緩存。
9.一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)，其特征在于，包括開發(fā)者客戶端、云端服務(wù)器和移動(dòng)終端，其中， 所述開發(fā)者客戶端，用于提供網(wǎng)站，并將所述網(wǎng)站的域名發(fā)送至所述云端服務(wù)器；所述云端服務(wù)器，用于根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，并分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫，其中，每個(gè)網(wǎng)頁具有不同的類型，所述多個(gè)前端模板與所述網(wǎng)站的標(biāo)識(shí)相關(guān)，以及接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息，并將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，并在所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)之后，將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端；所述移動(dòng)終端，用于將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
10.如權(quán)利要求9所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述移動(dòng)終端包括請求模塊，用于向所述云端服務(wù)器發(fā)送訪問請求消息；接收模塊，用于接收云端服務(wù)器發(fā)送的所述網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)，以及所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊，用于與所述移動(dòng)終端中的瀏覽器相互通信，將所述瀏覽器生成的訪問請求中添加所述網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至所述云端服務(wù)器；加載模塊，用于接收所述云端服務(wù)器反饋的前端模板和內(nèi)容數(shù)據(jù)，并將所述內(nèi)容數(shù)據(jù)加載至所述前端模板；以及渲染模塊，用于選擇加載之后的所述前端模板。
11.如權(quán)利要求9所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí)，所述網(wǎng)站殼架構(gòu)模塊還用于劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求，并分析所述鏈接的內(nèi)容數(shù)據(jù)和類型，以及在所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。
12.如權(quán)利要求9所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述云端服務(wù)器還用于根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，所述移動(dòng)終端還用于將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
13.如權(quán)利要求10所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，所述網(wǎng)站殼架構(gòu)模塊關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。
14.如權(quán)利要求10所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述前端模板中包括頁面布局信息和多個(gè)組件模板信息。
15.如權(quán)利要求14所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述移動(dòng)終端還包括緩存模塊，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。
16.如權(quán)利要求10所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述網(wǎng)站殼架構(gòu)模塊還用于對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記，并在所述網(wǎng)站殼架構(gòu)模塊接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。
17.如權(quán)利要求10所述的將網(wǎng)站轉(zhuǎn)化為WebApp進(jìn)行展示的系統(tǒng)，其特征在于，所述網(wǎng)站殼架構(gòu)還用于將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。
18.—種云端服務(wù)器,其特征在于,包括接收模塊，用于接收網(wǎng)站域名；抓取模塊，用于根據(jù)所述網(wǎng)站的域名抓取所述網(wǎng)站內(nèi)多個(gè)網(wǎng)頁，其中，每個(gè)網(wǎng)頁具有不同的類型；模板管理模塊，用于分別對所述多個(gè)網(wǎng)頁進(jìn)行分析以生成所述網(wǎng)站的多個(gè)前端模板，將所述多個(gè)前端模板存儲(chǔ)至數(shù)據(jù)庫；請求接收模塊，用于接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息；控制模塊，用于將網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)發(fā)送至所述移動(dòng)終端，并在所述移動(dòng)終端加載所述網(wǎng)站殼架構(gòu)之后，將與所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述內(nèi)容數(shù)據(jù)拼裝至所述前端模板，并渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
19.如權(quán)利要求18所述的云端服務(wù)器，其特征在于，所述接收模塊還用于當(dāng)所述用戶點(diǎn)擊所述Web App頁面中的鏈接時(shí)，接收所述移動(dòng)終端發(fā)送的所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL，所述控制模塊還用于根據(jù)所述網(wǎng)站的標(biāo)識(shí)和所述鏈接對應(yīng)的URL獲得對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)，并將所述鏈接對應(yīng)的前端模板和內(nèi)容數(shù)據(jù)發(fā)送至所述移動(dòng)終端，其中，所述移動(dòng)終端將所述鏈接對應(yīng)的內(nèi)容數(shù)據(jù)拼裝至所述前端模板，以及渲染所述前端模板以將所述用戶請求的頁面轉(zhuǎn)換為Web App頁面并展示給所述用戶。
20.如權(quán)利要求18所述的云端服務(wù)器，其特征在于，所述前端模板中包括頁面布局信息和多個(gè)組件模板信息。
21.—種移動(dòng)終端，其特征在于，包括請求模塊，用于向云端服務(wù)器發(fā)送訪問請求消息；接收模塊，用于接收云端服務(wù)器發(fā)送的所述網(wǎng)站殼架構(gòu)及所述網(wǎng)站的標(biāo)識(shí)，以及所述訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)；網(wǎng)站殼架構(gòu)模塊，用于與所述移動(dòng)終端中的瀏覽器相互通信，將所述瀏覽器生成的訪問請求中添加所述網(wǎng)站對應(yīng)的標(biāo)識(shí)，并發(fā)送至所述云端服務(wù)器；加載模塊，用于接收所述云端服務(wù)器反饋的前端模板和內(nèi)容數(shù)據(jù)，并將所述內(nèi)容數(shù)據(jù)加載至所述前端模板；以及渲染模塊，用于選擇加載之后的所述前端模板。
22.如權(quán)利要求21所述的移動(dòng)終端，其特征在于，當(dāng)所述用戶點(diǎn)擊所述WebApp頁面中的鏈接時(shí)，所述網(wǎng)站殼架構(gòu)模塊還用于劫持點(diǎn)擊所述鏈接所產(chǎn)生的請求，并分析所述鏈接的內(nèi)容數(shù)據(jù)和類型，以及在所述鏈接所指頁面與當(dāng)前頁面屬于同一個(gè)域時(shí)，將所述當(dāng)前頁面的標(biāo)簽的HREF屬性添加至所述請求中，并發(fā)送至所述云端服務(wù)器。
23.如權(quán)利要求21所述的移動(dòng)終端，其特征在于，當(dāng)所述鏈接所指頁面與當(dāng)前頁面不屬于同一個(gè)域，且所述鏈接所指頁面的域不屬于所述云端服務(wù)器所轉(zhuǎn)化的Web App時(shí)，所述網(wǎng)站殼架構(gòu)模塊關(guān)閉所述網(wǎng)站殼架構(gòu)并在新窗口打開所述鏈接。
24.如權(quán)利要求21所述的移動(dòng)終端，其特征在于，所述前端模板中包括頁面布局信息和多個(gè)組件模板信息。
25.如權(quán)利要求24所述的移動(dòng)終端，其特征在于，還包括 緩存模塊，用于對獲得的多個(gè)組件模板信息進(jìn)行緩存。
26.如權(quán)利要求21所述的移動(dòng)終端，其特征在于，所述網(wǎng)站殼架構(gòu)模塊還用于對所述用戶開啟的頁面進(jìn)行維護(hù)，并為所述用戶開啟的頁面進(jìn)行標(biāo)記，并在所述網(wǎng)站殼架構(gòu)模塊接收到所述用戶的網(wǎng)頁切換指令之后，根據(jù)標(biāo)記的頁面進(jìn)行切換。
27.如權(quán)利要求21所述的移動(dòng)終端，其特征在于，所述網(wǎng)站殼架構(gòu)還用于將所述用戶開啟的預(yù)設(shè)數(shù)量的頁面緩存至內(nèi)存。
全文摘要
本發(fā)明提出一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的方法，包括云端服務(wù)器獲得網(wǎng)站的域名并抓取網(wǎng)站內(nèi)多個(gè)網(wǎng)頁；云端服務(wù)器分別對多個(gè)網(wǎng)頁進(jìn)行分析以生成網(wǎng)站的多個(gè)前端模板并存儲(chǔ)至數(shù)據(jù)庫；云端服務(wù)器接收用戶通過移動(dòng)終端發(fā)送的訪問請求消息；云端服務(wù)器將網(wǎng)站殼架構(gòu)及網(wǎng)站的標(biāo)識(shí)發(fā)送至移動(dòng)終端；云端服務(wù)器將與訪問請求消息所對應(yīng)的前端模板及內(nèi)容數(shù)據(jù)發(fā)送至移動(dòng)終端端模板，并渲染前端模板以將用戶請求的頁面轉(zhuǎn)換為WebApp頁面并展示給用戶。本發(fā)明快速無損將網(wǎng)頁轉(zhuǎn)換成適合移終端瀏覽的WebApp，充分優(yōu)化流量電量，頁面切換流暢，減少等待時(shí)間，改善了用戶體驗(yàn)。本發(fā)明還公開了一種將網(wǎng)站轉(zhuǎn)化為Web App進(jìn)行展示的系統(tǒng)、云端服務(wù)器和移動(dòng)終端。
文檔編號(hào)H04L29/06GK103051684SQ201210526609
公開日2013年4月17日 申請日期2012年12月7日 優(yōu)先權(quán)日2012年12月7日
發(fā)明者王倩 申請人:百度在線網(wǎng)絡(luò)技術(shù)(北京)有限公司