CN105138542A

CN105138542A - 一种pc端web网页转换为移动端web网页的方法

Info

Publication number: CN105138542A
Application number: CN201510399492.0A
Authority: CN
Inventors: 谢金鹏
Original assignee: Beijing Tianheshi Technology Co Ltd
Current assignee: Suzhou Jiuwei Space Time Technology Co ltd
Priority date: 2015-07-09
Filing date: 2015-07-09
Publication date: 2015-12-09
Anticipated expiration: 2035-07-09
Also published as: CN105138542B

Abstract

本发明公开了一种PC端WEB网页转换为移动端WEB网页的方法，通过对原网页信息进行信息配置，由天河适配JavaScript引擎对其属性进行修改，使其能够与移动端浏览器适配，实现移动端直接登陆浏览PC端网页，而无需单独开发移动端WEB版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。

Description

一种PC端WEB网页转换为移动端WEB网页的方法

技术领域

本发明涉及电子信息技术领域，尤其涉及了一种PC端WEB网页转换为移动端WEB网页的方法。

背景技术

随着移动互联网的高速发展，给移动通信终端用户打开了一扇通过互联网世界的大门，移动互联网结合了移动通信的便利性和互联网的丰富内容，成为通信业和互联网业融合发展的交叉领域，具有巨大的市场前景。

但是移动终端设备的屏幕分辨率大小不等，适配开发成本大。并且移动终端设备的CPU处理性能低，内存小。因此有些网站网页并不适合在移动终端直接进行显示，需要二次开发，在开发设计时要考虑到移动终端的软硬件因素。传统的方法有针对某些网站进行改进的，但是没有普适性,目前主流的方法有两种：其一是利用响应式设计模式开发新的移动端网页，在开发时考虑到不同手机的屏幕尺寸，让内容的宽度自适应;其二是根据PC端网站的页面，手动调整为适合移动端的页面，在修改的过程中，需要考虑到多种手机尺寸，还要考虑浏览器兼容的问题，需要去掉在移动端不工作的代码，有时候还需要重写部分代码。

对于那些已经有PC端的网站或网络应用，如果想开发一套移动端版本，往往需要较多的人力成本和时间成本，除此之外，他们会采取不同的网址，需要同时维护两套代码。

发明内容

本发明针对现有技术中成本较大等缺点，提供了一种PC端WEB网页转换为移动端WEB网页的方法，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。

为了解决上述技术问题，本发明通过下述技术方案得以解决：

一种PC端WEB网页转换为移动端WEB网页的方法，包括以下步骤：

步骤一：分析网页的结构，通过Web应用对原PC网页进行配置，将配置信息存入数据库中；

步骤二：部署天河适配JavaScript引擎，所述天河适配JavaScript引擎一系列静态JavaScript文件组成，当这些文件被浏览器加载，天河适配JavaScript引擎就可以根据相关的数据实现特定的功能；

步骤三：页面适配，由天河适配JavaScript引擎根据访问页面的URL、数据库中步骤一所得的配置信息、原网页的内容及移动设备的参数，将原PC网页适配成移动版网页。

作为优选，步骤一所述的PC网页配置方式为：利用第三方工具分析原pc网页的DOM结构，可以将网页中的内容划分成适合于移动端展示的模块，每一块内容适用于Web应用中的某一种模版，每一个模版都在天河适配JavaScript引擎中实现了移动适配的功能；找到所需标签的xpath和csspath，将需要的信息通过Web应用配置到数据库中

作为优选，步骤二中，天河适配JavaScript引擎的部署方式可以是动态部署、静态部署或代理模式部署三种方式中的一种；其中：

动态部署的方式为，在原网页中加入一行JavaScript代码，以连接到服务器端的天河适配JavaScript引擎；当移动端用户访问原PC网站时，天河适配JavaScript引擎根据用户访问的URL将数据库中步骤二所得的配置信息存入到JavaScriptObject中，返回给用户；天河适配JavaScript引擎根据原网页的内容、JavaScriptObject中的配置信息、获取到的移动设备的相关信息将原PC网页适配成移动版网页；

静态部署的方式为，根据数据库中步骤一所得的配置信息，由天河适配JavaScript引擎产生一个含了天河适配JavaScript引擎和所有配置信息的JavaScript文件，将此JavaScript文件引入原网页，当移动端用户访问原PC网站时，此JavaScript文件中的天河适配JavaScript引擎将根据用户访问的URL、文件中相应的配置信息、原网页的内容及移动设备的参数将原PC网页适配成移动版网页；

代理模式部署的方式为，需在服务器中做如下修改:

在HttpResponse中需要设置下面的Header：

response.setHeader("Access-Control-Allow-Origin","*");

response.setHeader("Access-Control-Expose-Headers","*");

response.setHeader("Access-Control-Allow-Methods","GET,PUT,POST,DELETE,HEAD,OPTIONS");

response.setHeader("Access-Control-Allow-Headers","x-http-method-override");

对于图片等资源的请求以及Ajax请求，需要将原来的相对路径修改为绝对路径，绝对路径由原网站域名和相对路径组成；当发出请求时，才能从原网站的服务器中获取到相应的结果；对于使用相对路径的a标签，需要变更成代理模式的路径。代理模式的路径由代理服务器地址、原网站的域名和标签中的相对路径组成。

作为优选，步骤三中天河适配JavaScript引擎将原PC网页适配成移动版网页的方式为：设置body的属性为overflow-x:hidden;visibility:hidden，将整个原PC网页隐藏；通过<meta>来阻止移动端浏览器自动缩放网页，使移动端和PC端保持一样的UI界面特性；根据屏幕大小，重新确定每个元素的位置，重新调整部分元素的样式，并按照一定的顺序显示；将<img>标签中的src属性的值修改成src=data:image，从而减少加载图片的HTTP请求。

进一步的，步骤三中所述的天河适配JavaScript引擎产生JavaScript文件的方式为：

首先天河适配JavaScript引擎获取移动端屏幕的分辨率，然后天河适配JavaScript引擎从数据库中读取步骤一所得的配置信息，对指定的标签属性进行修改，重新设定每一块内容的显示位置，并根据获取的屏幕大小，自动调整每个标签的大小以及标签与标签之间的距离，使其能够适配所有主流的移动设备。

进一步的，天河适配JavaScript引擎使用了尽量少的代码来提供通用功能，通用功能根据配置信息即可完成适配，在通用功能无法满足需求时，可以通过预先定义的Template和CallBack应用程序接口（API）来扩展它的功能，提高灵活性。这些应用程序接口（API）可以用来新增DOM、修改相关标签的属性，使用Template可以替代天河适配JavaScript引擎提供的默认功能，允许程序员在程序中写代码来实现任何所需功能。天河适配JavaScript引擎针对不同的配置内容提供了多种API接口，并且已经实现了一些接口来作为默认的处理方法。程序员实现了Template的某个接口后，需要在Web应用中进行配置，天河适配JavaScript引擎在运行时才会自动执行，实现所需的功能。

进一步的在Web应用中将CallBack配置进去，天河适配JavaScript引擎在运行时就会自动调用，来补充天河适配JavaScript引擎的默认功能，在天河适配JavaScript引擎的默认功能无法满足某些要求时，这些要求可以通过CallBack来实现，在CallBack的接口实现中，可以调整原网页以满足不同的需求。

本发明由于采用了以上技术方案，具有显著的技术效果：

本发明通过对原网页信息进行信息配置，由天河适配JavaScript引擎对其属性进行修改，使其能够与移动端浏览器适配，实现移动端直接登陆浏览PC端网页，而无需单独开发移动端WEB版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是PC端WEB网页转换为移动端WEB网页的适配示意图；

图2为采用代理模式进行移动端网页适配的示意图。

具体实施方式

下面结合实施例对本发明做进一步的详细说明，以下实施例是对本发明的解释而本发明并不局限于以下实施例。

实施例1：

步骤一所述的PC网页配置方式为：利用第三方工具分析原pc网页的DOM结构，可以将网页中的内容划分成适合于移动端展示的模块，每一块内容适用于Web应用中的某一种模版，每一个模版都在天河适配JavaScript引擎中实现了移动适配的功能；找到所需标签的xpath和csspath，将需要的信息通过Web应用配置到数据库中

步骤二中，天河适配JavaScript引擎的部署方式为动态部署，即在原网页中加入一行JavaScript代码，以连接到服务器端的天河适配JavaScript引擎；当移动端用户访问原PC网站时，天河适配JavaScript引擎根据用户访问的URL将数据库中步骤二所得的配置信息存入到JavaScriptObject中，返回给用户；天河适配JavaScript引擎根据原网页的内容、JavaScriptObject中的配置信息、获取到的移动设备的相关信息将原PC网页适配成移动版网页。

步骤三中天河适配JavaScript引擎将原PC网页适配成移动版网页的方式为：设置body的属性为overflow-x:hidden;visibility:hidden，将整个原PC网页隐藏；通过<meta>来阻止移动端浏览器自动缩放网页，使移动端和PC端保持一样的UI界面特性；根据屏幕大小，重新确定每个元素的位置，重新调整部分元素的样式，并按照一定的顺序显示；将<img>标签中的src属性的值修改成src=data:image，从而减少加载图片的HTTP请求。

步骤三中所述的天河适配JavaScript引擎产生JavaScript文件的方式为：

天河适配JavaScript引擎使用了尽量少的代码来提供通用功能，通用功能根据配置信息即可完成适配，在通用功能无法满足需求时，可以通过预先定义的Template和CallBack应用程序接口（API）来扩展它的功能，提高灵活性。这些应用程序接口（API）可以用来新增DOM、修改相关标签的属性，使用Template可以替代天河适配JavaScript引擎提供的默认功能，允许程序员在程序中写代码来实现任何所需功能。天河适配JavaScript引擎针对不同的配置内容提供了多种API接口，并且已经实现了一些接口来作为默认的处理方法。程序员实现了Template的某个接口后，需要在Web应用中进行配置，天河适配JavaScript引擎在运行时才会自动执行，实现所需的功能。

在Web应用中将CallBack配置进去，天河适配JavaScript引擎在运行时就会自动调用，来补充天河适配JavaScript引擎的默认功能，在天河适配JavaScript引擎的默认功能无法满足某些要求时，这些要求可以通过CallBack来实现，在CallBack的接口实现中，可以调整原网页以满足不同的需求。

本实施例通过对原网页信息进行信息配置，由天河适配JavaScript引擎对其属性进行修改，使其能够与移动端浏览器适配，实现移动端直接登陆浏览PC端网页，而无需单独开发移动端WEB版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成，使移动端和PC端保持相同的网址，也可以选择代理模式，采用不同的网址。

此外，需要说明的是，以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

Claims

1.一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：包括以下步骤：

步骤一，分析网页的结构，通过Web应用对原PC网页进行配置，将配置信息存入数据库中；

步骤二，部署天河适配JavaScript引擎，所述天河适配JavaScript引擎由一系列静态JavaScript文件组成，当这些文件被浏览器加载，天河适配JavaScript引擎就可以根据相关的数据实现特定的功能；

步骤三，页面适配，由天河适配JavaScript引擎根据访问页面的URL、数据库中步骤一所得的配置信息、原网页的内容及移动设备的参数，将原PC网页适配成移动版网页。

2.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤一所述的PC网页配置方式为：利用第三方工具分析原pc网页的DOM结构，可以将网页中的内容划分成适合于移动端展示的模块，每一块内容适用于Web应用中的某一种模版，每一个模版都在天河适配JavaScript引擎中实现了移动适配的功能；找到所需标签的xpath和csspath，将需要的信息通过Web应用配置到数据库中。

3.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤二中，天河适配JavaScript引擎的部署方式为动态部署，即在原网页中加入一行JavaScript代码，以连接到服务器端的天河适配JavaScript引擎；当移动端用户访问原PC网站时，天河适配JavaScript引擎根据用户访问的URL将数据库中步骤一所得的配置信息存入到JavaScriptObject中，返回给用户；天河适配JavaScript引擎根据原网页的内容、JavaScriptObject中的配置信息、获取到的移动设备的相关信息将原PC网页适配成移动版网页。

4.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤二中，天河适配JavaScript引擎的部署方式为静态部署，即根据数据库中步骤一所得的配置信息，由天河适配JavaScript引擎产生一个包含了天河适配JavaScript引擎和所有配置信息的JavaScript文件，将此JavaScript文件引入到原网页中，当移动端用户访问原PC网站时，此JavaScript文件中的天河适配JavaScript引擎将根据用户访问的URL、文件中相应的配置信息、原网页的内容及移动设备的参数将原PC网页适配成移动版网页。

5.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤二中，天河适配JavaScript引擎的部署方式为代理模式部署，只需在服务器中做如下修改:

在HttpResponse中需要设置下面的Header：

response.setHeader("Access-Control-Allow-Origin","*");

response.setHeader("Access-Control-Expose-Headers","*");

response.setHeader("Access-Control-Allow-Headers","x-http-method-override");

对于图片等资源的请求以及Ajax请求，需要将原来的相对路径修改为绝对路径，绝对路径由原网站域名和相对路径组成；当发出请求时，才能从原网站的服务器中获取到相应的结果；对于使用相对路径的a标签，需要变更成代理模式的路径，代理模式的路径由代理服务器地址、原网站的域名和标签中的相对路径组成。

6.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤三中天河适配JavaScript引擎将原PC网页适配成移动版网页的方式为：设置body的属性为overflow-x:hidden;visibility:hidden，将整个原PC网页隐藏；通过<meta>来阻止移动端浏览器自动缩放网页，使移动端和PC端保持一样的UI界面特性；根据屏幕大小，重新确定每个元素的位置，重新调整部分元素的样式，并按照一定的顺序显示；将<img>标签中的src属性的值修改成src=data:image，从而减少加载图片的HTTP请求。

7.根据权利要求1所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：步骤三中天河适配JavaScript引擎产生JavaScript文件的方式为：首先天河适配JavaScript引擎获取移动端屏幕的分辨率，然后天河适配JavaScript引擎从数据库中读取步骤一所得的配置信息，对指定的标签属性进行修改，重新设定每一块内容的显示位置，并根据获取的屏幕大小，自动调整每个标签的大小以及标签与标签之间的距离，使其能够适配所有主流的移动设备。

8.根据权利要求1-7任一项所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：天河适配JavaScript引擎使用了尽量少的代码来提供通用功能，通用功能根据配置信息即可完成适配，在通用功能无法满足需求时，可以通过预先定义的Template和CallBack应用程序接口（API）来扩展它的功能，提高灵活性；这些应用程序接口（API）可以用来新增DOM、修改相关标签的属性，使用Template可以替代天河适配JavaScript引擎提供的默认功能，允许程序员在程序中写代码来实现任何所需功能；天河适配JavaScript引擎针对不同的配置内容提供了多种API接口，并且已经实现了一些接口来作为默认的处理方法；程序员实现了Template的某个接口后，需要在Web应用中进行配置，天河适配JavaScript引擎在运行时才会自动执行，实现所需的功能。

9.根据权利要求1-7任一项所述的一种PC端WEB网页转换为移动端WEB网页的方法，其特征在于：在Web应用中将CallBack配置进去，天河适配JavaScript引擎在运行时就会自动调用，来补充天河适配JavaScript引擎的默认功能，在天河适配JavaScript引擎的默认功能无法满足某些要求时，这些要求可以通过CallBack来实现，在CallBack的接口实现中，可以调整原网页以满足不同的需求。