网页适配方法、系统及相应计算机设备和存储介质与流程

1.本技术涉及电数字数据处理领域，尤其涉及一种网页适配方法。本技术还涉及一种网页适配系统及相应的计算机设备和计算机可读存储介质。


背景技术：

2.随着移动端、app的普及，传统的pc端页面布局有大量的需求需要在移动端展示。然而，由于pc端和移动端的显示器的差异，移动端的单据内容及格式相较于pc端有较大区别，尽管其核心内容及操作逻辑基本上是一致的。
3.现有的通用解决方案是在ios及安卓系统中重新开发一套展现层及重新编写控制逻辑，通过接口的方式查询、操作数据等。然而，这大大增加了研发的工作量和成本，因为一套逻辑需要在3个版本同时修改。而且，一旦发生需求的变更，原接口无法使用，需要投入研发资源进行整改。


技术实现要素：

4.为了克服现有技术中存在的不足，本发明提供一种网页适配方法、系统及相应计算机设备和存储介质，其使用户能够仅直接调用同样的内容界面即可实现在不同端之间的自适应展示，无需针对pc端和移动端开发不同的版本。
5.在本发明的第一方面，提供一种网页适配方法，包括：
6.确定浏览器访问来自pc端或移动端；
7.响应于浏览器访问来自移动端，确定访问的网页是否包含需要针对移动端进行调整的展示组件和/或控件；
8.响应于访问的网页包含需要针对移动端进行调整的展示组件和/或控件，根据需要调整的展示组件和/或控件，基于适配pc端的组件生成适配移动端的组件，和/或确定适配移动端的控件；
9.加载访问的网页包含的公共展示组件和/或控件的样式文件以及所述适配移动端的组件和/或所述适配移动端的控件的样式文件，其中所述公共展示组件和/或控件为同时适配pc端和移动端的组件和/或控件。
10.在本发明的第二方面，提供一种网页适配系统，包括：
11.第一确定模块，用于确定浏览器访问来自pc端或移动端；
12.第二确定模块，用于响应于浏览器访问来自移动端，确定访问的网页是否包含需要针对移动端进行调整的展示组件和/或控件；
13.适配模块，用于响应于访问的网页包含需要针对移动端进行调整的展示组件和/或控件，根据需要调整的展示组件和/或控件，基于适配pc端的组件生成适配移动端的组件，和/或确定适配移动端的控件；
14.加载模块，用于加载访问的网页包含的公共展示组件和/或控件的样式文件以及所述适配移动端的组件和/或所述适配移动端的控件的样式文件，其中所述公共展示组件
和/或控件为同时适配pc端和移动端的组件和/或控件。
15.在本发明的第三方面，提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现根据本发明的第一方面的方法的步骤或者实现根据本发明的第二方面的系统的功能。
16.根据本发明的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据本发明的第一方面的方法的步骤或者实现根据本发明的第二方面的系统的功能。
17.按照本发明，通过在底层封装表单、表格等组件以及日期、下拉等控件，在确定浏览器访问来自移动端时，确定访问的网页包含的需要针对移动端进行调整的展示组件和/或控件，基于适配pc端的组件生成适配移动端的组件，和/或确定适配移动端的控件，然后加载访问的网页包含的公共展示组件和/或控件的样式文件以及所述适配移动端的组件和/或所述适配移动端的控件的样式文件，实现相应组件和/或控件的自动适配并进行展示，使得用户无论是通过pc端访问还是通过移动端访问，仅需直接调用同样的内容界面即可在pc端和移动端之间进行自适应展示，移动端的展示适应移动端的显示器以及操作习惯，无需针对pc端和移动端开发不同的版本，大大节约了开发成本和时间，尤其是对于复杂多变的表单和表格，本发明的自适应性非常强，大大改善了用户体验。
18.结合附图阅读本发明实施方式的详细描述后，本发明的其它特点和优点将变得更加清楚。
附图说明
19.图1为根据本发明方法的一实施例的流程图；
20.图2为根据本发明系统的一实施例的框图。
21.为清晰起见，这些附图均为示意性及简化的图，它们只给出了对于理解本发明所必要的细节，而省略其他细节。
具体实施方式
22.下面参照附图对本发明的实施方式和实施例进行详细说明。
23.通过下面给出的详细描述，本发明的适用范围将显而易见。然而，应当理解，在详细描述和具体例子表明本发明优选实施例的同时，它们仅为说明目的给出。
24.pc端的特点是屏幕尺寸比较大，通常是宽比高大。移动端的屏幕尺寸比较小，宽度有限。为此，为了美观和操作方便，对于同一对象如表单、表格等，需要在pc端和移动端进行不同的展示。
25.图1示出了根据本发明的网页适配方法的一优选实施例的流程图。
26.在步骤s102，确定浏览器访问来自pc端或移动端。在实施例中，可通过访问的首页地址请求一个转发界面，然后在该转发界面判断逻辑中判断浏览器ua(用户代理)标识是否为移动端，如果浏览器ua标识为移动端，则确定浏览器访问来自移动端，处理进行到步骤s104。否则，如果浏览器ua标识为pc端，则确定浏览器访问来自pc端，处理进行到步骤s120，按目前任何已知的适当方式对网页进行展示，例如渲染布局如上下布局(界面上方展示单据内容、下方展示按钮操作区)、将表单、表格等组件和/或控件实例化、直接进行编辑操作
如录入数据、选择日期或下拉选择等，在此不再赘述。
27.在步骤s104，确定访问的网页是否包含需要针对移动端进行调整的展示组件和/或控件。如果是，则处理进行到步骤s106；否则，处理进行到步骤s120。
28.常用的展示组件包括上下布局组件、表单组件、表格组件、按钮组件和弹出界面组件。常用的展示控件包括文本控件、日期控件、数字控件、下拉控件和快速查询控件。每一组件或控件具有预先设置的属性，如“公共”组件或控件、“自适应”组件或控件。“公共”组件或控件是指同时适配pc端和移动端的组件和/或控件，即pc端和移动端通用或采用同样的展示形式。“自适应”组件或控件指针对移动端需要进行调整的组件和/或控件，以更好地适应移动端的屏幕尺寸及操作习惯。
29.在实施例中，首先确定访问的网页包含哪些展示组件和/或控件，然后根据所包含的展示组件和/或控件的预先设置的属性如“公共”或“自适应”确定哪些展示组件和/或控件需要针对移动端进行调整。
30.例如，上下布局在pc端和移动端可通用，因而上下布局组件可预先设置为公共组件。对于文本控件，由于pc端和移动端都比较简单，也可不做操作模式的修改，因而可预先设置为公共控件。同样，按钮组件和数字控件(在输入内容时只能输入数字)在移动端和pc端展示无区别，也为公共组件或控件。
31.例如，表单组件在pc端一般是多行多列(4、6、8)的控件构成。移动端一般在屏幕宽度受限的情况下无法一行展示这么多内容，即便展示，也不符合移动端的操作习惯，其在移动端的展示需要进行调整，因而可预先设置为自适应组件。
32.在步骤s106，根据需要调整的展示组件和/或控件，基于适配pc端的组件生成适配移动端的组件，和/或确定适配移动端的控件。
33.弹出界面组件：由于其内容不多，在pc端一般采用居中显示。在移动端，可调整为下方侧滑全屏的效果兼容移动端的操作习惯。
34.表单组件：在pc上一般是多行多列(4、6、8)的控件构成。移动端一般无法一行展示这么多内容，可通过配置其格式化属性美化其在移动端的展示效果且仅展示其主要信息，将真正的表单区域隐藏。在用户点击表单格式化内容时，弹出一个界面，通过解析表单的控件元素按照2列多行的模式重新生成控件。表单组件中每一个字段表现形式不一样，例如日期、文本、数字等。因而表单组件由不同的小控件组成。控件元素指表单内的每一个字段，因而也可称为字段内容。在新生成的控件中一一同步表单控件的状态(当前的控件前缀、值、是否可编辑、格式化等属性)，同时将新生成的控件与隐藏的控件建立事件绑定。移动端生成一套用于移动展示的控件之后，原始的控件被隐藏，隐藏的控件用于存储信息和状态。当后续编辑例如录入数据、选择日期或下拉选择时同步传递隐藏的控件，同时隐藏的控件可能会触发其他控件的变化，再将隐藏的控件状态同步至展示层，达到逻辑的一致性。
35.表格组件：在pc上通常有多个列头且列多的情况下会出现横向滚动条，这在移动端操作体验并不好。在移动端，通过配置其格式化属性将每一行的内容美化精简。例如，在用户点击行格式化内容时，弹出一个界面，通过解析表格列的内容及当前值，按照2列多行的模式进行展示，其操作逻辑与表单的逻辑基本一致。
36.需要针对移动端调整的控件由于形式相对固定，可在常用的控件中通过底层代码改变其展示模式及操作习惯达到适配的目的。
37.日期控件：pc端是弹出一个区域日历的形式进行选择。在移动端，展示的内容过多且不固定，编辑时不好选择，可将其展示为在移动端下方显示3个并行的区域，通过上下滚动的方式进行日期选择。
38.下拉控件：pc端是弹出一个小层。在移动端，展示的内容过小且不固定，编辑时不好选择，可将其展示为在移动端下方显示1个并行的区域，通过上下滚动的方式进行内容选择，并适配搜索功能。
39.在步骤s108，在以上组件及控件自动适配的基础上，加载适配后的组件和/或控件(包括公共组件和/或控件以及适配移动端的组件和/或控件)的样式表及前端脚本文件，进行uiue移动端美化及操作模式的兼容。由于系统是单帧模式，在打开系统的情况下，会加载公共组件/控件代码及样式，在移动端的情况下最后加载针对移动端调整或确定的相关组件/控件代码及样式。
40.组件及控件都会同时继承控件基类，该基类提供共同的方法(postcreate)。通过加载顺序在转换文件(前端代码中的转换脚本)中转换不同的控件在移动端的操作模式。
41.利用浏览器的特性，样式文件在最后加载相同xpath的路径的样式，后加载的覆盖前加载的，通过控制样式文件的加载顺序达到移动端控件的表现形式。
42.采用本发明方法的系统可基于web技术进行开发，这种技术只要是浏览器就能运行，且随着移动端性能不断提升，目前主流的移动端均可以达到与pc浏览器相当的解析和响应速度。在移动端和pc均比较成熟的基础上，控制逻辑及后台接口服务可以共用，如查询、保存、提交、审核接口等，且前端校验逻辑均可直接适配，再加上组件和控件展示的自适应适配，使得用户仅需直接调用同样的内容界面即可在pc端和移动端之间进行自适应展示。
43.图2示出了根据本发明的网页适配系统的一优选实施例的框图。该系统包括：
44.第一确定模块202，用于确定浏览器访问来自pc端或移动端；
45.第二确定模块204，用于响应于浏览器访问来自移动端，确定访问的网页是否包含需要针对移动端进行调整的展示组件和/或控件；
46.适配模块206，用于响应于访问的网页包含需要针对移动端进行调整的展示组件和/或控件，根据需要调整的展示组件和/或控件，基于适配pc端的组件生成适配移动端的组件，和/或确定适配移动端的控件；
47.加载模块208，用于加载访问的网页包含的公共展示组件和/或控件的样式文件以及所述适配移动端的组件和/或所述适配移动端的控件的样式文件。
48.在另一实施例中，本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现结合图1所示所述的方法实施例或其它相应方法实施例的步骤或者实现结合图2所示所述的系统实施例或其它相应系统实施例的功能，在此不再赘述。
49.在另一实施例中，本发明提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现结合图1所示所述的方法实施例或其它相应方法实施例的步骤或者实现结合图2所示所述的系统实施例或其它相应系统实施例的功能，在此不再赘述。
50.在此所述的多个不同实施方式或者其特定特征、结构或特性可在本发明的一个或
多个实施方式中适当组合。另外，在某些情形下，只要适当，流程图中和/或流水处理描述的步骤顺序可修改，并不必须精确按照所描述的顺序执行。另外，本发明的多个不同方面可使用软件、硬件、固件或者其组合和/或执行所述功能的其它计算机实施的模块或装置进行实施。本发明的软件实施可包括保存在计算机可读介质中并由一个或多个处理器执行的可执行代码。计算机可读介质可包括计算机硬盘驱动器、rom、ram、闪存、便携计算机存储介质如cd
‑
rom、dvd
‑
rom、闪盘驱动器和/或具有通用串行总线(usb)接口的其它装置，和/或任何其它适当的有形或非短暂计算机可读介质或可执行代码可保存于其上并由处理器执行的计算机存储器。本发明可结合任何适当的操作系统使用。
51.除非明确指出，在此所用的单数形式“一”、“该”均包括复数含义(即具有“至少一”的意思)。应当进一步理解，说明书中使用的术语“具有”、“包括”和/或“包含”表明存在所述的特征、步骤、操作、元件和/或部件，但不排除存在或增加一个或多个其他特征、步骤、操作、元件、部件和/或其组合。如在此所用的术语“和/或”包括一个或多个列举的相关项目的任何及所有组合。
52.前面说明了本发明的一些优选实施例，但是应当强调的是，本发明不局限于这些实施例，而是可以本发明主题范围内的其它方式实现。本领域技术人员可以在本发明技术构思的启发和不脱离本发明内容的基础上对本发明做出各种变型和修改，这些变型或修改仍落入本发明的保护范围之内。