• / 9
  • 下載費用:30 金幣  

一種移動端頁面生成方法及系統.pdf

摘要
申請專利號:

CN201510917312.3

申請日:

2015.12.10

公開號:

CN105468377A

公開日:

2016.04.06

當前法律狀態:

駁回

有效性:

無權

法律詳情: 發明專利申請公布后的駁回IPC(主分類):G06F 9/44申請公布日:20160406|||實質審查的生效IPC(主分類):G06F 9/44申請日:20151210|||公開
IPC分類號: G06F9/44 主分類號: G06F9/44
申請人: 北京中科匯聯科技股份有限公司
發明人: 游世學; 孟凡興
地址: 100094北京市海淀區東北旺西路8號9號樓二區305
優先權:
專利代理機構: 北京慶峰財智知識產權代理事務所(普通合伙)11417 代理人: 李文軍
PDF完整版下載: PDF下載
法律狀態
申請(專利)號:

CN201510917312.3

授權公告號:

||||||

法律狀態公告日:

2018.02.09|||2016.06.29|||2016.04.06

法律狀態類型:

發明專利申請公布后的駁回|||實質審查的生效|||公開

摘要

本發明涉及互聯網技術領域,具體是一種移動終端頁面生成方法,所述方法包括:S1、根據用戶需求選取對應類型的控件;S2、將控件加載到頁面,調整控件在頁面中的展示位置;S3、為控件設置控件模板;S4、為控件設置數據;S5、根據頁面上的控件、控件模板和設置數據進行頁面渲染。本發明還提供了一種移動終端頁面生成系統。本發明在頁面構建中引入控件概念,每個頁面都有一個或多個控件組裝而成,其操作簡單,降低了用戶構建移動站點的門檻,也提高了創建移動站點的效率。

權利要求書

1.一種移動端頁面生成方法,其特征在于,所述方法包括:
S1、根據用戶需求選取對應類型的控件;
S2、將控件加載到頁面,調整控件在頁面中的展示位置;
S3、為控件設置控件模板;
S4、為控件設置數據;
S5、根據頁面上的控件、控件模板和設置數據進行頁面渲染。
2.根據權利要求1所述的移動端頁面生成方法,其特征在于,
控件的類型包括圖片控件、文字控件、導航控件和幻燈片控件;每一
類控件對應一個默認模板代碼和默認樣式,默認樣式為控件適應移動
終端設備的樣式;
所述將控件加載到頁面,并調整控件在頁面中的展示位置具體為:
將控件拖動到頁面,并通過拖動方式調整控件在頁面中的位置。
3.根據權利要求1所述的移動端頁面生成方法,其特征在于,
所述為控件設置控件模板包括:從系統內置的控件模板中為控件選擇
相應的控件模板,或者由用戶為控件編寫相應的控件模板。
4.根據權利要求1-3中任意一項所述的移動端頁面生成方法,其
特征在于,所述根據頁面上的控件、控件模板和設置數據進行頁面渲
染包括:
S21、獲取頁面設置的公共信息,所述公共信息包括頁面設置的
title、meta數據;
S22、獲取頁面設置的展示樣式信息,所述展示樣式信息包括頁
面中所有控件的公共css、js代碼;
S23、按順序獲取頁面上所有的控件,把控件組裝成一個列表;
S24、調用每個控件的渲染流程,獲取每個控件渲染出的HTML代
碼;
S25、把步驟S24得到的所有控件的HTML代碼加載到頁面上;
S26、分別把得到的代碼加載到頁面上,得到完整頁面。
5.根據權利要求4所述的移動端頁面生成方法,其特征在于,所
述步驟S24中調用每個控件的渲染流程,獲取每個控件渲染出的HTML
代碼具體包括:
S11、獲取用戶為控件設置的數據;
S12、獲取控件的控件模板數據;
S13、把控件模板中的變量數據替換成用戶為控件設置的數據來
組裝成一段html5代碼。
6.一種移動端頁面生成系統,其特征在于,包括:
控件數據庫,用于存儲各個類型的控件和控件模板;
加載模塊,用于將控件加載到頁面,調整控件在頁面中的展示位
置;
設置模塊,用于設置控件的控件模板;
數據添加模塊,用于供用戶為控件設置數據;
渲染模塊,用于根據頁面上的控件、控件模板和設置數據進行頁
面渲染。
7.根據權利要求6所述的移動端頁面生成系統,其特征在于,
控件的類型包括圖片控件、文字控件、導航控件和幻燈片控件;每一
類控件對應一個默認模板代碼和默認樣式,默認樣式為控件適應移動
終端設備的樣式;
所述控件模板用來展示控件的樣式和動畫效果;
所述加載模塊具體用于將控件拖動到頁面,并通過拖動方式調整
控件在頁面中的位置。
8.根據權利要求6所述的移動端頁面生成系統,其特征在于,
所述設置模塊包括:
選擇單元,用于供用戶從所述控件數據庫中為控件選擇相應的控
件模板,
自定義單元,用于供用戶為控件編寫相應的控件模板。
9.根據權利要求6-8中任意一項所述的移動端頁面生成系統,
其特征在于,所述渲染模塊包括,
第一獲取單元,用于獲取頁面設置的公共信息,所述公共信息包
括頁面設置的title、meta數據;
第二獲取單元,用于獲取頁面設置的展示樣式信息,所述展示樣
式信息包括頁面中所有控件的公共css、js代碼;
組裝單元,用于按順序獲取頁面上所有的控件,把控件組裝成一
個列表;
渲染單元,用于調用每個控件的渲染流程,獲取每個控件渲染出
的HTML代碼;
第一加載單元,用于把渲染得到的所有控件的HTML代碼加載到
頁面上;
第二加載單元,用于分別把得到的代碼加載到頁面上,得到完整
頁面。
10.根據權利要求9所述的移動端頁面生成系統,其特征在于,
所述渲染單元包括:
第一獲取子單元,用于獲取用戶為控件設置的數據;
第二獲取子單元,用于獲取控件的控件模板數據;
生成子單元,用于把控件模板中的變量數據替換成用戶為控件設
置的數據來組裝成一段html5代碼。

說明書

一種移動端頁面生成方法及系統

技術領域

本發明涉及互聯網技術領域,特別是一種移動終端頁面生成方法及系統。

背景技術

近年來,移動互聯網迅猛發展、智能設備呈爆發式增長并展現出巨大的潛
力,互聯網已經進入了移動智能時代。從終端方面來看,除了智能手機外,智
能手表、智能眼鏡、智能手環等可穿戴智能設備逐漸步入人們的視野,人與人、
人與網絡、人與設備之間的交互方式正在改變;互聯網接入速度方面,我們正
步入4G時代,無論是從接入的便捷性還是傳輸速度都得到了大幅度的提升。
截至2014年6月,我國網民規模達6.32億,互聯網普及率為46.9%,手機上
網比例首次超越傳統PC上網比例。同時,社會化媒體極大豐富,從微博、微
信到社交網站、論壇等等,人們獲取信息和服務、交流感情的渠道極大擴展,
呈現出多樣化的形態。

據不完全統計目前移動端網頁瀏覽量已經達到整體瀏覽量60%以上,通過
移動端成交記錄也在慢慢增多,這也從側面證明了移動端未來的發展前景和巨
大的市場。移動端頁面制作已經成為當今互聯網必不可缺的要素之一。HTML5
“一次開發,多處兼容”的特性,使得企業能以最小的開發成本,設計、創造和
管理更加先進也更加復雜的應用,并且可以橫跨多種平臺和設備。業界向
HTML5的轉變,不僅僅是因為這門編程語言本身的連貫表現和功能創新,還
要歸功于運行網絡應用的瀏覽器的大幅度改進。越來越多的企業開始放棄使用
InternetExplorer,在工作中轉而使用Chrome和Firefox—后兩者HTML5都
有著更好支持。

目前HTML5頁面的生成一般是由美術設計師進行整體頁面設計,然后由
前端工程師對美術設計的頁面進行切圖、編碼然后再到web服務器中發布。但
是目前這種流程存在一些問題:第一,HTML5是一種相對新興的技術目前技
術人員比較少,企業很難招到合適的技術人員;第二,HTML5開發相對比較
難,前端的工作對開發人員的要求比較高。第三,目前這種先由美術設計,再
由前端技術人員開發的實施周期比較長,無法滿足當今移動互聯網發展的速度。

以上問題導致很多企業創建移動站點速度比較慢,無法追趕高速前進的移
動互聯網的浪潮,影響企業宣傳和移動業務的發展。

發明內容

為了能夠提高移動終端頁面的生成效率,降低用戶構建移動站點的門檻,
本發明提出一種基于HTML5的控件渲染模板技術的移動端頁面生成方法,其
基本構思為:在移動端頁面的構建中引入“控件”概念,設置控件模板,通過
控件和控件模板自由組裝來得到一個頁面,最后頁面的公式:頁面=N*(控件+
控件模板),N≥1。

本發明提供一種移動端頁面生成方法,所述方法包括:

S1、根據用戶需求選取對應類型的控件;

S2、將控件加載到頁面,調整控件在頁面中的展示位置;

S3、為控件設置控件模板;

S4、為控件設置數據;

S5、根據頁面上的控件、控件模板和設置數據進行頁面渲染。

具體地,控件的類型包括圖片控件、文字控件、導航控件和幻燈片控件;
每一類控件對應一個默認模板代碼和默認樣式,默認樣式為控件適應移動終端
設備的樣式;

所述將控件加載到頁面,并調整控件在頁面中的展示位置具體為:將控件
拖動到頁面,并通過拖動方式調整控件在頁面中的位置。

具體地,所述為控件設置控件模板包括:從系統內置的控件模板中為控件
選擇相應的控件模板,或者由用戶為控件編寫相應的控件模板。

具體地,所述根據頁面上的控件、控件模板和設置數據進行頁面渲染包括:

S21、獲取頁面設置的公共信息,所述公共信息包括頁面設置的title、meta
數據;

S22、獲取頁面設置的展示樣式信息,所述展示樣式信息包括頁面中所有
控件的公共css、js代碼;

S23、按順序獲取頁面上所有的控件,把控件組裝成一個列表;

S24、調用每個控件的渲染流程,獲取每個控件渲染出的HTML代碼;

S25、把步驟S24得到的所有控件的HTML代碼加載到頁面上;

S26、分別把得到的代碼加載到頁面上,得到包含head、title、mete、css、
js、body的完整頁面。

進一步地,所述步驟S24中調用每個控件的渲染流程,獲取每個控件渲染
出的HTML代碼具體包括:

S11、獲取用戶為控件設置的數據;

S12、獲取控件的控件模板數據;

S13、把控件模板中的變量數據替換成用戶為控件設置的數據來組裝成一
段html5代碼。

相應地,本發明還提供了一種移動端頁面生成系統,包括:

控件數據庫,用于存儲各個類型的控件和控件模板;

加載模塊,用于將控件加載到頁面,調整控件在頁面中的展示位置;

設置模塊,用于設置控件的控件模板;

數據添加模塊,用于供用戶為控件設置數據;

渲染模塊,用于根據頁面上的控件、控件模板和設置數據進行頁面渲染。

具體地,控件的類型包括圖片控件、文字控件、導航控件和幻燈片控件;
每一類控件對應一個默認模板代碼和默認樣式,默認樣式為控件適應移動終端
設備的樣式;

所述控件模板用來展示控件的樣式和動畫效果;

所述加載模塊具體用于將控件拖動到頁面,并通過拖動方式調整控件在頁
面中的位置。

具體地,所述設置模塊包括:

選擇單元,用于供用戶從所述控件數據庫中為控件選擇相應的控件模板,

自定義單元,用于供用戶為控件編寫相應的控件模板。

具體地,所述渲染模塊包括,

第一獲取單元,用于獲取頁面設置的公共信息,所述公共信息包括頁面設
置的title、meta數據;

第二獲取單元,用于獲取頁面設置的展示樣式信息,所述展示樣式信息包
括頁面中所有控件的公共css、js代碼;

組裝單元,用于按順序獲取頁面上所有的控件,把控件組裝成一個列表;

渲染單元,用于調用每個控件的渲染流程,獲取每個控件渲染出的HTML
代碼;

第一加載單元,用于把渲染得到的所有控件的HTML代碼加載到頁面上;

第二加載單元,用于分別把得到的代碼加載到頁面上,得到包含head、
title、mete、css、js、body的完整頁面。

進一步地,所述渲染單元包括:

第一獲取子單元,用于獲取用戶為控件設置的數據;

第二獲取子單元,用于獲取控件的控件模板數據;

生成子單元,用于把控件模板中的變量數據替換成用戶為控件設置的數據
來組裝成一段html5代碼。

本發明突破傳統的頁面構建方法,通過控件組裝和頁面渲染來快速構建移
動端頁面。本發明創建了包括各類控件和控件模板的控件數據庫,每個控件模
板都是由一段HTML5代碼、CSS代碼和JS代碼構成,通過控件和控件模板自
由組合得到頁面,經過渲染形成完整的移動端頁面。

本發明具有以下有益效果:

(1)操作簡單,降低了用戶構建移動站點的門檻,用戶不需要會html5
編碼,只要知道需要什么樣的頁面,為控件設置相應的數據,就可以拼裝成頁
面,用戶通過選擇控件和對應的模板就可以構建出一個移動端頁面。

(2)減少了編碼工作量,對于會寫html5代碼的用戶,用戶可以按照自己
的意愿編寫控件模板,該模板存儲后可以應用于多個頁面上的控件,減少了編
碼的工作量,可一次編寫多處使用。

(3)增加了創建移動站點的效率,相對常規的建站流程,本發明通過拖
動控件到頁面,然后選擇控件模板進行組裝的方式進行建站,能夠大大增加創
建移動站點的效率。

附圖說明

為了更清楚地說明本發明的技術方案,下面將對實施例或現有技術描述中
所需要使用的附圖作簡單地介紹,顯而易見地,下面描述中的附圖僅僅是本發
明的一些實施例,對于本領域普通技術人員來講,在不付出創造性勞動的前提
下,還可以根據這些附圖獲得其它附圖。

圖1是本發明方法的流程示意圖;

圖2是本發明的控件組裝頁面示意圖。

具體實施方式

下面將結合本發明實施例中的附圖,對本發明實施例中的技術方案進行清
楚、完整地描述,顯然,所描述的實施例僅僅是本發明一部分實施例,而不是
全部的實施例。基于本發明中的實施例,本領域普通技術人員在沒有作出創造
性勞動的前提下所獲得的所有其他實施例,都屬于本發明保護的范圍。

本發明提供一種移動端頁面生成方法,參見圖1,所述方法包括:

S1、根據用戶需求選取對應類型的控件。

具體地,控件的類型包括圖片控件、文字控件、導航控件、幻燈片控件等,
每一類控件都可以組成頁面的一部分,用戶可以根據需要進行選取。而每一類
控件都對應一個默認模板代碼和默認樣式,這個默認樣式能夠保證該控件在不
選擇其他模板的情況下能夠有一個適應移動端設備的樣式。

S2、將控件加載到頁面,調整控件在頁面中的展示位置。

用戶選取的控件可以隨意拖動到頁面上的任意位置,且能夠按照用戶的需
求調節順序,拖動后的控件用默認模板展示在頁面上。

S3、為控件設置控件模板。

具體地,所述為控件設置控件模板包括:從系統內置的控件模板中為控件
選擇相應的控件模板,或者由用戶為控件編寫相應的控件模板,所述控件模板
用來展示該控件在頁面中的樣式和動畫效果。

S4、為控件設置數據。

用戶可以對每個控件設置需要的數據,例如圖片控件可以選擇不同的圖片,
文字控件寫需要的文字,導航控件設置每個導航跳轉到頁面,文章列表控件選
擇需要展示的文章列表和每個文章跳轉的詳細頁面等等其他控件需要的數據。

S5、根據頁面上的控件、控件模板和設置數據進行頁面渲染。

把頁面上的控件、控件設置的模板和控件設置的數據渲染出一個html5的
頁面,包括單個控件渲染和頁面渲染。

單個控件渲染方法為:調用每個控件的渲染流程,獲取每個控件渲染出的
HTML代碼,具體包括:

S11、獲取用戶為控件設置的數據;從控件緩存中獲取控件的設置數據,
如果緩存中沒有數據則上數據庫中讀取數據,然后把數據加載到緩存中,這樣
能夠加快渲染控件的效率。

S12、獲取控件的控件模板數據;獲取用戶為該控件選擇的控件模板或者
自定義的控件模板內容,如果沒有則使用該控件的默認模板數據。

S13、把控件模板中的變量數據替換成用戶為控件設置的數據來組裝成一
段html5代碼。

所述頁面渲染方法包括:

S21、獲取頁面設置的公共信息,所述公共信息包括頁面設置的title、meta
數據;

S22、獲取頁面設置的展示樣式信息,所述展示樣式信息包括頁面中所有
控件的公共css、js代碼;

S23、按順序獲取頁面上所有的控件,把控件組裝成一個列表;

S24、調用每個控件的渲染流程,獲取每個控件渲染出的HTML代碼;

S25、把步驟S24得到的所有控件的HTML代碼加載到頁面上;

S26、分別把得到的代碼加載到頁面上,得到包含head、title、mete、css、
js、body的完整頁面。圖2為用各類控件組裝完成的頁面。

為了讓每個控件都能兼容移動端的各種瀏覽器,本發明中,每個控件都有
一個默認的控件模板,每個控件模板是由一段HTML5代碼、CSS代碼和JS代碼
構成;為保證控件的多樣化,用戶可根據需要為控件選擇或自定義控件模板,
也可以為控件設置需要的數據,這樣,通過控件和控件模板的自由組合可以呈
現不同的展示效果。渲染頁面時先渲染單個控件,然后渲染整體頁面,最后呈
現給用戶一個完整的移動端頁面。

相應地,本發明還提供了一種移動端頁面生成系統,包括:

控件數據庫,用于存儲各個類型的控件和控件模板;

加載模塊,用于將控件加載到頁面,調整控件在頁面中的展示位置;

設置模塊,用于設置控件的控件模板;

數據添加模塊,用于供用戶為控件設置數據;

渲染模塊,用于根據頁面上的控件、控件模板和設置數據進行頁面渲染。

具體地,控件的類型包括圖片控件、文字控件、導航控件和幻燈片控件;
每一類控件對應一個默認模板代碼和默認樣式,默認樣式為控件適應移動終端
設備的樣式;

所述控件模板用來展示控件的樣式和動畫效果;

所述加載模塊具體用于將控件拖動到頁面,并通過拖動方式調整控件在頁
面中的位置。

具體地,所述設置模塊包括:

選擇單元,用于供用戶從所述控件數據庫中為控件選擇相應的控件模板,

自定義單元,用于供用戶為控件編寫相應的控件模板。

具體地,所述渲染模塊包括,

第一獲取單元,用于獲取頁面設置的公共信息,所述公共信息包括頁面設
置的title、meta數據;

第二獲取單元,用于獲取頁面設置的展示樣式信息,所述展示樣式信息包
括頁面中所有控件的公共css、js代碼;

組裝單元,用于按順序獲取頁面上所有的控件,把控件組裝成一個列表;

渲染單元,用于調用每個控件的渲染流程,獲取每個控件渲染出的HTML
代碼;

第一加載單元,用于把渲染得到的所有控件的HTML代碼加載到頁面上;

第二加載單元,用于分別把得到的代碼加載到頁面上,得到包含head、
title、mete、css、js、body的完整頁面。

進一步地,所述渲染單元包括:

第一獲取子單元,用于獲取用戶為控件設置的數據;

第二獲取子單元,用于獲取控件的控件模板數據;

生成子單元,用于把控件模板中的變量數據替換成用戶為控件設置的數據
來組裝成一段html5代碼。

本發明在頁面構建中引入控件概念,每個頁面都有一個或多個控件組裝而
成,操作簡單,降低了用戶構建移動站點的門檻,也提高了創建移動站點的效
率。

以上所揭露的僅為本發明的一種較佳實施例而已,當然不能以此來限定本
發明之權利范圍,因此依本發明權利要求所作的等同變化,仍屬本發明所涵蓋
的范圍。

關 鍵 詞:
一種 移動 頁面 生成 方法 系統
  專利查詢網所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:一種移動端頁面生成方法及系統.pdf
鏈接地址:http://www.rgyfuv.icu/p-6341413.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服客服 - 聯系我們

[email protected] 2017-2018 zhuanlichaxun.net網站版權所有
經營許可證編號:粵ICP備17046363號-1 
 


收起
展開
山东11选5中奖结果走势图