一种pc端web网页转换为移动端web网页的方法
【技术领域】
[0001]本发明涉及电子信息技术领域，尤其涉及了一种PC端WEB网页转换为移动端WEB网页的方法。
【背景技术】
[0002]随着移动互联网的高速发展，给移动通信终端用户打开了一扇通过互联网世界的大门，移动互联网结合了移动通信的便利性和互联网的丰富内容，成为通信业和互联网业融合发展的交叉领域，具有巨大的市场前景。
[0003]但是移动终端设备的屏幕分辨率大小不等，适配开发成本大。并且移动终端设备的CPU处理性能低，内存小。因此有些网站网页并不适合在移动终端直接进行显示，需要二次开发，在开发设计时要考虑到移动终端的软硬件因素。传统的方法有针对某些网站进行改进的，但是没有普适性，目前主流的方法有两种:其一是利用响应式设计模式开发新的移动端网页，在开发时考虑到不同手机的屏幕尺寸，让内容的宽度自适应；其二是根据PC端网站的页面，手动调整为适合移动端的页面，在修改的过程中，需要考虑到多种手机尺寸，还要考虑浏览器兼容的问题，需要去掉在移动端不工作的代码，有时候还需要重写部分代码。
[0004]对于那些已经有PC端的网站或网络应用，如果想开发一套移动端版本，往往需要较多的人力成本和时间成本，除此之外，他们会采取不同的网址，需要同时维护两套代码。
【发明内容】
[0005]本发明针对现有技术中成本较大等缺点，提供了一种PC端WEB网页转换为移动端WEB网页的方法，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。
[0006]为了解决上述技术问题，本发明通过下述技术方案得以解决:
一种PC端WEB网页转换为移动端WEB网页的方法，包括以下步骤:
步骤一:分析网页的结构，通过Web应用对原PC网页进行配置，将配置信息存入数据库中；
步骤二:部署天河适配JavaScript引擎，所述天河适配JavaScript引擎一系列静态JavaScript文件组成，当这些文件被浏览器加载，天河适配JavaScript引擎就可以根据相关的数据实现特定的功能；
步骤三:页面适配，由天河适配JavaScript引擎根据访问页面的URL、数据库中步骤一所得的配置信息、原网页的内容及移动设备的参数，将原PC网页适配成移动版网页。
[0007]作为优选，步骤一所述的PC网页配置方式为:利用第三方工具分析原pc网页的DOM结构，可以将网页中的内容划分成适合于移动端展示的模块，每一块内容适用于Web应用中的某一种模版，每一个模版都在天河适配JavaScript引擎中实现了移动适配的功能；找到所需标签的xpath和css path，将需要的信息通过Web应用配置到数据库中
作为优选，步骤二中，天河适配JavaScript引擎的部署方式可以是动态部署、静态部署或代理模式部署三种方式中的一种；其中:
动态部署的方式为，在原网页中加入一行JavaScript代码，以连接到服务器端的天河适配JavaScript引擎；当移动端用户访问原PC网站时，天河适配JavaScript引擎根据用户访问的URL将数据库中步骤二所得的配置信息存入到JavaScript Object中，返回给用户；天河适配JavaScript引擎根据原网页的内容、JavaScript Object中的配置信息、获取到的移动设备的相关信息将原PC网页适配成移动版网页；
静态部署的方式为，根据数据库中步骤一所得的配置信息，由天河适配JavaScript引擎产生一个含了天河适配JavaScript引擎和所有配置信息的JavaScript文件，将此JavaScript文件引入原网页，当移动端用户访问原PC网站时，此JavaScript文件中的天河适配JavaScript引擎将根据用户访问的URL、文件中相应的配置信息、原网页的内容及移动设备的参数将原PC网页适配成移动版网页；
代理模式部署的方式为，需在服务器中做如下修改:
在Http Response中需要设置下面的Header:response.setHeader (^Access-Control-Al1w-Origin^, V);response.setHeader (^Access-Contro1-Expose-Headers^, V);response.setHeader(〃Access-Control_Allow_Methods〃， 〃GET, PUT, POST,DELETE, HEAD, OPT1NS");
response.setHeader(^Access-Control-Al1w-Headers^, 〃x-http-method-override");
对于图片等资源的请求以及Ajax请求，需要将原来的相对路径修改为绝对路径，绝对路径由原网站域名和相对路径组成；当发出请求时，才能从原网站的服务器中获取到相应的结果；对于使用相对路径的a标签，需要变更成代理模式的路径。代理模式的路径由代理服务器地址、原网站的域名和标签中的相对路径组成。
[0008]作为优选，步骤三中天河适配JavaScript引擎将原PC网页适配成移动版网页的方式为:设置body的属性为overflow_x:hidden; visibility:hidden，将整个原PC网页隐藏；通过<meta>来阻止移动端浏览器自动缩放网页，使移动端和PC端保持一样的UI界面特性；根据屏幕大小，重新确定每个元素的位置，重新调整部分元素的样式，并按照一定的顺序显示；将<img>标签中的src属性的值修改成src=data:1mage，从而减少加载图片的HTTP请求。
[0009]进一步的，步骤三中所述的天河适配JavaScript引擎产生JavaScript文件的方式为:
首先天河适配JavaScript引擎获取移动端屏幕的分辨率，然后天河适配JavaScript引擎从数据库中读取步骤一所得的配置信息，对指定的标签属性进行修改，重新设定每一块内容的显示位置，并根据获取的屏幕大小，自动调整每个标签的大小以及标签与标签之间的距离，使其能够适配所有主流的移动设备。
[0010]进一步的，天河适配JavaScript引擎使用了尽量少的代码来提供通用功能，通用功能根据配置信息即可完成适配，在通用功能无法满足需求时，可以通过预先定义的Template和CallBack应用程序接口(API)来扩展它的功能，提高灵活性。这些应用程序接口(API)可以用来新增DOM、修改相关标签的属性，使用Template可以替代天河适配JavaScript引擎提供的默认功能，允许程序员在程序中写代码来实现任何所需功能。天河适配JavaScript弓丨擎针对不同的配置内容提供了多种API接口，并且已经实现了一些接口来作为默认的处理方法。程序员实现了 Template的某个接口后，需要在Web应用中进行配置，天河适配JavaScript引擎在运行时才会自动执行，实现所需的功能。
[0011]进一步的在Web应用中将CallBack配置进去，天河适配JavaScript引擎在运行时就会自动调用，来补充天河适配JavaScript引擎的默认功能，在天河适配JavaScript引擎的默认功能无法满足某些要求时，这些要求可以通过CallBack来实现，在CallBack的接口实现中，可以调整原网页以满足不同的需求。
[0012]本发明由于采用了以上技术方案，具有显著的技术效果:
本发明通过对原网页信息进行信息配置，由天河适配JavaScript引擎对其属性进行修改，使其能够与移动端浏览器适配，实现移动端直接登陆浏览PC端网页，而无需单独开发移动端WEB版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。
【附图说明】
[0013]为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0014]图1是PC端WEB网页转换为移动端WEB网页的适配示意图；
图2为采用代理模式进行移动端网页适配的示意图。
【具体实施方式】
[0015]下面结合实施例对本发明做进一步的详细说明，以下实施例是对本发明的解释而本发明并不局限于以下实施例。
[0016]实施例1:
一种PC端WEB网页转换为移动端WEB网页的方法，包括以下步骤:
步骤一:分析网页的结构，通过Web应用对原PC网页进行配置，将配置信息存入数据库中；
步骤二:部署天河适配JavaScript引擎，所述天河适配JavaScript引擎一系列静态JavaScript文件组成，当这些文件被浏览器加载，天河适配JavaScript引擎就可以根据相关的数据实现特定的功能；
步骤三:页面适配，由天河适配JavaScript引擎根据访问页面的URL、数据库中步骤一所得的配置信息、原网页的内容及移动设备的参数，将原PC网页适配成移动版网页。
[0017]步骤一所述的PC网页配置方式为:利用第三方工具分析原pc网页的DOM结构，可以将网页中的内容划分成适合于移动端展示的模块，每一块内容适用于Web应用中的某一种模版，每一个模版都在天河适配JavaScript引擎中实现了移动适配的功能；找到所需标签的xpath和css path，将需要的信息通过Web应用配置到数据库中
步骤二中，天河适配JavaScript引擎的部署方式为动态部署，即在原网页中加入一行JavaScript代码，以连接到服务器端的天河适配JavaScript引擎；当移动端用户访问原PC网站时，天河适配JavaScript引擎根据用户访问的URL将数据库中步骤二所得的配置信息存入到JavaScript Object中，返回给