CN105468377A - 一种移动端页面生成方法及系统 - Google Patents

Abstract

本发明涉及互联网技术领域，具体是一种移动终端页面生成方法，所述方法包括：S1、根据用户需求选取对应类型的控件；S2、将控件加载到页面，调整控件在页面中的展示位置；S3、为控件设置控件模板；S4、为控件设置数据；S5、根据页面上的控件、控件模板和设置数据进行页面渲染。本发明还提供了一种移动终端页面生成系统。本发明在页面构建中引入控件概念，每个页面都有一个或多个控件组装而成，其操作简单，降低了用户构建移动站点的门槛，也提高了创建移动站点的效率。

Description

一种移动端页面生成方法及系统

技术领域

本发明涉及互联网技术领域，特别是一种移动终端页面生成方法及系统。

背景技术

近年来，移动互联网迅猛发展、智能设备呈爆发式增长并展现出巨大的潜力，互联网已经进入了移动智能时代。从终端方面来看，除了智能手机外，智能手表、智能眼镜、智能手环等可穿戴智能设备逐渐步入人们的视野，人与人、人与网络、人与设备之间的交互方式正在改变；互联网接入速度方面，我们正步入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代码。

本发明在页面构建中引入控件概念，每个页面都有一个或多个控件组装而成，操作简单，降低了用户构建移动站点的门槛，也提高了创建移动站点的效率。

以上所揭露的仅为本发明的一种较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

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代码。