CN112416331A - 页面的适配方法、装置、电子设备及计算机可读存储介质 - Google Patents
页面的适配方法、装置、电子设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN112416331A CN112416331A CN202011417565.1A CN202011417565A CN112416331A CN 112416331 A CN112416331 A CN 112416331A CN 202011417565 A CN202011417565 A CN 202011417565A CN 112416331 A CN112416331 A CN 112416331A
- Authority
- CN
- China
- Prior art keywords
- style
- page
- converted
- displayed
- determining
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 41
- 230000006978 adaptation Effects 0.000 title abstract description 22
- 238000006243 chemical reaction Methods 0.000 claims abstract description 101
- 238000013515 script Methods 0.000 claims description 12
- 230000014509 gene expression Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 21
- 238000012423 maintenance Methods 0.000 abstract description 7
- 230000002829 reductive effect Effects 0.000 abstract description 6
- 238000004422 calculation algorithm Methods 0.000 description 11
- 238000013461 design Methods 0.000 description 11
- 230000009466 transformation Effects 0.000 description 9
- 230000006870 function Effects 0.000 description 6
- 238000012795 verification Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000013519 translation Methods 0.000 description 3
- 230000002159 abnormal effect Effects 0.000 description 2
- 238000005034 decoration Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000011022 operating instruction Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 101100171060 Caenorhabditis elegans div-1 gene Proteins 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 230000036961 partial effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提供了一种页面的适配方法、装置、电子设备及计算机可读存储介质。该方法包括：基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
Description
技术领域
本申请涉及计算机技术领域，具体而言，本申请涉及一种页面的适配方法、装置、电子设备及计算机可读存储介质。
背景技术
目前，移动端网页主要包括H5页面、混合开发页面以及小程序页面等。(1)H5页面：运行在移动端设备浏览器上的H5页面。(2)混合开发页面：移动端app内嵌的H5页面，非原生开发(安卓和ios开发)页面。(3)小程序页面：包括微信小程序、支付宝小程序、百度小程序和头条小程序等小程序页面。
开发人员在进行网页适配时，需要根据UI设计稿编写页面代码，根据适配算法转换出可以移动端页面代码。转化后的代码可以运行在H5页面和小程序页面；同时在不同屏幕分辨率的设备上展现一致，达到适配效果。
开发人员在开发H5页面和小程序页面时，需要单独开发H5页面和小程序页面；为了适配各种移动端设备往往需要开发多套样式代码，页面里面根据不同的分辨率加载不同样式文件，已达到屏幕适配。项目上线后同样需要维护多套代码。现有的开发模式开发、维护工作量大，效率较低，已无法满足实际的使用需求。
发明内容
本申请的目的旨在至少能解决上述的技术缺陷之一。本申请所采用的技术方案如下：
第一方面，本申请实施例提供了一种页面的适配方法，该方法包括：
基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；
基于预设的转换规则对待转换样式进行转换，得到转换后样式；
基于转换后样式进行待显示页面的展示。
可选地，在基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式之前，方法还包括：
对转换规则对应的转换参数进行校验。
可选地，基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定候选样式；
将候选样式中除指定样式之外的样式确定为待转换样式。
可选地，基于预设的转换规则对待转换样式进行转换，包括：
基于预设的转换规则对待转换样式的尺寸单位进行转换。
可选地，基于转换后样式进行待显示页面的展示，包括：
确定对待转换样式的转换是否存在转换异常；
若不存在，则基于转换后样式进行待显示页面的展示。
可选地，基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，基于正则表达式对待显示页面的样式所对应的样式文件进行匹配，从待显示页面的样式中确定待转换样式。
可选地，样式文件包括以下至少一项：
Html文件；
JavaScript脚本文件；
CSS层叠样式表文件。
第二方面，本申请实施例提供了一种页面的适配装置，该装置包括：
待转换样式确定模块，用于基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；
样式转换模块，用于基于预设的转换规则对待转换样式进行转换，得到转换后样式；
页面展示模块，用于基于转换后样式进行待显示页面的展示。
可选地，上述装置还包括：
转换参数校验模块，用于在基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式之前，对转换规则对应的转换参数进行校验。
可选地，待转换样式确定模块具体用于：
基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定候选样式；
将候选样式中除指定样式之外的样式确定为待转换样式。
可选地，样式转换模块在基于预设的转换规则对待转换样式进行转换时，具体用于：
基于预设的转换规则对待转换样式的尺寸单位进行转换。
可选地，页面展示模块具体用于：
确定对待转换样式的转换是否存在转换异常；
若不存在，则基于转换后样式进行待显示页面的展示。
可选地，待转换样式确定模块具体用于：
基于待显示页面的样式对应的尺寸单位，基于正则表达式对待显示页面的样式所对应的样式文件进行匹配，从待显示页面的样式中确定待转换样式。
可选地，样式文件包括以下至少一项：
Html文件；
JavaScript脚本文件；
CSS层叠样式表文件。
第三方面，本申请实施例提供了一种电子设备，该电子设备包括：处理器和存储器；
存储器，用于存储操作指令；
处理器，用于通过调用操作指令，执行如本申请的第一方面的任一实施方式中所示的页面的适配方法。
第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请的第一方面的任一实施方式中所示的页面的适配方法。
本申请实施例提供的技术方案带来的有益效果是：
本申请实施例提供的方案，通过基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1为本申请实施例提供的一种页面的适配方法的流程示意图；
图2为本申请实施例提供的一种页面的适配装置的结构示意图；
图3为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。
图1示出了本申请实施例提供的一种页面的适配方法的流程示意图，如图1所示，该方法主要可以包括：
步骤S110：基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；
步骤S120：基于预设的转换规则对待转换样式进行转换，得到转换后样式；
步骤S130：基于转换后样式进行待显示页面的展示。
本申请实施例中，待显示页面可能会运行在H5页面或者小程序页面，可预获取待显示页面的设计稿中样式对应的尺寸单位(即输入单位)，以及待显示页面在H5页面或者小程序页面中运行时样式所对应的尺寸单位(即输出单位)，从而针对输入单位与输出单位配置转换规则。
在进行待显示页面的显示之前，可以从待显示页面的样式中确定出待转换样式，并针对待转换样式进行尺寸单位的转换，得到转换后样式，转换后样式对应的尺寸单位能够与输出时屏幕页面对应的尺寸单位相匹配，从而能够基于转换后样式进行待显示页面的展示。
本申请实施例提供的方法，通过基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
本申请实施例的一种可选方式中，在基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式之前，方法还包括：
对转换规则对应的转换参数进行校验。
本申请实施例中，转换规则中可以包括转换参数，可以在进行样式转换之前，对转换参数进行校验，以保证转换参数的准确性，并在确认转换参数校验通过后进行样式的转换。
作为一个一个示例，本申请中的转化参数可以包括设计稿宽度(width)、输入单位(inUnit)，输出单位(outUnit)、转换精度(unitPrecision)、根元素字体大小(rootValue)、忽略转换的样式(selectorBlackList)、最小转换数值(minPixelValue)和移动端设备分辨率(clientWidth)。
设计稿宽度(width)的默认值可以为750(数值型)，也可以是其他数字(如设置为360逻辑像素，即720个物理像素，即设计稿宽度为720)。
输入单位主要分为像素(px)和小程序相对单位(rpx)2种。使用像素(px)编写的代码可以直接在H5页面和程序页面展示。使用rpx相对单位编写的代码可以在小程序(包括微信、支付宝和百度等小程序)上。
输出单位主要有三种分别是vw、rem和rpx。其中vw和rem可以直接运行在H5页面上，rpx可以直接运行在小程序页面上。若输出单位是rem时，网页适配需要配置网页的根元素字体大小(网页根元素字体大小默认是16px)和设置name为viewpoint的mate标签。
转换精度是指转换后保留小数点位数，默认是5位，如0.00001vw或者0.00001rem。
当输出单位(outUnit)设置为rem时，需要设置根元素字体大小(rootValue)，根元素字体大小(rootValue)默认是16(单位是像素)。对于输出单位(outUnit)设置为vw和rpx时，根元素字体大小(rootValue)可以不设置。
需要忽略的样式，即设置转换黑名单，转换黑名单里面的样式不会被转换。需要忽略的样式可以配置为一个数组。
若数组元素配置为字符串的话，则样式中含有传入值时就会被匹配为需要忽略的样式，例如selectorBlackList配置为['color']，那么.color-class的样式就会被确定为需要忽略的样式。
若数组元素配置为正则表达式的话，可以样式表是否匹配该正则表达式来确定需要忽略的样式，例如selectorBlackList配置为[/^color$/],那么color会被忽略，而.color不会。
最小的转换数值，即设置转换精度，默认为1，即只有大于1的值会被转换，小于转换数值的样式不会被转换。
移动端设备分辨率是指逻辑像素，移动端设备分辨率可以默认是375，实际使用中，也可以通过如下脚本获取移动端设备分辨率：document.documentElement.clientWidth。
针对小程序和H5界面，输入单位主要分为像素(px)和小程序相对单位(rpx)2种。输出单位主要有三种分别是vw、rem和rpx。输入和输出一共有5种排列，如表1中所示。
表1
| 输入单位 | 输出单位 |
| 像素px | 视口单位vw |
| 像素px | 相对单位rem |
| 像素px | 相对单位rpx |
| 相对单位(rpx) | 视口单位vw |
| 相对单位(rpx) | 相对单位rem |
具体的转换规则如下：
1、像素px转为视口单位vw，转换公式为：
其中，width为设计稿宽度的值，input为输入值，value为视口单位的值。
例如，width＝750，input＝375px，value＝(375*100)/750＝50vw，即占据屏幕50％的宽度。
该转换规则的应用场景为：以px(像素)为单位的H5页面和小程序页面，转换后的代码样式单位是vw(视窗单位)，可以适配在H5页面和小程序页面。
2、像素px转为相对单位rem，转换公式为：
其中，input为输入值，rootValue为根字体大小，value相对单位rem的值。
例如，input为375px，rootValue默认是16，value＝375/16＝23.4375rem。
该转换规则的应用场景为：以px(像素)为单位的H5页面和小程序页面，转换后的代码样式单位是rem，可以运行在H5页面和小程序页面。
该转换规则在使用时，可以配置meta标签的viewport属性，移动端网页使用rem相对单位做适配时，可以设置name为viewport的meta标签，即<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1,minimum-scale＝1,maximum-scale＝1,user-scalable＝no"/>
另外，rootValue默认是大小是16px，不需要配置页面根元素的字体大小。若配置为其他像素大小时，可以将html标签的字体大小(font-size)设置相应大小数值即可。
3、像素px转为相对单位rpx，转换公式为：
其中，width为设计稿宽度的值，input为输入值，clientWidth为移动端设备分辨率的值，value为相对单位rpx的值。
例如，width＝750，input＝375px，clientWidth＝375px，
该转换规则的应用场景为：以px(像素)为单位的H5页面和小程序页面，转换后的代码样式单位是rpx，可以适配小程序页面。
4、相对单位rpx转为视口单位vw，转换公式为：
其中，input为输入值，width为设计稿宽度的值，value为视口单位vw的值。
例如，width＝750，input＝375px，
即占据屏幕50％的宽度。
该转换规则的应用场景为：以rpx(相对单位)为单位的小程序页面，转换后的代码样式单位是是vw，可以适配在H5页面和小程序页面。
5、相对单位rpx转为相对单位rem，转换公式为：
其中，input为输入值，rootValue为根字体大小，value为相对单位rem的值。
例如，input＝375px，rootValue默认是16，
基于上述示例，对转换参数的校验规则具体如下：
1、设计稿宽度(width)的参数校验：
设计稿宽度(width)：width为一个正整数，默认值是750，当width不是一个正整数时，算法抛出异常，提示开发者检查设计稿宽度(width)。
2、输入单位(inUnit)的参数校验：
输入单位(inUnit)：inUnit是一个字符串，值可以为‘px’和‘rpx’，默认值是‘px’(像素)。当inUnit不是‘px’或者‘prx’时，算法抛出异常，提示开发者检查输入单位(inUnit)。
3、输出单位(outUnit)参数校验：
输出单位(outUnit)：outUnit为一个字符串，取值‘vw’或者‘rem’，默认值是‘vw’(视窗单位宽度)。当outUnit不是‘vw’或者‘rem’时，算法抛出异常，提示开发者检查输出单位(outUnit)。
4、转换精度(unitPrecision)参数校验：
转换精度(unitPrecision)：unitPrecision为一个大于等于0的整数，默认值是5，即保留5位小数，当设置为0时，转换结果为整数。当unitPrecision不是一个大于等于0的整数，算法抛出异常，提示开发者检查转换精度(unitPrecision)。
5、根元素字体大小(rootValue)参数校验：
根元素字体大小(rootValue)：rootValue为一个正整数，默认值是16，即根元素(即html标签)的字体大小是16像素。当rootValue不是正整数时，算法抛出异常，提示开发者检查转换精度(unitPrecision)。
6、忽略转换的样式(selectorBlackList)参数校验：
忽略转换的样式(selectorBlackList)：selectorBlackList是一个数组，selectorBlackList表示不需要转换的样式，使用原有的输入单位(inUnit)。当忽略转换的样式(selectorBlackList)不是一个数组时，算法抛出异常，提示开发者检忽略转换的样式(selectorBlackList)；若忽略转换的样式(selectorBlackList)是一个数组时，但是数组每个元素不是字符串或者不是正则表达式时，算法抛出异常，提示开发者检忽略转换的样式(selectorBlackList)。
7、最小转换数值(minPixelValue)参数校验：
最小转换数值(minPixelValue)：minPixelValue为一个正整数，默认值是1，即只有大于1的值会被转换。当minPixelValue不是正整数时，算法抛出异常，提示开发者检查最小转换数值(minPixelValue)。
8、移动端设备分辨率(clientWidth)参数校验：
移动端设备分辨率(clientWidth)：clientWidth为一个正整数，默认值是375。当clientWidth不是正整数时，算法抛出异常，提示开发者检查移动端设备分辨率(clientWidth)。
本申请实施例的一种可选方式中，基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定候选样式；
将候选样式中除指定样式之外的样式确定为待转换样式。
本申请实施例中，在确定待转换样式时，可以先基于样式对应的尺寸单位，并基于转换规则中所配置的输入单位，查找出候选样式，而后将候选样式中的指定样式忽略，从而得到待转换样式。指定样式即上述忽略转换的样式。
本申请实施例的一种可选方式中，基于预设的转换规则对待转换样式进行转换，包括：
基于预设的转换规则对待转换样式的尺寸单位进行转换。
本申请实施例中，可以基于上述转换规则将待转换样式的尺寸单位进行转换，从而得到待转换样式。
本申请实施例的一种可选方式中，基于转换后样式进行待显示页面的展示，包括：
确定对待转换样式的转换是否存在转换异常；
若不存在，则基于转换后样式进行待显示页面的展示。
本申请实施例中，可以确定上述样式转换过程是否存在异常，在确定未存在转换异常时，可以基于转换后样式进行待显示页面的展示。
本申请实施例的一种可选方式中，基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，基于正则表达式对待显示页面的样式所对应的样式文件进行匹配，从待显示页面的样式中确定待转换样式。
本申请实施例中，可以使用正则表达式在样式文件的内容中进行尺寸单位的匹配，从而确定出待转换样式。
本申请实施例的一种可选方式中，样式文件包括以下至少一项：
Html文件；
JavaScript脚本文件，
CSS层叠样式表文件。
网页主要分为结构(H5中是html，小程序页面是template)，交互(JavaScript脚本)和样式表(css)。本申请实施例中，出结构(H5中是html，小程序页面是template)，交互(JavaScript脚本)和样式表(css)中待转换的样式进行转换，即包括html中的内联样式和JavaScript中的动态样式。
内联样式是直接将样式编写到标签元素上，如：
<p style＝"color:red；margin-left:20px">
This is a paragraph
</p>
动态样式是使用JavaScript脚本编写样式，如：
var div＝document.getElementById("div1")；
div.setAttribute("style","font-size:44px；")；
作为一个示例，匹配待转换样式的核心正则表达式为：new RegExp("\\b\\d+(\\.\\d+)？"+inUnit+"\\b",'g')，其中inUnit就是输入单位。
本申请实施例提供的方案具有如下优势：
(1)转换输入和输出单位可配置。开发者可以自主配置算法的参数，输入的参数可以是‘px’像素，也可以是小程序的‘rpx’相对单位；输出参数可以是视窗单位‘vw’、相对单位‘rem’，也可以是小程序的‘rpx’相对单位。
(2)根元素属性是可选的。对于输出单位是‘vw’和‘rpx’时，不需要配置页面根元素属性。对于输出单位是‘rem’，默认根元素字体大小是16px，开发者可以不配置根元素字体大小；若开发者将输入参数中的根元素字体大小(rootValue)配置为其他数值大小时才需要配置根元素属性。
(3)转换简单。可以将本申请实施例提供的方法封装为插件，开发者在开发时引入插件，配置好输入参数，开发者运行脚本即可转换出相应的输出文件。该插件仅在开发阶段运行，插件不会在上线部署项目文件中，不会影响线上系统运行。开发者不需要自己编写转换逻辑，只需要配置参数即可完成适配工作，开发效率高，项目鲁棒性高。
(4)可扩展性高。开发者可以根据需求配置转换参数以满足更多场景。
(5)转换内容广。一般的适配方案仅转换css样式表中的单位，本专利可以转换html中内联样式和JavaScript中的动态样式。
(6)代码复用率高。使用一套代码即可转换出可以在H5页面和小程序页面的代码，并且适配不同屏幕分辨率的设备。
(7)网页性能好。转换后的代码可以直接运行在H5和小程序页面，并且在网页中不需要执行JavaScript脚本来动态获取移动端屏幕设备分辨率。不需要使用JavaScript脚本设置网页根元素字体大小(转换输出单位为rem时除外)。不需要使用JavaScript脚本动态缩放页面。
基于与图1中所示的方法相同的原理，图2示出了本申请实施例提供的一种页面的适配装置的结构示意图，如图2所示，该页面的适配装置20可以包括：
待转换样式确定模块210，用于基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；
样式转换模块220，用于基于预设的转换规则对待转换样式进行转换，得到转换后样式；
页面展示模块230，用于基于转换后样式进行待显示页面的展示。
本申请实施例提供的装置，通过基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
可选地，上述装置还包括：
转换参数校验模块，用于在基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式之前，对转换规则对应的转换参数进行校验。
可选地，待转换样式确定模块具体用于：
基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定候选样式；
将候选样式中除指定样式之外的样式确定为待转换样式。
可选地，样式转换模块在基于预设的转换规则对待转换样式进行转换时，具体用于：
基于预设的转换规则对待转换样式的尺寸单位进行转换。
可选地，页面展示模块具体用于：
确定对待转换样式的转换是否存在转换异常；
若不存在，则基于转换后样式进行待显示页面的展示。
可选地，待转换样式确定模块具体用于：
基于待显示页面的样式对应的尺寸单位，基于正则表达式对待显示页面的样式所对应的样式文件进行匹配，从待显示页面的样式中确定待转换样式。
可选地，样式文件包括以下至少一项：
Html文件；
JavaScript脚本文件；
CSS层叠样式表文件。
可以理解的是，本实施例中的页面的适配装置的上述各模块具有实现图1中所示的实施例中的页面的适配方法相应步骤的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。上述模块可以是软件和/或硬件，上述各模块可以单独实现，也可以多个模块集成实现。对于上述页面的适配装置的各模块的功能描述具体可以参见图1中所示实施例中的页面的适配方法的对应描述，在此不再赘述。
本申请实施例提供了一种电子设备，包括处理器和存储器；
存储器，用于存储操作指令；
处理器，用于通过调用操作指令，执行本申请任一实施方式中所提供的页面的适配方法。
作为一个示例，图3示出了本申请实施例所适用的一种电子设备的结构示意图，如图3所示，该电子设备2000包括：处理器2001和存储器2003。其中，处理器2001和存储器2003相连，如通过总线2002相连。可选的，电子设备2000还可以包括收发器2004。需要说明的是，实际应用中收发器2004不限于一个，该电子设备2000的结构并不构成对本申请实施例的限定。
其中，处理器2001应用于本申请实施例中，用于实现上述方法实施例所示的方法。收发器2004可以包括接收机和发射机，收发器2004应用于本申请实施例中，用于执行时实现本申请实施例的电子设备与其他设备通信的功能。
处理器2001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器2001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。
总线2002可包括一通路，在上述组件之间传送信息。总线2002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线2002可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
存储器2003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。
可选的，存储器2003用于存储执行本申请方案的应用程序代码，并由处理器2001来控制执行。处理器2001用于执行存储器2003中存储的应用程序代码，以实现本申请任一实施方式中所提供的页面的适配方法。
本申请实施例提供的电子设备，适用于上述方法任一实施例，在此不再赘述。
本申请实施例提供了一种电子设备，与现有技术相比，通过基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现上述方法实施例所示的页面的适配方法。
本申请实施例提供的计算机可读存储介质，适用于上述方法任一实施例，在此不再赘述。
本申请实施例提供了一种计算机可读存储介质，与现有技术相比，通过基于待显示页面的样式对应的尺寸单位，从待显示页面的样式中确定待转换样式；基于预设的转换规则对待转换样式进行转换，得到转换后样式；基于转换后样式进行待显示页面的展示。基于本方案，能够基于转换规则对待显示页面中样式对应的尺寸单位进行自动转换，实现待显示页面的自动匹配，减少了代码的开发量与维护量，并且开发效率高，能够更好的满足实际的使用需求。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (10)
1.一种页面的适配方法，其特征在于，包括：
基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定待转换样式；
基于预设的转换规则对所述待转换样式进行转换，得到转换后样式；
基于所述转换后样式进行所述待显示页面的展示。
2.根据权利要求1所述的方法，其特征在于，在所述基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定待转换样式之前，所述方法还包括：
对所述转换规则对应的转换参数进行校验。
3.根据权利要求1所述的方法，其特征在于，所述基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定候选样式；
将所述候选样式中除指定样式之外的样式确定为待转换样式。
4.根据权利要求1所述的方法，其特征在于，所述基于预设的转换规则对所述待转换样式进行转换，包括：
基于预设的转换规则对所述待转换样式的尺寸单位进行转换。
5.根据权利要求1所述的方法，其特征在于，所述基于所述转换后样式进行所述待显示页面的展示，包括：
确定对所述待转换样式的转换是否存在转换异常；
若不存在，则基于所述转换后样式进行所述待显示页面的展示。
6.根据权利要求1所述的方法，其特征在于，所述基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定待转换样式，包括：
基于待显示页面的样式对应的尺寸单位，基于正则表达式对待显示页面的样式所对应的样式文件进行匹配，从所述待显示页面的样式中确定待转换样式。
7.根据权利要求6所述的方法，其特征在于，所述样式文件包括以下至少一项：
Html文件；
JavaScript脚本文件；
CSS层叠样式表文件。
8.一种页面的适配装置，其特征在于，包括：
待转换样式确定模块，用于基于待显示页面的样式对应的尺寸单位，从所述待显示页面的样式中确定待转换样式；
样式转换模块，用于基于预设的转换规则对所述待转换样式进行转换，得到转换后样式；
页面展示模块，用于基于所述转换后样式进行所述待显示页面的展示。
9.一种电子设备，其特征在于，包括处理器和存储器；
所述存储器，用于存储操作指令；
所述处理器，用于通过调用所述操作指令，执行权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011417565.1A CN112416331A (zh) | 2020-12-07 | 2020-12-07 | 页面的适配方法、装置、电子设备及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011417565.1A CN112416331A (zh) | 2020-12-07 | 2020-12-07 | 页面的适配方法、装置、电子设备及计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112416331A true CN112416331A (zh) | 2021-02-26 |
Family
ID=74775798
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011417565.1A Pending CN112416331A (zh) | 2020-12-07 | 2020-12-07 | 页面的适配方法、装置、电子设备及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416331A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114510225A (zh) * | 2021-12-30 | 2022-05-17 | 北京密码云芯科技有限公司 | 一种网页设计方法、装置、电子设备及存储介质 |
| CN115080027A (zh) * | 2022-08-24 | 2022-09-20 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
| WO2023179329A1 (zh) * | 2022-03-23 | 2023-09-28 | 掌阅科技股份有限公司 | 电子书排版样式代码生成方法、装置、设备及存储介质 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6456305B1 (en) * | 1999-03-18 | 2002-09-24 | Microsoft Corporation | Method and system for automatically fitting a graphical display of objects to the dimensions of a display window |
| CN104063148A (zh) * | 2014-06-11 | 2014-09-24 | 科大讯飞股份有限公司 | 移动终端上Web应用程序的界面动态适配方法及系统 |
| CN106776969A (zh) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | 页面适配方法、装置及电子设备 |
| CN108241505A (zh) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | 一种页面适配方法及装置 |
| CN109783101A (zh) * | 2019-01-25 | 2019-05-21 | 北京字节跳动网络技术有限公司 | 浏览器自动适配的网页布局方法和装置 |
| CN110515624A (zh) * | 2019-07-29 | 2019-11-29 | 济南浪潮数据技术有限公司 | 一种前端单位转换方法、装置、设备和存储介质 |
| CN110837617A (zh) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | 一种网页自适应布局方法、服务器及计算机可读存储介质 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
-
2020
- 2020-12-07 CN CN202011417565.1A patent/CN112416331A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6456305B1 (en) * | 1999-03-18 | 2002-09-24 | Microsoft Corporation | Method and system for automatically fitting a graphical display of objects to the dimensions of a display window |
| CN104063148A (zh) * | 2014-06-11 | 2014-09-24 | 科大讯飞股份有限公司 | 移动终端上Web应用程序的界面动态适配方法及系统 |
| CN106776969A (zh) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | 页面适配方法、装置及电子设备 |
| CN108241505A (zh) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | 一种页面适配方法及装置 |
| CN109783101A (zh) * | 2019-01-25 | 2019-05-21 | 北京字节跳动网络技术有限公司 | 浏览器自动适配的网页布局方法和装置 |
| CN110515624A (zh) * | 2019-07-29 | 2019-11-29 | 济南浪潮数据技术有限公司 | 一种前端单位转换方法、装置、设备和存储介质 |
| CN110837617A (zh) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | 一种网页自适应布局方法、服务器及计算机可读存储介质 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114510225A (zh) * | 2021-12-30 | 2022-05-17 | 北京密码云芯科技有限公司 | 一种网页设计方法、装置、电子设备及存储介质 |
| WO2023179329A1 (zh) * | 2022-03-23 | 2023-09-28 | 掌阅科技股份有限公司 | 电子书排版样式代码生成方法、装置、设备及存储介质 |
| CN115080027A (zh) * | 2022-08-24 | 2022-09-20 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
| CN115080027B (zh) * | 2022-08-24 | 2023-01-06 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112416331A (zh) | 页面的适配方法、装置、电子设备及计算机可读存储介质 | |
| CN103336690B (zh) | 基于html5的文字元素绘制方法及装置 | |
| CN107239392B (zh) | 一种测试方法、装置、终端及存储介质 | |
| CN113190781B (zh) | 页面布局方法、装置、设备及存储介质 | |
| CN110262783B (zh) | 一种接口生成方法、装置及终端设备 | |
| CN111124479B (zh) | 配置文件的解析方法、系统及电子设备 | |
| CN110750789B (zh) | 解混淆方法、装置、计算机设备和存储介质 | |
| CN111427583A (zh) | 组件的编译方法、装置和电子设备及计算机可读存储介质 | |
| US9892027B2 (en) | Event-driven software testing | |
| CN110990010A (zh) | 一种软件界面代码的生成方法及装置 | |
| CN108038093A (zh) | Pdf文字提取方法和装置 | |
| CN111797020A (zh) | 基于动态字节码的mock数据方法及装置 | |
| CN102902678A (zh) | 文本内容排版方法和终端 | |
| US20210232486A1 (en) | Synthesizing printf and scanf statements for generating debug messages in high-level synthesis (hls) code | |
| CN109683890A (zh) | 层叠样式表模块化的方法、装置、存储介质及设备 | |
| CN113050921A (zh) | 一种网页转换方法、装置、存储介质和计算机设备 | |
| US8688608B2 (en) | Verifying correctness of regular expression transformations that use a post-processor | |
| CN111355709A (zh) | 数据验证方法、装置、电子设备及计算机可读存储介质 | |
| CN109324838B (zh) | 单片机程序的执行方法、执行装置及终端 | |
| CN109960590A (zh) | 一种优化嵌入式系统诊断打印的方法 | |
| CN111444456B (zh) | 一种样式编辑方法、装置及电子设备 | |
| CN111158805B (zh) | Delphi软件源语言翻译系统、方法、设备及介质 | |
| CN109783134B (zh) | 前端页面配置方法、装置及电子设备 | |
| KR102021447B1 (ko) | 컴퓨팅 장치 및 그것의 동작 방법 | |
| US20140118368A1 (en) | Method of rendering an overlapping region |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220913 Address after: 25 Financial Street, Xicheng District, Beijing 100033 Applicant after: CHINA CONSTRUCTION BANK Corp. Address before: 12 / F, 15 / F, 99 Yincheng Road, Pudong New Area pilot Free Trade Zone, Shanghai, 200120 Applicant before: Jianxin Financial Science and Technology Co.,Ltd. |
|
| TA01 | Transfer of patent application right |