CN105574207A - 一种wap网页开发方法 - Google Patents

Abstract

本发明公开了一种WAP网页开发方法，包括步骤：客户端发出请求目标URL的请求指令，并获取后端系统根据预设的路由跳转机制返回标示了用户访问资源原始URL的页面元素生成器；客户端接收到页面元素生成器后，页面元素生成器自动请求访问资源原始URL，并获取后端系统返回的原始页面元素的配置信息和页面数据；页面元素生成器根据获取到的页面元素的配置信息，重组相应的页面组件，并加载相应的数据，完成WAP页面重绘。本发明的方法可以提高WAP网页开发效率。

Description

一种WAP网页开发方法

技术领域

本发明涉及互联网领域，特别是涉及一种WAP网页开发方法。

背景技术

随着通信技术和移动互联网技术的发展，移动互联网使用量呈爆发式发展。根据工信部的统计数据，2015年上半年用户月均移动互联网流量达到321.5MB，同比增长83.7％。移动用户对网络信息需求量的扩大对互联网企业在生产互联网产品的效率和质量上提出的更高的要求。WAP网页是移动网络传输中的主要内容，手机App中可以通过直接嵌入WAP网页来实现主要功能，因此WAP网页开发设计成为移动互联网开发工作的主要内容之一。

而现有的WAP网页开发技术，在开发的过程中，需要遵循页面方案设计、方案确定、页面前后端开发与调试的工作流程，开发完成后，测试人员需要在不同的手机品牌、操作系统(Android、iPhone)及版本、屏幕尺寸等条件下测试页面显示及功能是否正常。按照这种传统的“生产模式”开发WAP页面，不仅周期长，测试工作繁杂，而且很可能造成开发出的产品在风格上不一致，尤其是当同一产品由多个开发人员开发实施时，页面代码风格不一致，且增加了产品日后维护和升级的复杂度。WAP网页开发人员在编写含以上功能的页面时，往往进行大量重复的工作，且需要按照一般的开发流程，生产效率低下。

应该注意，上面对技术背景的介绍只是为了方便对本申请的技术方案进行清楚、完整的说明，并方便本领域技术人员的理解而阐述的。不能仅仅因为这些方案在本申请的背景技术部分进行了阐述而认为上述技术方案为本领域技术人员所公知。

发明内容

有鉴于现有技术的上述缺陷，本发明所要解决的技术问题是提供一种能够提高WAP网页开发效率的WAP网页开发方法。

为实现上述目的，本发明提供了一种WAP网页开发方法，包括步骤：

客户端发出请求目标URL的请求指令，并获取后端系统根据预设的路由跳转机制返回标示了用户访问资源原始URL的页面元素生成器；

客户端接收到页面元素生成器后，页面元素生成器自动请求访问资源原始URL，并获取后端系统返回的原始页面元素的配置信息和页面数据；

页面元素生成器根据获取到的页面元素的配置信息，重组相应的页面组件，并加载相应的数据，完成WAP页面重绘。优选的，在页面元素生成器在获取后端系统返回的原始页面元素的配置信息和页面数据步骤后：

页面元素生成器获取页面元素配置信息和业务逻辑数据；

遍历通用组件数组，将自定义属性替换成相应组件的HTML模板；

加载相应的数据，完成WAP页面重绘。具体的，页面元素生成器是一套基于AngularJS开发的前端框架，整体设计思想是通过使用angular中的指令(Directive)机制，将自定义的熟悉替换为目标html代码，同时为U了能重用相关组件，减少代码冗余，预先建立了带参数的通用组件数组的html模板，通过页面元素生成器和通用组件数组的结合运用，在html模板中使用angular指令，结合页面元素配置参数，可以动态生成相应的组件html代码，加快WAP页面重绘工作，大大提高开发效率。

优选的，所述将自定义属性替换成相应组件的HTML模板的步骤包括：

遍历组件内部子元素配置数组，重组开发子元素的HTML模板。除了带参数的通用组件数组的html模板外，对应通用组件内部的子元素，也预先建立了对应的html模板，进一步提高开发效率。

优选的，所述通用组件数组包括语言数组，后端系统在返回原始页面元素的配置信息时，根据客户端所在地区及预设支持的语言返回相应语言版本的页面内容。该通用组件数组，在涵盖现有通用组件的基础上，额外增加语言数组，通过预设在各个语言环境下的组件显示语言内容，后端系统在返回页面元素配置时，会根据客户端所在地区及预设支持的语言返回相应版本的页面内容，减少了多语言支持下的重复开发工作，提高开发效率，缩短开发周期。

优选的，所述通用组件数组包含在后端系统的通用组件库中，所述通用组件库对外开放接口，并允许收纳添加符合预设条件的新组件。通用组件数组包含了集成于后端系统的通用组件库中，该组件库预先建立了常见的通用组件，并对外开发接口，运行开发人员等根据自己的需求，二外添加符合预设条件的新组件，使得该通用组件库可以随着开发进程的前进以及技术的进步与时俱进，避免出现通用组件库落后于时代需求的情况发生；这使得本方法具备良好的可拓展性，对于具备“共性”，无需对应每次页面开发单独构建的页面、组件等都支持拓展实现相应的“组件库”，以便日后重复使用。

优选的，所述通用组件库至少定义了表单大组件结构、列表大组件结构、图表大组件结构和只显示内容的信息块大组件结构，以及大组件结构内部子元素的结构。通用组件库多层级的定义大组件结构，以及大组件结构的内部子元素结构，使得该通用组件库更具实用性，在较大页面修改和较小页面修改时候都能够给予开发人员以帮助。

优选的，所述页面元素生成器包括一自定义模组，通过所述自定义模组可以将页面特殊的内容通过自定义代码的方式嵌入WAP页面。自定义模组的设置，使得本方法具备可拓展性，WAP页面的设计方案千千万万，要满足实际产品需求，许多预先设定的模板、组件等无法完全满足WAP页面开发的需求，而通过该自定义模组，则可以将页面特殊的内容通过自定义代码嵌入页面，以确保页面开发能够有效进行。

优选的，所述客户端发出请求目标URL的请求指令的步骤包括：

在发出请求指令的同时，携带客户端的硬件信息；

后端系统根据硬件信息返回对应版本的页面元素生成器；

所述页面元素生成器至少包括高版本页面元素生成器和低版本页面元素生成器。本方案，使得本方法对移动终端等设备具备良好的兼容性，以Android设备为例，针对WAP页面在Android新老版本系统上显示的差异，设计了高低版本的“页面元素生成器”，分别采用了不同的CSS组件库，其中高版本页面元素生成器支持Android4.0以上版本，低版本页面元素生成器支持Android2.3以上版本，根据用户访问系统时所带的硬件信息(UserAgent)，判断返回对应页面元素生成器的版本，这使得本方案既能满足大多数用户体验最新的UI设计风格，又保证旧版手机用户能正常浏览和使用页面功能。。

优选的，所述路由跳转机制由路由器转换器实现，所述路由器转换器集成于后端系统，并对外开放接口。路由转换器的开放透明，使得开发人员可以更好地使用本发明的方法。

优选的，当所述请求指令的类型为Get时，重置目标URL为页面元素生成器的下载地址，所述页面元素生成器至少包括页面重建功能脚本和预设的默认使用的UI前端框架；

当所述的请求指令的类型为Post时，按照预设默认方式，返回原始页面元素的配置信息和页面数据，数据格式为JSON。在处理路由跳转时，设置这样的请求规则，可以将整个WAP页面开发的流程进行一定程度的拆分，但又使其进行很好的对应整合。

本发明的有益效果是：本发明的方法，由于设置了路由器跳转机制，以及返回标示了用户访问资源原始URL的页面元素生成器，这使得使用本方法开发或生成WAP网页，无需按照传统的生产模式，进行大量重复的工作，而是先确定一个“模型”，并在此基础上，根据原始页面元素的配置信息，快速重组相应的页面组件，加载相应的数据，最后完成WAP页面重绘，大大提高了WAP页面开发效率，缩短了开发周期；在此过程中，网页开发人员只需要配置目标页面元素的结构和页面数据，不需要进行其他的页面设计、样式调整等工作，极大的提高了WAP页面的开发效率；而且，该页面元素生成器是根据页面显示元素的参数完成自动重组页面的，即建立的“模型”与数据是双向绑定的，不会出现页面构件过程和数据处理过程完全分离，而可能出现的无法良好匹配而增加日后维护和升级难度的情况发生。

参照后文的说明和附图，详细公开了本申请的特定实施方式，指明了本申请的原理可以被采用的方式。应该理解，本申请的实施方式在范围上并不因而受到限制。在所附权利要求的精神和条款的范围内，本申请的实施方式包括许多改变、修改和等同。

针对一种实施方式描述和/或示出的特征可以以相同或类似的方式在一个或更多个其它实施方式中使用，与其它实施方式中的特征相组合，或替代其它实施方式中的特征。

应该强调，术语“包括/包含”在本文使用时指特征、整件、步骤或组件的存在，但并不排除一个或更多个其它特征、整件、步骤或组件的存在或附加。

附图说明

所包括的附图用来提供对本申请实施例的进一步的理解，其构成了说明书的一部分，用于例示本申请的实施方式，并与文字描述一起来阐释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1是本发明实施例一种WAP网页开发方法的流程图；

图2是本发明实施例的页面元素生成器的处理步骤；

图3是本发明实施例设置路由自动跳转逻辑的示意图；

图4是本发明实施例后端系统的主要构成图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都应当属于本申请保护的范围。

图1是本发明实施例一种WAP网页开发方法的流程图，参见图1，该WAP网页开发方法，包括步骤：

S1:客户端发出请求目标URL的请求指令，并获取后端系统根据预设的路由跳转机制返回标示了用户访问资源原始URL的页面元素生成器；

S2:客户端接收到页面元素生成器后，页面元素生成器自动请求访问资源原始URL，并获取后端系统返回的原始页面元素的配置信息和页面数据；

S3：页面元素生成器根据获取到的页面元素的配置信息，重组相应的页面组件，并加载相应的数据，完成WAP页面重绘。

本发明的有益效果是：本发明的方法，由于设置了路由器跳转机制，以及返回标示了用户访问资源原始URL的页面元素生成器，这使得使用本方法开发或生成WAP网页，无需按照传统的生产模式，进行大量重复的工作，而是先确定一个“模型”，并在此基础上，根据原始页面元素的配置信息，快速重组相应的页面组件，加载相应的数据，最后完成WAP页面重绘，大大提高了WAP页面开发效率，缩短了开发周期；在此过程中，网页开发人员只需要配置目标页面元素的结构和页面数据，不需要进行其他的页面设计、样式调整等工作，极大的提高了WAP页面的开发效率；而且，该页面元素生成器是根据页面显示元素的参数完成自动重组页面的，即建立的“模型”与数据是双向绑定的，不会出现页面构件过程和数据处理过程完全分离，而可能出现的无法良好匹配而增加日后维护和升级难度的情况发生。

“页面元素生成器”是前端页面的核心部件，用户最终访问到的页面都是由核心部件自我“转型”而产生，是一个“零代码”的前端框架。首先，“页面元素生成器”能自动请求附加的原始资源信息；其次，当获取到后端系统返回的页面元素配置信息和页面数据后，“页面元素生成器”能自动重组页面元素，并加载页面数据，从空白的页面“转型”为包含所有元素的完整页面；最后，“转型”的页面功能正常触发并响应。“页面元素生成器”是本发明的创新点，是系统运行的基础部件，对WAP页面开发人员完全透明。

本发明的客户端、用户可以是各种移动终端设备，也可以是WAP页面开发人员的开发设备等。

图2是本发明实施例的页面元素生成器的处理步骤，图3是本发明实施例设置路由自动跳转逻辑的示意图，图4是本发明实施例后端系统的主要构成图，结合图1、图2、图3和图4可知：

本实施例优选的，在页面元素生成器在获取后端系统返回的原始页面元素的配置信息和页面数据步骤后：

页面元素生成器获取页面元素配置信息和业务逻辑数据；

遍历通用组件数组，将自定义属性替换成相应组件的HTML模板；

加载相应的数据，完成WAP页面重绘。具体的，页面元素生成器是一套基于AngularJS开发的前端框架，整体设计思想是通过使用angular中的指令(Directive)机制，将自定义的熟悉替换为目标html代码，同时为U了能重用相关组件，减少代码冗余，预先建立了带参数的通用组件数组的html模板，通过页面元素生成器和通用组件数组的结合运用，在html模板中使用angular指令，结合页面元素配置参数，可以动态生成相应的组件html代码，加快WAP页面重绘工作，大大提高开发效率。

本实施例优选的，将自定义属性替换成相应组件的HTML模板的步骤包括：

遍历组件内部子元素配置数组，重组开发子元素的HTML模板。除了带参数的通用组件数组的html模板外，对应通用组件内部的子元素，也预先建立了对应的html模板，进一步提高开发效率。

本实施例优选的，通用组件数组包括语言数组，后端系统在返回原始页面元素的配置信息时，根据客户端所在地区及预设支持的语言返回相应语言版本的页面内容。该通用组件数组，在涵盖现有通用组件的基础上，额外增加语言数组，通过预设在各个语言环境下的组件显示语言内容，后端系统在返回页面元素配置时，会根据客户端所在地区及预设支持的语言返回相应版本的页面内容，减少了多语言支持下的重复开发工作，提高开发效率，缩短开发周期。

本实施例优选的，通用组件数组包含在后端系统的通用组件库中，所述通用组件库对外开放接口，并允许收纳添加符合预设条件的新组件。通用组件数组包含了集成于后端系统的通用组件库中，该组件库预先建立了常见的通用组件，并对外开发接口，运行开发人员等根据自己的需求，二外添加符合预设条件的新组件，使得该通用组件库可以随着开发进程的前进以及技术的进步与时俱进，避免出现通用组件库落后于时代需求的情况发生；这使得本方法具备良好的可拓展性，对于具备“共性”，无需对应每次页面开发单独构建的页面、组件等都支持拓展实现相应的“组件库”，以便日后重复使用。

本实施例优选的，通用组件库至少定义了表单大组件结构、列表大组件结构、图表大组件结构和只显示内容的信息块大组件结构，以及大组件结构内部子元素的结构。通用组件库多层级的定义大组件结构，以及大组件结构的内部子元素结构，使得该通用组件库更具实用性，在较大页面修改和较小页面修改时候都能够给予开发人员以帮助。

综上所述，可知，本发明对页面通用元素进行了结构化定义，并得到WAP页面开发人员能够直接使用的各层级组件库、组件数组等，其中详细定义了常见的表单、列表、图表和只显示内容的信息块等用于显示的大组件结构，及构成大组件内部子元素的结构；通过面向对象的软件设计原则，设计“组件库”的对外开发接口，最终WAP页面开发人员可以使用“组件库”，通过定义组件的属性，快速“搭建”WAP页面。

更具体的，通用组件库是WAP页面和常见页面元素的归纳与抽象，归纳和定义了许多可配置的属性：

如表1和表2所示，具体定义了丰富的表单元素和完备的表单功能。表单组件支持的子元素有单行文本、多行文本、密码、数字、电话、邮箱、网址输入、文件上传、图片显示、单项选择等常见元素外，还支持联动选择控件、省市区联动选择控件、地图控件、验证码。功能上支持常见的表单数据提交(Postformdata)和查询统计表单(Getstaticsresult)。

表1.表单属性

表2.一般表单元素

如表3所示，定义了多风格的列表显示方式，并支持常见的列表操作。归纳总结了常见风格的列表后，设计了默认表格风格的列表、Win8图标排列风格的列表、时间轴顺序排列的列表、“微信”风格的列表和“上药”风格的列表(“上药控股服务为荣”项目中设计采用的一种列表显示风格)。关于列表中常见的操作，包括数据检索、删除选择行记录、分页获取数据等，其中分页获取数据功能支持通过点击“下一页”按钮和滑动页面加载下一页数据两张操作方式，以满足一般列表的功能性需求。

表3.列表组件属性

如表3所示，定义了多样的图表显示方式，发明支持常见的柱状图、饼图、曲线图、圆环图、极地图和雷达图。根据各个图表的数据源结构的差异，定义了各图表通用的数据结构，这样开发人员在搭建含图表组件的页面时，只需要定义图表组件的类型和数据源，就完成了图表功能的开发(“页面元素生成器”会自动生成目标图表元素)。通用组件库根据对可配置的属性和操作进行归纳总结，设计实现了相关类与接口，供开发人员直接使用。开发人员使用组件库搭建WAP页面时，最终返回到客户端的是页面配置信息的json数据。

表4.图表组件属性

本实施例优选的，页面元素生成器包括一自定义模组，通过所述自定义模组可以将页面特殊的内容通过自定义代码的方式嵌入WAP页面。自定义模组的设置，使得本方法具备可拓展性，WAP页面的设计方案千千万万，要满足实际产品需求，许多预先设定的模板、组件等无法完全满足WAP页面开发的需求，而通过该自定义模组，则可以将页面特殊的内容通过自定义代码嵌入页面，以确保页面开发能够有效进行。

虽然本发明的通用组件库等进行了详细的定义，但仍然支持引入自定义的CSS样式；根据预定义的各组件的参数，“页面元素生成器”设定了元素未定义的属性的默认样式；针对特殊的需求，发明支持开发人员添加自定义的CSS样式改变元素的默认显示样式，对不具有“共性”的页面，发明支持通过嵌入自定义代码的方式将页面特殊的内容通过自定义代码嵌入页面；对具有“共性”的页面，发明支持扩展实现相应的“组件库”，以便日后重复使用，这使得本发明的方法具备可拓展性，可以与时俱进。

本实施例优选的，客户端发出请求目标URL的请求指令的步骤包括：

在发出请求指令的同时，携带客户端的硬件信息；

后端系统根据硬件信息返回对应版本的页面元素生成器；

页面元素生成器至少包括高版本页面元素生成器和低版本页面元素生成器。本方案，使得本方法对移动终端等设备具备良好的兼容性，以Android设备为例，针对WAP页面在Android新老版本系统上显示的差异，设计了高低版本的“页面元素生成器”，分别采用了不同的CSS组件库，其中高版本页面元素生成器支持Android4.0以上版本，低版本页面元素生成器支持Android2.3以上版本，根据用户访问系统时所带的硬件信息(UserAgent)，判断返回对应页面元素生成器的版本，这使得本方案既能满足大多数用户体验最新的UI设计风格，又保证旧版手机用户能正常浏览和使用页面功能。。

本实施例优选的，路由跳转机制由路由器转换器实现，路由器转换器集成于后端系统，并对外开放接口。路由转换器的开放透明，使得开发人员可以更好地使用本发明的方法。

优选的，当请求指令的类型为Get时，重置目标URL为页面元素生成器的下载地址，所述页面元素生成器至少包括页面重建功能脚本和预设的默认使用的UI前端框架；

当请求指令的类型为Post时，按照预设默认方式，返回原始页面元素的配置信息和页面数据，数据格式为JSON。在处理路由跳转时，设置这样的请求规则，可以将整个WAP页面开发的流程进行一定程度的拆分，但又使其进行很好的对应整合。按照此规则，按照此规则，“页面元素生成器”在请求页面配置信息，及与后端系统交互的其他数据操作都需要发送Post请求。

在返回“页面元素生成器”前，根据用户的UserAgent信息获取用户的操作系统及版本号，当用户的操作系统为Android4.0以上版本时，返回高版本的“页面元素生成器”，反之返回低版本的“页面元素生成器”。

高版本的“页面元素生成器”使用谷歌Materialdesign设计标准，在页面表现上更丰富，用户体验效果好；低版本的“页面元素生成器”使用angular-ui-bootstrap框架，满足在Android低版本手机上能正常显示常用的组件。之所以这样设计，主要从手机浏览器的兼容性上考虑，既能满足大多数用户体验最新的UI设计风格，又保证旧版手机用户能正常浏览和使用页面功能。

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (10)

1.一种WAP网页开发方法，其特征在于，包括步骤：

客户端发出请求目标URL的请求指令，并获取后端系统根据预设的路由跳转机制返回标示了用户访问资源原始URL的页面元素生成器；

客户端接收到页面元素生成器后，页面元素生成器自动请求访问资源原始URL，并获取后端系统返回的原始页面元素的配置信息和页面数据；

页面元素生成器根据获取到的页面元素的配置信息，重组相应的页面组件，并加载相应的数据，完成WAP页面重绘。

2.如权利要求1所述的WAP网页开发方法，其特征是：在页面元素生成器在获取后端系统返回的原始页面元素的配置信息和页面数据步骤后：

页面元素生成器获取页面元素配置信息和业务逻辑数据；

遍历通用组件数组，将自定义属性替换成相应组件的HTML模板；

加载相应的数据，完成WAP页面重绘。

3.如权利要求2所述的WAP网页开发方法，其特征是：所述将自定义属性替换成相应组件的HTML模板的步骤包括：

遍历组件内部子元素配置数组，重组开发子元素的HTML模板。

4.如权利要求2所述的WAP网页开发方法，其特征是：所述通用组件数组包括语言数组，后端系统在返回原始页面元素的配置信息时，根据客户端所在地区及预设支持的语言返回相应语言版本的页面内容。

5.如权利要求2所述的WAP网页开发方法，其特征是：所述通用组件数组包含在后端系统的通用组件库中，所述通用组件库对外开放接口，并允许收纳添加符合预设条件的新组件。

6.如权利要求2所述的WAP网页开发方法，其特征是：所述通用组件库至少定义了表单大组件结构、列表大组件结构、图表大组件结构和只显示内容的信息块大组件结构，以及大组件结构内部子元素的结构。

7.如权利要求1所述的WAP网页开发方法，其特征是：所述页面元素生成器包括一自定义模组，通过所述自定义模组可以将页面特殊的内容通过自定义代码的方式嵌入WAP页面。

8.如权利要求1所述的WAP网页开发方法，其特征是：所述客户端发出请求目标URL的请求指令的步骤包括：

在发出请求指令的同时，携带客户端的硬件信息；

后端系统根据硬件信息返回对应版本的页面元素生成器；

所述页面元素生成器至少包括高版本页面元素生成器和低版本页面元素生成器。

9.如权利要求1所述的WAP网页开发方法，其特征是：所述路由跳转机制由路由器转换器实现，所述路由器转换器集成于后端系统，并对外开放接口。

10.如权利要求1-9任一所述的WAP网页开发方法，其特征是：当所述请求指令的类型为Get时，重置目标URL为页面元素生成器的下载地址，所述页面元素生成器至少包括页面重建功能脚本和预设的默认使用的UI前端框架；

当所述请求指令的类型为Post时，按照预设默认方式，返回原始页面元素的配置信息和页面数据，数据格式为JSON。