CN115062255B - 网站适配的方法、装置、电子设备及计算机可读存储介质 - Google Patents

Abstract

本申请涉及一种网站适配的方法、装置、终端设备及计算机可读存储介质，涉及网页应用领域，该方法包括向Web服务器发送网站访问请求，接收Web服务器发送的适配文件以及原网站资源，适配文件是Web服务器根据网站访问请求发送的，适配文件包括：第一布局样式以及第一布局样式与原网站资源的绑定关系，第一布局样式为与第一终端设备相适配的布局样式，若第一终端设备的设备类型为移动终端，则基于第一布局样式、绑定关系以及原网站资源，进行网页渲染，控制显示渲染后的网页。本申请提供的网站适配的方法、装置、终端设备及计算机可读存储介质可以降低网站适配的复杂度，进而可以提升网站适配的效率。

Description

网站适配的方法、装置、电子设备及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，尤其是涉及一种网站适配的方法、装置、终端设备及计算机可读存储介质。

背景技术

目前随着移动互联网时代的不断发展，移动终端成为主要的上网终端，例如，手机，早期的网站主要以PC终端访问而设计，并不适应移动终端浏览，造成视觉展现和操作体验非常差，因此以PC终端访问而设计的网站所有者不得不重新构建适合移动终端的网站。

发明人在研究过程中发现：在网站适配过程中重新构建网站，对网页的布局和内容进行重新构建，以适配移动终端设备，从而可能导致网站适配的复杂度较高，效率较低。

发明内容

本申请目的是提供一种网站适配的方法、装置、终端设备及计算机可读存储介质，用于解决以上至少一项技术问题。

本申请的上述发明目的是通过以下技术方案得以实现的：

第一方面，提供了一种网站适配的方法，应用于网站适配系统，所述网站适配系统包括：第一终端设备、Web服务器以及第二终端设备，所述第一终端设备与所述Web服务器进行信息交互，所述Web服务器与所述第二终端设备进行信息交互，所述方法由第一终端设备执行，该方法包括：

向Web服务器发送网站访问请求；

接收所述Web服务器发送的适配文件以及原网站资源，所述适配文件是所述Web服务器根据所述网站访问请求发送的，所述适配文件包括：第一布局样式以及所述第一布局样式与所述原网站资源的绑定关系，所述第一布局样式为与所述第一终端设备相适配的布局样式；

若所述第一终端设备的设备类型为移动终端，则基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染；

控制显示渲染后的网页。

在一种可能的实现方式中，接收所述Web服务器发送的适配文件，包括：

若所述Web服务器判断所述第一终端设备的设备类型为移动终端设备，则接收所述Web服务器发送的与移动终端设备相匹配的适配文件，所述与移动终端设备相匹配的适配文件包含新的布局样式以及新的布局样式与原网站资源的绑定关系，所述新的布局样式为适配于所述移动终端设备的布局样式；

若所述Web服务器判断所述第一终端设备的设备类型为PC端设备，则接收所述Web服务器发送的与PC端设备相匹配的适配文件，所述与PC端设备相匹配的适配文件包括原布局样式与原网站资源的绑定关系，所述原布局样式为适配于所述PC端设备的布局样式。

在另一种可能的实现方式中，所述适配文件中还包含校验代码、第二布局样式，以及第二布局样式与所述原网站资源的绑定关系，所述第二布局样式为与所述第一终端设备不适配的布局样式；

所述接收所述Web服务器发送的适配文件以及原网站资源，之后还包括：

基于所述校验代码确定所述第一终端设备的设备类型；

其中，基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染，包括：

基于新的布局样式，所述绑定关系以及所述原网站资源，进行网页渲染，所述新的布局样式为适配于所述移动终端设备的布局样式。

在另一种可能的实现方式中，所述第一终端设备的设备类型为PC端设备，所述方法还包括：

基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染，所述原布局样式为适配于所述PC端设备的布局样式；

控制显示渲染后的网页。

第二方面，提供了一种网站适配的方法，所述网站适配系统包括：第一终端设备、Web服务器以及第二终端设备，所述第一终端设备与所述Web服务器进行信息交互，所述Web服务器与所述第二终端设备进行信息交互，所述方法由第二终端设备执行，该方法包括：

获取原网站资源；

基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系，所述新的布局样式为适配于移动终端设备的布局样式；

基于新的布局样式以及所述绑定关系生成适配文件；

向所述Web服务器发送所述适配文件，所述适配文件用于所述移动终端设备渲染并显示适配后的网页。

在一种可能的实现方式中，所述基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系，包括：

获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码，所述源代码为构成网页的语言；

基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整，以创建所述新的布局样式以及所述原网站资源与所述新的布局样式的绑定关系。

在另一种可能的实现方式中，所述获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码，包括：

获取用户输入的所述网站的网址；

对所述网址进行解析，获取网站对应的原布局样式、所述绑定关系以及所述网站对应的源代码。

在另一种可能的实现方式中，所述基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整，包括：

检测用户对所述原布局样式和/或所述绑定关系的调整操作；

基于所述调整操作，对所述网站对应的源代码进行调整。

在另一种可能的实现方式中，所述基于新的布局样式以及所述绑定关系生成适配文件，包括以下任一项：

获取校验代码，并基于所述调整后的代码以及所述校验代码，生成适配文件；

基于所述调整后的代码生成适配文件。

在另一种可能的实现方式中，基于所述调整后的代码生成适配文件，包括：

将所述调整后的代码进行压缩，得到压缩后的代码；

基于压缩后的代码生成适配文件。

第三方面，提供了一种网站适配的装置，该装置包括：

访问请求发送模块，用于向Web服务器发送网站访问请求；

接收模块，用于接收所述Web服务器发送的适配文件以及原网站资源，所述适配文件是所述Web服务器根据所述网站访问请求发送的，所述适配文件包括：第一布局样式以及所述第一布局样式与所述原网站资源的绑定关系，所述第一布局样式为与第一终端设备相适配的布局样式；

第一渲染模块，用于当所述终端设备的设备类型为移动终端时，，基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染；

第一控制显示模块，用于控制显示渲染后的网页。

在一种可能的实现方式中，所述接收模块在接收所述Web服务器发送的适配文件时，具体用于：

若所述Web服务器判断所述第一终端设备的设备类型为移动终端设备，则接收所述Web服务器发送的与移动终端设备相匹配的适配文件，所述与移动终端设备相匹配的适配文件包含新的布局样式以及新的布局样式与原网站资源的绑定关系，所述新的布局样式为适配于所述移动终端设备的布局样式；

若所述Web服务器判断所述第一终端设备的设备类型为PC端设备，则接收所述Web服务器发送的与PC端设备相匹配的适配文件，所述与PC端设备相匹配的适配文件包括原布局样式与原网站资源的绑定关系，所述原布局样式为适配于所述PC端设备的布局样式。

在另一种可能的实现方式中，所述适配文件中还包含校验代码、第二布局样式，以及所述第二布局样式与所述原网站资源的绑定关系，所述第二布局样式为与所述第一终端设备不适配的布局样式；

所述装置还包括：确定模块，其中，

所述确定模块，用于基于所述校验代码确定所述第一终端设备的设备类型；

其中，所述第一渲染模块在基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染时，具体用于：

基于新的布局样式，所述绑定关系以及所述原网站资源，进行网页渲染，所述新的布局样式为适配于所述移动终端设备的布局样式。

在另一种可能的实现方式中，当所述第一终端设备的设备类型为PC端设备时，所述装置还包括：第二渲染模块和第二控制显示模块，其中，

所述第二渲染模块，用于基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染，所述原布局样式为适配于所述PC端设备的布局样式；

所述第二控制显示模块，用于控制显示渲染后的网页。

第四方面，提供了一种网站适配的装置，该装置包括：

获取模块，用于获取原网站资源；

创建模块，用于基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系，所述新的布局样式为适配于移动终端设备的布局样式；

生成模块，用于基于新的布局样式以及所述绑定关系生成适配文件；

适配文件发送模块，用于向Web服务器发送所述适配文件，所述适配文件用于所述移动终端设备渲染并显示适配后的网页。

在一种可能的实现方式中，所述创建模块在基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系时，具体用于：

获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码 ，所述源代码为构成网页的语言；

基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整，以创建所述新的布局样式以及所述原网站资源与所述新的布局样式的绑定关系。

在另一种可能的实现方式中，所述获取模块在获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码时，具体用于：

获取用户输入的获取输入的所述网站的网址；

对所述网址进行解析，获取网站对应的原布局样式、所述绑定关系以及所述网站对应的源代码。

在另一种可能的实现方式中，所述创建模块在基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整时，具体用于：

检测用户对所述原布局样式和/或所述绑定关系的调整操作；

基于所述调整操作，对所述网站对应的源代码进行调整。

在另一种可能的实现方式中，所述生成模块在基于新的布局样式以及所述绑定关系生成适配文件时，具体用于：

获取校验代码 ，并基于所述调整后的代码以及所述校验代码，生成适配文件；或者，

基于所述调整后的代码生成适配文件。

第五方面，提供了一种终端设备，该终端设备包括：

一个或者多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于：执行根据第一方面中任一可能的实现方式所示的一种网站适配的方法对应的操作。

第六方面，提供了一种终端设备，该终端设备包括：

一个或者多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于：执行根据第二方面中任一可能的实现方式所示的一种网站适配的方法对应的操作。

第七方面，提供了一种计算机可读存储介质，存储介质存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如第一方面中任一可能的实现方式所示的网站适配的方法或第二方面中任一可能的实现方式所示的网站适配的方法。

综上所述，本申请包括以下至少一种有益技术效果：

本申请提供了一种网站适配的方法、装置，第一终端设备及可读存储介质，与相关技术相比，在本申请中第一终端设备通过发送访问请求，以接收到适配于第一终端设备的布局样式，以及该布局样式与原网站资源（包含原网站内容）之间的绑定关系，也即当第一终端设备为移动终端设备时，接收到适配于移动终端设备的布局样式以及移动终端设备与原网站资源的绑定关系，以使得移动终端设备可以根据适配于移动终端设备的布局样式以及绑定关系即可以进行网页渲染，并控制显示渲染后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

本申请提供了一种网站适配的方法、装置、第二终端设备及可读存储介质，与相关技术相比，在本申请中第二终端设备在获取原网站资源后，基于原网站资源可以创建适配于移动终端设备的布局样式，以及适配于移动终端设备的布局样式与原网站资源的绑定关系，然后将创建的适配于移动终端的布局样式以及该布局样式与原网站资源的绑定关系推送至Web服务器，以使得移动终端设备基于该布局样式以及绑定关系渲染并显示适配后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

附图说明

图1a是本申请实施例的一种网站适配系统的示意图。

图1b是本申请实施例的一种网站适配方法的流程示意图。

图2是本申请实施例的一种网站适配方法的另一流程示意图。

图3是本申请实施例的一种网站适配过程的示意图。

图4是本申请实施例的一种网站适配装置的结构示意图。

图5是本申请实施例的一种网站适配装置的另一结构示意图。

图6是本申请实施例的一种终端设备的结构示意图。

具体实施方式

以下结合附图对本申请作进一步详细说明。

本具体实施例仅仅是对本申请的解释，其并不是对本申请的限制，本领域技术人员在阅读完本说明书后可以根据需要对本实施例做出没有创造性贡献的修改，但只要在本申请的权利要求范围内都受到专利法的保护。

网站所有者早期构建的PC站点，由于只适用于PC端浏览，不适用手机端浏览。如果再重新做一套手机端的站点，会涉及到网站前端代码和后端代码的编写，由于需要专业的开发人员，开发成本会高，维护成本也随之上升，一个网站是由多个网页构成。网页标签中包含的资源存储在网站服务器中，当一个客户端浏览器访问网页的时候，网站服务器会返回当前网页的文本内容，客户端浏览器将服务器返回的内容进行解析，然后在客户端展示出来。

本申请实施例提供的一种网站适配的方法，为系统使用者提供多种组件，通过调整组件中部分元素的属性（主要包括位置，大小以及颜色等）的方式即可完成适配工作，为了保证适配能够快速有效地进行，移动化平台将一系列重要功能模块有机地集成在一起，实现从适配的可视化配置到最终适配代码生成分发的全过程，最终形成了一整套成熟完整的集成开发环境。集成开发环境包含了可视化适配编辑器、动态用户界面（UserInterface，UI）构建器 、预览模拟器、适配编译器、内容分发网络(Content DeliveryNetwork，CDN)加速器等重要功能模块。为了使移动适配工作变得轻松简单，可视化适配编辑器采用了所见即所得技术，集成了大量的移动端UI组件，通过拖拉拽的方式完成页面布局，通过图形化配置方式对UI组件属性进行设置，并能够一键完成适配代码的生成，实时在线预览。集成开发环境也为开发人员提供了高级功能，有开发能力的程序员，可以自定义样式代码和数据选择脚本。

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

另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，如无特殊说明，一般表示前后关联对象是一种“或”的关系。

下面结合说明书附图对本申请实施例作进一步详细描述。

本申请实施例提供了一种网站适配系统，如图1a所示，网站适配系统包括：第一终端设备（也即前文所述的客户端）、Web服务器以及第二终端设备，其中，第一终端设备与Web服务器进行信息交互，Web服务器与第二终端设备进行信息交互。

本申请实施例提供一种网站适配的方法，由第一终端设备执行，如图1b所示，该方法可以包括：

步骤S101、向Web服务器发送网站访问请求。

对于本申请实施例，当第一终端设备检测到用户触发的网站访问操作时，生成网站访问请求，并向Web服务器发送网站访问请求，以请求访问对应的网站。

步骤S102、接收Web服务器发送的适配文件以及原网站资源。

其中，适配文件是Web服务器根据网站访问请求发送的，适配文件包括：第一布局样式以及第一布局样式与原网站资源的绑定关系，第一布局样式为与第一终端设备相适配的布局样式。在本申请实施例中，适配文件中可以仅包含第一布局样式以及第一布局样式与原网站资源的绑定关系，还可以即包含第一布局样式、第一布局样式与原网站资源的绑定关系、第二布局样式以及第二布局样式与原网站资源的绑定关系，其中，第二布局样式为与第一终端设备不相适配的布局样式，原网站资源可以包括：原网站内容、原布局样式以及原布局样式与原网站资源的绑定关系。

具体地，第一终端设备在向Web服务器发送网站访问请求之后，通过Web服务器通过网站访问请求中携带的第一终端设备的设备信息判断第一终端设备的设备类型（也即通过Web服务器判断第一终端设备的设备类型），在判断出第一终端设备的设备类型后，将与设备类型相匹配的适配文件以及原网站资源发给该第一终端设备；此时该适配文件中可以仅包含第一布局样式以及第一布局样式与原网站资源的绑定关系，当然还可以包含第二布局样式以及第二布局样式与原网站资源的绑定关系。

本申请实施例的另一种可能的实现方式，在本申请实施例中不通过Web服务器判断第一终端设备的设备类型，而是第一终端设备判断自身的设备类型，此时，第一终端设备接收到的适配文件中包含第一布局样式、第一布局样式与原网站资源的绑定关系、第二布局样式以及第二布局样式与原网站资源的绑定关系，具体详见下述实施例。

步骤S103、若第一终端设备的设备类型为移动终端，则基于第一布局样式、绑定关系以及原网站资源，进行网页渲染。

对于本申请实施例，当第一终端设备的设备类型为移动终端，例如手机时，此时第一布局样式为与移动终端相适配的布局样式，也可以称为新的布局样式。也即第一终端设备在得到新的布局样式、新的布局样式与原网站资源的绑定关系以及原网站资源后，可以进行网页渲染，以得到与移动终端相适配的网页。

步骤S104、控制显示渲染后的网页。

对于本申请实施例，移动终端设备（例如，手机）在渲染得到网页后，控制显示渲染后的网页。

本申请实施例提供了一种网站适配的方法，与相关技术相比，在本申请实施例中第一终端设备通过发送访问请求，以接收到适配于第一终端设备的布局样式，以及该布局样式与原网站资源（包含原网站内容）之间的绑定关系，也即当第一终端设备为移动终端设备时，接收到适配于移动终端设备的布局样式以及移动终端设备与原网站资源的绑定关系，以使得移动终端设备可以根据适配于移动终端设备的布局样式以及绑定关系即可以进行网页渲染，并控制显示渲染后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

进一步地，在步骤S101中第一终端设备在向Web服务器发送的网站访问请求中还可以包括请求方的设备信息（也即第一终端设备的设备信息），也可以不包含请求方的设备信息。若第一终端设备向Web服务器发送的网站访问请求中包含请求方的设备信息，则可以通过Web服务器判断出第一终端设备的设备类型。

具体地，若Web服务器可以预先判断出第一终端设备的设备类型，为了节省降低信道拥堵，以及提升Web服务器信息发送的准确度，步骤S102中接收Web服务器发送的适配文件，具体可以包括：步骤S1021（图中未示出）和步骤S1022（图中未示出），其中，

步骤S1021、若Web服务器判断第一终端设备的设备类型为移动终端设备，则接收Web服务器发送的与移动终端设备相匹配的适配文件。

其中，与移动终端设备相匹配的适配文件包含新的布局样式以及新的布局样式与原网站资源的绑定关系，新的布局样式为适配于移动终端设备的布局样式。

步骤S1022、若Web服务器判断第一终端设备的设备类型为PC端设备，则接收Web服务器发送的与PC端设备相匹配的适配文件。

其中，与PC端设备相匹配的适配文件包括原布局样式以及原布局样式与原网站资源的绑定关系，原布局样式为适配于PC端设备的布局样式。

对于本申请实施例，向Web服务器发送网站访问请求之后，通过Web服务器判断第一终端设备类型之后通过Web服务器判断第一终端设备的设备类型为PC端之后，接收原布局与原网站资源的绑定关系。

对于本申请实施例，通过Web服务器判断第一终端设备类型之后，接收Web服务器发送的适配文件以及原网站资源，减少了传输资源，从而提高了接收Web服务器发送的适配文件以及原网站资源的效率。

在另一种可能的实现方式中，Web服务器不对第一终端设备的设备类型进行判断，或者Web不能对第一终端设备的设备类型进行判断，此时适配文件中还包含校验代码、第二布局样式，以及第二布局样式与原网站资源的绑定关系，第二布局样式为与第一终端设备不适配的布局样式；也就是说，接收到的适配文件中除了第一布局样式以及第一布局样式与原网站资源的绑定关系，还可以包括第二布局样式、第二布局样式与原网站资源的绑定关系，以及校验代码。在此基础上，第一终端设备接收Web服务器发送的适配文件以及原网站资源，之后还可以包括：第一终端设备基于校验代码确定第一终端设备的设备类型。也就是说，第一终端设备执行校验代码，以验证自身的设备类型。例如，第一终端设备验证自身为移动终端设备还是PC端设备。

进一步地，在通过第一终端设备确定为自身的设备类型为移动终端设备后，基于第一布局样式、绑定关系以及原网站资源，进行网页渲染，具体可以包括：基于新的布局样式，绑定关系以及原网站资源，进行网页渲染。在本申请实施例中，新的布局样式为适配于移动终端设备的布局样式。

对于本申请实施例，基于校验代码的确定结果，从新的布局样式和原布局样式中确定出新的布局样式，从新的布局样式与原网站资源的绑定关系以及原布局样式与原网站资源的绑定关系中，确定出新的布局样式与原网站资源的绑定关系，基于新的布局样式、新的布局样本与原网站资源的绑定关系以及原网站资源，将新的布局样式、绑定关系应用到原网站资源中，进行网页渲染。

进一步地，在通过第一终端设备确定为自身的设备类型为PC端设备后，该方法还可以包括：步骤Sa（图中未示出）和步骤Sb（图中未示出），其中，

步骤Sa、基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染。

其中，原布局样式为适配于PC端设备的布局样式。

对于本申请实施例，若第一终端设备的设备类型为PC端设备，则第一终端设备利用原网站资源（即原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系），进行网页渲染。

步骤Sb、控制显示渲染后的网页。

对于本申请实施例，若第一终端设备为PC端设备，则基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染，以得到适配于PC端的网页，控制显示器显示渲染后的网页。

上述实施例从与第一终端设备的角度介绍一种网站适配方法，下述实施例从第二终端设备的角度介绍一种网站适配的方法，用于网站适配，具体详见下述实施例。

本申请实施例提供了另一种网站适配的方法，该方法由第二终端设备执行，如图2所示，该方法包括：

步骤S201、获取原网站资源。

对于本申请实施例，获取原网站资源：可以通过用户输入网页的网址获取原网站资源，也可以通过技术人员输入网页的网址之后，并接收到获取的操作指令时获取原网站资源。

步骤S202、基于原网站资源创建新的布局样式，以及原网站资源与新的布局样式的绑定关系。

其中，新的布局样式为适配于移动终端设备的布局样式。

对于本申请实施例，将网页中的各个标签合并生成可视化组件，创建新的布局样式，基于可视化组件，对网站的元素进行选取，创建原网站资源与新的布局样式的绑定关系。当新的布局样式包括各个栏目对应的模板时，在创建新的布局样式时，可以对网站各个栏目分别构建模板（即新的布局样式），也可以对多个栏目应用一套模板，多个栏目应用同一个模板时，可以通过正则表达式选取至少两个栏目，正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）。使用单个字符串来描述、匹配一系列符合某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本，例如，在某个网站中，其中一个栏目的网址为

https://mil.news.sina.com.cn/2022-06-27/doc-imizmscu8935598.shtml，该网址代表某个新闻，和该栏目相似的栏目，它们的网址也相似，通过正则表达式选取相似的网址，将这些相似的栏目应用到同一个模板。

步骤S203、基于新的布局样式以及绑定关系生成适配文件。

对于本申请实施例，基于可视化组件，将一些常用的网页展现形式（例如轮播图，多级导航菜单等）生成固定的代码格式，基于可视化组件，以及对网站元素的选取结果（即绑定关系），生成格式代码，基于代码格式和格式代码生成相应的模板代码，基于模板代码生成适配文件。

步骤S204、向Web服务器发送适配文件。

其中，适配文件用于移动终端设备渲染并显示适配后的网页。

对于本申请实施例，第二终端设备可以在生成适配文件之后向Web服务器发送适配文件，也可以在生成适配文件之后，并检测到用户的适配文件发送操作时向Web服务器发送适配文件。

本申请实施例提供了一种网站适配的方法，与相关技术相比，在本申请实施例中第二终端设备在获取原网站资源后，基于原网站资源可以创建适配于移动终端设备的布局样式，以及适配于移动终端设备的布局样式与原网站资源的绑定关系，然后将创建的适配于移动终端的布局样式以及该布局样式与原网站资源的绑定关系推送至Web服务器，以使得移动终端设备基于该布局样式以及绑定关系渲染并显示适配后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

本申请实施例的一种可能的实现方式，步骤S202中基于原网站资源创建新的布局样式，以及原网站资源与新的布局样式的绑定关系，具体可以包括：步骤S2021（图中未示出）和步骤S2022（图中未示出），其中，

步骤S2021、获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码。

其中，源代码为构成网页的语言。

具体地，获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码，具体可以包括：获取用户输入的网站的网址；对网址进行解析，获取网站对应的原布局样式、绑定关系以及网站对应的源代码。

对于本申请实施例，当检测到用户输入的网址时，或者，在用户输入的网址之后，并检测到获取指令时，获取用户输入的网站的网址，以得到网站对应的原布局样式、绑定关系以及网站对应的源代码。

对于本申请实施例，通过对网址的解析，获取网站对应的原布局样式、绑定关系以及网站对应的源代码，网页的源代码所利用的语言可以包括:超文本标记语言（Hyper TextMarkup Language ，HTML）代码，级联样式表（Cascading Style Sheets，CSS）以及高级脚本语言（Javascript，JS）。

其中，HTML是一种标记语言，它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等，CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，JS主要用来向HTML页面添加交互行为。

步骤S2022、基于原布局样式以及绑定关系，对网站对应的源代码进行调整，以创建新的布局样式以及原网站资源与新的布局样式的绑定关系。

对于本申请实施例，第二终端设备只需要创建新的布局样式以及原网站资源与新的布局样式的绑定关系，原网站资源不需要改变，节省了网站适配的成本和时间，提高了网站适配的效率。

具体地，基于原布局样式以及绑定关系，对网站对应的源代码进行调整，具体可以包括：检测用户对原布局样式和/或绑定关系的调整操作；基于调整操作，对网站对应的源代码进行调整。

对于本申请实施例，用户可以通过在拖拽可视化组件和/或对网页元素的位置的调整等操作来调整原布局样式，和/或，原布局样式与原网站资源之间的绑定关系，也就是说，当第二终端设备检测到用户拖拽可视化组件和/或对网页元素的位置的调整的操作，对网站的原布局样式和/或绑定关系做出相应的调整。

具体地，对网站的原布局样式和/或绑定关系做出相应的调整也即基于用户对原布局样式和/或绑定关系的调整操作，动态改变网站对应的源代码（JS代码），得到新的JS的脚本代码。

进一步地，在本申请实施例中，用户仅需要对网站的原布局样式和/或绑定关系进行调整，即可以动态改变网站对应的源代码，而不需要用户手动修改网站对应的源代码，从而可以降低对网站对应的源代码进行修改的复杂度，进而可以提高调整布局样式以及布局样式与网页资源的绑定关系的效率，并且还可以提升用户体验。

本申请实施例的另一种可能的实现方式，步骤S203中基于新的布局样式以及绑定关系生成适配文件，包括：步骤S2031（图中未示出）或者步骤S2032（图中未示出），其中，

步骤S2031、获取校验代码，并基于调整后的代码以及校验代码，生成适配文件。

对于本申请实施例，适配文件具体可以包括：调整后的代码以及校验代码。在本申请实施例中，第二终端设备可以在生成调整后的代码以及校验代码之后生成适配文件，也可以在生成调整后的代码以及校验代码之后，并检测到生成操作的指令时，生成适配文件。

对于本申请实施例，获取校验代码的方式可以包括：获取用户输入的校验代码，或者，从本地存储中获取校验代码，或者，从其他设备中获取校验代码。在本申请实施例中，在获取校验代码以及对原布局样式和/或绑定关系进行调整后所生成的代码后，基于该校验代码以及该调整后生成的代码生成对应的适配文件。

需要说明的是，若通过第一终端设备（访问请求方设备）判断自身对应的终端设备类型（也即判断自身为移动终端设备还是为PC端设备），则第二终端设备生成并发送给Web服务器的适配文件中包含该校验代码，以使得后续Web服务器将该适配文件发送至第一终端设备；若通过Web服务器判断第一终端设备的终端设备类型，则第二设备生成并发送给Web服务器的适配文件中也可以包含该校验代码，但是后续Web服务器发送至第一终端设备的适配文件中可以不包含该校验代码；当然为了降低适配文件的复杂度，并且进一步提升适配文件的准确度，若通过Web服务器判断第一终端设备的终端设备类型，则第二设备生成并发送给Web服务器的适配文件中可以不包含该校验代码，但是后续Web服务器将不包含该校验代码的适配文件发送至第一终端设备，具体详见步骤S2032。

步骤S2032、基于调整后的代码生成适配文件。具体地，基于调整后的代码生成适配文件，具体可以包括：将调整后的代码进行压缩，得到压缩后的代码；基于压缩后的代码生成适配文件。在本申请实施例中，若适配文件中需要包含校验代码以及调整后的代码，则可以将校验代码以及调整后的代码一块进行压缩，得到压缩后的代码；若适配文件中不包含校验代码，则可以将调整后的代码进行压缩，以得到压缩后的代码。

对于本申请实施例，通过对调整后的代码删除空格、空行进行压缩，可以得到一行JS代码，减小适配文件的体积，节省带宽，提升传输速度。

对于本申请实施例，通过压缩后的代码生成适配文件，适配文件主要用于之后移动终端设备实现判断终端类型、网站资源解析、新的布局样式渲染以及绑定关系等功能。

对于本申请实施例，网站适配的过程如图3所示，以手机端为例，在原PC网站头部源文件中插入一行代码，引用适配文件，适配文件由可视化编辑器进行编辑，并生成JS适配代码文件，该JS适配代码文件主要作用是判断终端类型、URL解析（即网页资源解析）、适配样式应用（即新的布局样式应用）以及数据绑定（即绑定关系）等功能，当客户通过手机浏览器访问适配成功的PC网站时，手机端会下载适配代码并运行，适配代码根据校验代码在手机端进行展示，手机端浏览器打开已经适配过的网站，浏览器请求原始网站的内容 （即在手机浏览器打开网站网址），同时会加载适配平台生成的一行代码，适配代码在手机端工作，适配代码在手机端工作的流程具体可以包括：判断第一终端设备的类型、对原网站资源进行解析、新的布局样式渲染以及对原网站资源和新布局样式进行绑定，以新的布局样式展示网站内容。

上述实施例从方法流程的角度介绍一种网站适配的方法，下述实施例从虚拟模块或者虚拟单元的角度介绍了一种网站适配的装置，具体详见下述实施例。

本申请实施例提供了一种网站适配的装置，如图4所示，该网站适配的装置40具体可以包括：访问请求发送模块41、接收模块42、第一渲染模块43和第一控制显示模块44，其中，

访问请求发送模块41，用于向Web服务器发送网站访问请求；

接收模块42，用于接收Web服务器发送的适配文件以及原网站资源，适配文件是Web服务器根据网站访问请求发送的，适配文件包括：第一布局样式以及第一布局样式与原网站资源的绑定关系，第一布局样式为与第一终端设备相适配的布局样式；

第一渲染模块43，用于当终端设备的设备类型为移动终端时，基于第一布局样式、绑定关系以及原网站资源，进行网页渲染；

第一控制显示模块44，用于控制显示渲染后的网页。

本申请实施例的一种可能的实现方式，接收模块42在接收Web服务器发送的适配文件时，具体用于：

若Web服务器判断第一终端设备的设备类型为移动终端设备，则接收Web服务器发送的与移动终端设备相匹配的适配文件，与移动终端设备相匹配的适配文件包含新的布局样式以及新的布局样式与原网站资源的绑定关系，新的布局样式为适配于移动终端设备的布局样式；

若Web服务器判断第一终端设备的设备类型为PC端设备，则接收Web服务器发送的与PC端设备相匹配的适配文件，与PC端设备相匹配的适配文件包括原布局样式与原网站资源的绑定关系，原布局样式为适配于PC端设备的布局样式。

本申请实施例的另一种可能的实现方式，适配文件中还包含校验代码、第二布局样式，以及第二布局样式与原网站资源的绑定关系，第二布局样式为与第一终端设备不适配的布局样式；

装置40还包括：确定模块，其中，

确定模块，用于基于校验代码确定第一终端设备的设备类型；

其中，第一渲染模块在基于第一布局样式、绑定关系以及原网站资源，进行网页渲染时，具体用于：

基于新的布局样式，绑定关系以及原网站资源，进行网页渲染，新的布局样式为适配于移动终端设备的布局样式。

本申请实施例的另一种可能的实现方式，当第一终端设备的设备类型为PC端设备时，装置40还包括：第二渲染模块和第二控制显示模块，其中，

第二渲染模块，用于基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染，原布局样式为适配于PC端设备的布局样式；

第二控制显示模块，用于控制显示渲染后的网页。

本申请实施例提供了一种网站适配的装置，与相关技术相比，在本申请实施例中第一终端设备通过发送访问请求，以接收到适配于第一终端设备的布局样式，以及该布局样式与原网站资源（包含原网站内容）之间的绑定关系，也即当第一终端设备为移动终端设备时，接收到适配于移动终端设备的布局样式以及移动终端设备与原网站资源的绑定关系，以使得移动终端设备可以根据适配于移动终端设备的布局样式以及绑定关系即可以进行网页渲染，并控制显示渲染后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

本申请实施例还提供另一种网站适配的装置50，如图5所示，该网站适配的装置50具体可以包括：获取模块51、创建模块52、生成模块53和适配文件发送模块54，其中，

获取模块51，用于获取原网站资源；

创建模块52，用于基于原网站资源创建新的布局样式，以及原网站资源与新的布局样式的绑定关系，新的布局样式为适配于移动终端设备的布局样式；

生成模块53，用于基于新的布局样式以及绑定关系生成适配文件；

适配文件发送模块54，用于向Web服务器发送适配文件，适配文件用于移动终端设备渲染并显示适配后的网页。

本申请实施例的一种可能的实现方式，创建模块52在基于原网站资源创建新的布局样式，以及原网站资源与新的布局样式的绑定关系时，具体用于：

获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码 ，源代码为构成网页的语言；

基于原布局样式以及绑定关系，对网站对应的源代码进行调整，以创建新的布局样式以及原网站资源与新的布局样式的绑定关系。

本申请实施例的另一种可能的实现方式，创建模块52在获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码时，具体用于：

获取用户输入的获取用户输入的网站的网址；

对网址进行解析，获取网站对应的原布局样式、绑定关系以及网站对应的源代码。

本申请实施例的另一种可能的实现方式，创建模块52在基于原布局样式以及绑定关系，对网站对应的源代码进行调整时，具体用于：

检测用户对原布局样式和/或绑定关系的调整操作；

基于调整操作，对网站对应的源代码进行调整。

本申请实施例的另一种可能的实现方式，生成模块53在基于新的布局样式以及绑定关系生成适配文件时，具体用于：

获取校验代码 ，并基于调整后的代码以及校验代码，生成适配文件；或者，

基于调整后的代码生成适配文件。

本申请实施例提供了一种网站适配的装置，与相关技术相比，在本申请实施例中第二终端设备在获取原网站资源后，基于原网站资源可以创建适配于移动终端设备的布局样式，以及适配于移动终端设备的布局样式与原网站资源的绑定关系，然后将创建的适配于移动终端的布局样式以及该布局样式与原网站资源的绑定关系推送至Web服务器，以使得移动终端设备基于该布局样式以及绑定关系渲染并显示适配后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的一种网站适配的装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本申请实施例提供了一种终端设备，在本申请实施例中，图6所示的终端设备60包括：处理器601和存储器603。其中，处理器601和存储器603相连，如通过总线602相连。可选地，终端设备60还可以包括收发器604。需要说明的是，实际应用中收发器604不限于一个，该终端设备60的结构并不构成对本申请实施例的限定。

处理器601可以是CPU（Central Processing Unit，中央处理器），通用处理器，DSP（Digital Signal Processor，数据信号处理器），ASIC（Application SpecificIntegrated Circuit，专用集成电路），FPGA（Field Programmable Gate Array，现场可编程门阵列）或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器601也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线602可包括一通路，在上述组件之间传送信息。总线602可以是PCI（Peripheral Component Interconnect，外设部件互连标准）总线或EISA（ExtendedIndustry Standard Architecture，扩展工业标准结构）总线等。总线602可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一型的总线。

存储器603可以是ROM（Read Only Memory，只读存储器）或可存储静态信息和指令的其他类型的静态存储设备，RAM（Random Access Memory，随机存取存储器）或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM（Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器）、CD-ROM（Compact DiscRead Only Memory，只读光盘）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器603用于存储执行本申请方案的应用程序代码，并由处理器601来控制执行。处理器601用于执行存储器603中存储的应用程序代码，以实现前述方法实施例所示的内容。

需要说明的是，若该终端设备60为第一终端设备，则处理器601用于执行存储器603中存储的应用程序代码，以实现前述方法实施例中由第一终端设备所执行的内容；若该终端设备60为第二终端设备，则处理器601用于执行存储器603中存储的应用程序代码，以实现前述方法实施例中由第二终端设备所执行的内容。

其中，终端设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA（个人数字助理）、PAD（平板电脑）、PMP（便携式多媒体播放器）、车载终端（例如车载导航终端）等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的终端设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

本申请实施例提供了一种计算机可读存储介质，存储介质存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如上述实施例中由第一终端设备所执行的网站适配的方法。与相关技术相比，在本申请实施例中第一终端设备通过发送访问请求，以接收到适配于第一终端设备的布局样式，以及该布局样式与原网站资源（包含原网站内容）之间的绑定关系，也即当第一终端设备为移动终端设备时，接收到适配于移动终端设备的布局样式以及移动终端设备与原网站资源的绑定关系，以使得移动终端设备可以根据适配于移动终端设备的布局样式以及绑定关系即可以进行网页渲染，并控制显示渲染后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

本申请实施例提供了一种计算机可读存储介质，存储介质存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如上述实施例中由第二终端设备所执行的网站适配的方法。与相关技术相比，在本申请实施例中第二终端设备在获取原网站资源后，基于原网站资源可以创建适配于移动终端设备的布局样式，以及适配于移动终端设备的布局样式与原网站资源的绑定关系，然后将创建的适配于移动终端的布局样式以及该布局样式与原网站资源的绑定关系推送至Web服务器，以使得移动终端设备基于该布局样式以及绑定关系渲染并显示适配后的网页，而不需要对网页的布局和内容均进行重新构建，从而可以降低网站适配的复杂度，进而可以提升网站适配的效率。

其中，第一终端设备对应的方法对应的计算机程序，以及，第二终端设备对应的方法对应的计算机程序，可以在同一计算机可读存储介质存储，也可以在不同计算机可读存储介质中存储，在本申请实施例中不做限定。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种网站适配的方法，应用于网站适配系统，其特征在于，所述网站适配系统包括：第一终端设备、Web服务器以及第二终端设备，所述第一终端设备与所述Web服务器进行信息交互，所述Web服务器与所述第二终端设备进行信息交互，所述方法由第一终端设备执行，包括：

向Web服务器发送网站访问请求；

接收所述Web服务器发送的适配文件以及原网站资源，所述适配文件是所述Web服务器根据所述网站访问请求发送的，所述适配文件包括：第一布局样式、所述第一布局样式与所述原网站资源的绑定关系以及校验代码，所述第一布局样式为与所述第一终端设备相适配的布局样式；

若所述第一终端设备的设备类型为移动终端，则基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染；

控制显示渲染后的网页；

所述接收所述Web服务器发送的适配文件以及原网站资源，之后还包括：

基于所述校验代码确定所述第一终端设备的设备类型；

基于所述第一布局样式、所述绑定关系以及所述原网站资源，进行网页渲染，包括：基于新的布局样式，所述绑定关系以及所述原网站资源，进行网页渲染，所述新的布局样式为适配于所述移动终端设备的布局样式。

2.根据权利要求1所述的方法，其特征在于，接收所述Web服务器发送的适配文件，包括：

若所述Web服务器判断所述第一终端设备的设备类型为移动终端设备，则接收所述Web服务器发送的与移动终端设备相匹配的适配文件，所述与移动终端设备相匹配的适配文件包含新的布局样式以及新的布局样式与原网站资源的绑定关系，所述新的布局样式为适配于所述移动终端设备的布局样式；

若所述Web服务器判断所述第一终端设备的设备类型为PC端设备，则接收所述Web服务器发送的与PC端设备相匹配的适配文件，所述与PC端设备相匹配的适配文件包括原布局样式与原网站资源的绑定关系，所述原布局样式为适配于所述PC端设备的布局样式。

3.根据权利要求1所述的方法，其特征在于，所述适配文件中还包含第二布局样式，以及所述第二布局样式与所述原网站资源的绑定关系，所述第二布局样式为与所述第一终端设备不适配的布局样式；

所述第一终端设备的设备类型为PC端设备，所述方法还包括：

基于原布局样式、原网站资源以及原布局样式与原网站资源的绑定关系，进行网页渲染，所述原布局样式为适配于所述PC端设备的布局样式；

控制显示渲染后的网页。

4.一种网站适配的方法，其特征在于，所述网站适配系统包括：第一终端设备、Web服务器以及第二终端设备，所述第一终端设备与所述Web服务器进行信息交互，所述Web服务器与所述第二终端设备进行信息交互，所述方法由第二终端设备执行，包括：

获取原网站资源；

基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系，所述新的布局样式为适配于移动终端设备的布局样式；

获取校验代码；

基于新的布局样式、所述绑定关系以及所述校验代码生成适配文件；

向所述Web服务器发送所述适配文件，所述适配文件用于所述移动终端设备渲染并显示适配后的网页，以使得所述Web服务器向所述第一终端设备发送适配文件后，以使得所述第一终端设备基于所述校验代码确定所述第一终端设备的类型，并基于新的布局样式、所述绑定关系以及所述原网站资源，进行网页渲染。

5.根据权利要求4所述的方法，其特征在于，所述基于所述原网站资源创建新的布局样式，以及所述原网站资源与所述新的布局样式的绑定关系，包括：

获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码，所述源代码为构成网页的语言；

基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整，以创建所述新的布局样式以及所述原网站资源与所述新的布局样式的绑定关系。

6.根据权利要求5所述的方法，其特征在于，所述获取原布局样式、原布局样式与原网站资源的绑定关系以及网站对应的源代码，包括：

获取用户输入的所述网站的网址；

对所述网址进行解析，获取网站对应的原布局样式、所述绑定关系以及所述网站对应的源代码；

其中，所述基于所述原布局样式以及所述绑定关系，对所述网站对应的源代码进行调整，包括：

检测用户对所述原布局样式和/或所述绑定关系的调整操作；

基于所述调整操作，对所述网站对应的源代码进行调整。

7.根据权利要求6所述的方法，其特征在于，所述基于新的布局样式、所述绑定关系以及所述校验代码生成适配文件，包括：

基于所述调整后的代码以及所述校验代码，生成适配文件。

8.一种终端设备，其特征在于，包括：

一个或者多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于：执行根据权利要求1～3任一项所述的一种网站适配的方法。

9.一种终端设备，其特征在于，包括：

一个或者多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于：执行根据权利要求4～7任一项所述的一种网站适配的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1～3任一项所述的一种网站适配的方法或权利要求4～7任一项所述的一种网站适配的方法。

Images