一种前端页面自适应方法、装置、设备及存储介质与流程

1.本发明涉及网页数据处理技术领域，特别涉及一种前端页面自适应方法、装置、设备及存储介质。


背景技术：

2.在前端页面开发的时候，元素自适应在网页布局中十分重要，它可以使网页显示更灵便，能够使网页布局可以适应在不同设施、不同窗口和不同分辨率下显示，因此，自适应是最重要也是最麻烦的一种。
3.在前端开发过程中，前端开发者一般通过设计图上所给的固定像素作为自己的布局单位，方便开发以及后期维护，也有部分开发者会将这些样式直接写在内联样式上，并且大部分开发者会使用一些成熟的第三方ui(user interface，用户界面)库，而这些ui库中不可避免的存在着用内联样式作为布局，并且也采用了固定像素作为自己的布局单位，而这些固定的像素，会影响页面在不同设备、分辨率上的自适应。一般在react开发中，外部样式在打包的时候通过postcss插件(一个用javascript工具和插件转换css代码的工具)进行转换，将每个像素(px)转换成相应的视口单位(vw)，但是postcss只能转换外部样式或者内部样式，无法转换内联样式，如果在前端页面的开发过程中引用了第三方ui库，或者开发者在内联样式中书写样式布局，就会导致这些样式布局无法自适应。在现有的前端自适应上，主要采用的方法是通过人工手动计算设计图来将设计图上的固定像素单位转换成视口单位或者百分比；或者是通过外部样式强制覆盖的形式来覆盖内联样式，再通过postcss来进行转换。然而由于pc(personal computer，个人计算机)端部分浏览器，如google chrome浏览器，有最小字体限制，所以在很小的屏幕下自适应效果较差。
4.综上，如何实现内联样式在前端页面的自适应，解决最小字体限制，是目前有待解决的问题。


技术实现要素：

5.有鉴于此，本发明的目的在于提供一种前端页面自适应方法、装置、设备及存储介质，能够实现内联样式在前端页面的自适应，解决最小字体限制的问题。其具体方案如下：
6.第一方面，本技术公开了一种前端页面自适应方法，包括：
7.获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；
8.通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；
9.利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。
10.可选的，所述获取前端框架的目标源代码之前，还包括：
11.利用所述预设babel插件根据所述前端页面的设计图设置参考宽度，以得到所述设计图宽度。
12.可选的，所述获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树，包括：
13.获取react框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树。
14.可选的，所述通过深度优先遍历获取所述抽象语法树中的样式节点，包括：
15.利用所述预设babel插件，通过访问者模式对jsx元素节点进行深度优先遍历获取jsx属性节点；
16.遍历所述jsx属性节点，以得到名称属性为style的样式节点。
17.可选的，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，包括：
18.若所述样式节点类型为string字符串的第一类型样式节点，则通过正则的方式将所述string字符串中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值；
19.若所述样式节点类型为object对象的第二类型样式节点，则通过遍历的方式将所述object对象中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值。
20.可选的，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值之后，还包括：
21.将所述目标像素值的单位修改为视口单位。
22.可选的，所述利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染，包括：
23.利用所述目标抽象语法树生成目标js代码，并基于所述目标js代码获取相应的虚拟文档对象模型；
24.利用所述虚拟文档对象模型生成对应的虚拟文档对象模型树，以便根据所述虚拟文档对象模型树对所述前端页面进行渲染。
25.第二方面，本技术公开了一种前端页面自适应装置，包括：
26.代码解析模块，用于获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；
27.样式转换模块，用于通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；
28.代码生成模块，用于利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。
29.第三方面，本技术公开了一种电子设备，所述电子设备包括处理器和存储器；其中，所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如前所述的前端页面自适应方法。
30.第四方面，本技术公开了一种计算机可读存储介质，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如前所述的前端页面自适应方法。
31.本技术中，首先获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；然后通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；最后利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。由此可见，利用预设babel插件将前端框架的源代码转换成抽象语法树的时候，对抽象语法树进行了深度优先遍历，找到了所有节点中与内联样式相关的、名称属性为style的样式节点，然后根据前端页面的设计图宽度，将其中的像素替换成相应的视口单位，实现内联样式在前端页面的自适应。如此一来，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性，而且不用考虑是否在内联样式上书写样式，也不用干涉第三方ui库上的内联样式将其覆盖。针对一些大屏或者移动端的自适应，这些环境下不会有最小字体限制的问题。
附图说明
32.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
33.图1为本技术公开的一种前端页面自适应方法流程图；
34.图2为本技术公开的一种实例处理方法示意图；
35.图3为本技术公开的一种具体的前端页面自适应方法流程图；
36.图4为本技术公开的一种实例应用场景示意图；
37.图5为本技术公开的一种前端页面自适应装置结构示意图；
38.图6为本技术公开的一种电子设备结构图。
具体实施方式
39.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
40.目前，在前端页面开发的时候，前端开发者一般通过设计图上所给的固定像素作为自己的布局单位，方便开发以及后期维护，也有部分开发者会将这些样式直接写在内联样式上，并且大部分开发者会使用一些成熟的第三方ui库，而这些ui库中不可避免的存在着用内联样式作为布局，并且也采用了固定像素作为自己的布局单位，而这些固定的像素，会影响页面的在不同设备、分辨率上的自适应。
41.为此，本技术公开了一种前端页面自适应方案，能够实现内联样式在前端页面的自适应，解决最小字体限制的问题。
42.本发明实施例公开了一种前端页面自适应方法，参见图1所示，该方法包括：
43.步骤s11：获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树。
44.本技术实施例中，以react框架为例进行说明，首先创建一个预设babel插件(一个javascript编译器)，该预设babel插件中包含转换函数，因此，利用预设babel插件对框架的目标源代码进行解析javascript(一种直译式脚本语言)和jsx(一种javascript的语法扩展)语句，生成抽象语法树(abstract syntax tree，ast)，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，本实施例中具体指的是通过babel转换react项目所获的抽象语法树。另外，其他前端框架的具体实施过程也可以参考本技术实施例，在此不再进行赘述。
45.本技术实施例中，利用预设babel插件根据前端页面的设计图设置参考宽度，可以得到所述设计图宽度，可以理解的是，所述设计图宽度为根据ui设计图设置的页面总宽度。
46.步骤s12：通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点。
47.本技术实施例中，在对react项目打包的过程中，由于预设babel插件中包含转换函数，所以可以对抽象语法树进行转换。具体的，预设babel插件通过借助访问者模式对所要关注的节点进行处理。需要指出的是，本技术实施例中针对jsx element节点(jsx元素节点)中的jsx attribute节点(jsx属性节点)进行处理。由于jsx element是元素dom(document object model，文档对象模型)的编译结果，而jsx attribute是所对应元素dom的属性，因此在该节点中可以找到内联元素的内容。
48.可以理解的是，内联样式，又称行内样式，在标签内部通过style属性来设置元素的样式。所以本技术实施例中，利用预设babel插件通过深度优先遍历在找到jsx attribute节点后，进一步的，通过遍历获取到name属性为style的样式节点。需要指出的是，name属性为style的样式节点内容有两种类型，一种是string字符串，一种是object对象。
49.在一种具体实施方式中，若所述样式节点类型为string字符串的第一类型样式节点，则通过正则的方式将所述string字符串中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值。也就是说，如果样式节点为string字符串，则通过正则的方式获取到字符串中包含px的所有数据(width)，然后通过计算target width＝(width/source width)*100获取到转换后的数据target width；其中，source width为利用预设babel插件设置好的设计图宽度。
50.在另一种具体的实施方式中，若所述样式节点类型为object对象的第二类型样式节点，则通过遍历的方式将所述object对象中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值。也就是说，如果样式节点为object对象，则通过遍历的方式获取到对象中所有包含px的值(width)，然后通过计算target width＝(width/source width)*100获取到转换后的数据target width。
51.本技术实施例中，在计算出所述样式节点中固定不变的目标像素值与前端页面的设计图宽度的比值之后，将这个比值替换为目标像素值，进一步的，将所述目标像素值的单
位修改为视口单位。需要指出的是，视口(viewport)代表当前可见的计算机图形区域，在web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的ui、菜单栏等，即指正在浏览的文档的那一部分。视口单位主要包括：vw(1vw等于视口宽度的1％)、vh(1vh等于视口高度的1％)、vmin(选取vw和vh中最小的那个)、vmax(选取vw和vh中最大的那个)，本技术实施例中具体采用的是vw。也即，在上述两种具体的实施方式之后，将width(px)替换成target width(vw)，如此一来，将抽象语法树利用预设babel插件转换成为目标抽象语法树，将固定像素单位转换成可以自适应的视口单位。
52.步骤s13：利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。
53.本技术实施例中，将目标抽象语法树生成目标js代码，此时的js代码中虚拟dom的内联样式已经从固定像素单位(px)转成了视口单位(vw)。然后，利用目标js代码对前端页面进行渲染，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性。而且不用考虑是否在内联样式上书写样式，也不用干涉第三方ui库上的内联样式，将其覆盖。
54.示例性的，如图2所示为具体的处理方法示意流程图。具体为编译jsx源代码，实现react项目打包的过程。首先会创建一个包含转换函数的预设babel插件来解析javascript和jsx语句，生成抽象语法树；然后再将ast树通过深度优先遍历，对节点进行处理转换成相应的目标ast树，具体为，ast进行深度优先遍历的过程中，找到type为jsx element的时候获取到需要转换的元素，然后再找到type为jsx attribute并且name为style的节点，这个就是所要处理的节点，将里面包含了固定像素单位(px)的值提取出来，和设置的设计图宽度进行百分比计算获取到相应的百分比值，最后将其进行替换并加上视口单位(vw)，使这个元素dom可以自适应；最后将目标ast树生成目标js代码。
55.本技术中，首先获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；然后通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；最后利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。由此可见，利用预设babel插件将前端框架的源代码转换成抽象语法树的时候，对抽象语法树进行了深度优先遍历，找到了所有节点中与内联样式相关的、名称属性为style的样式节点，然后根据前端页面的设计图宽度，将其中的像素替换成相应的视口单位，实现内联样式在前端页面的自适应。如此一来，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性，而且不用考虑是否在内联样式上书写样式，也不用干涉第三方ui库上的内联样式将其覆盖。针对一些大屏或者移动端的自适应，这些环境下不会有最小字体限制的问题。
56.本技术实施例公开了一种具体的前端页面自适应方法，参见图3所示，该方法包括：
57.步骤s21：获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树。
58.其中，关于上述步骤s21更加具体的处理过程可以参考前述实施例中公开的相应
内容，在此不再进行赘述。
59.步骤s22：通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点。
60.其中，关于上述步骤s22更加具体的处理过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
61.步骤s23：利用所述目标抽象语法树生成目标js代码，并基于所述目标js代码获取相应的虚拟文档对象模型。
62.本技术实施例中，在得到可以实现内联样式自适应的目标抽象语法树后，利用所述目标抽象语法树生成目标js代码，和相应的虚拟dom(文档对象模型)。
63.步骤s24：利用所述虚拟文档对象模型生成对应的虚拟文档对象模型树，以便根据所述虚拟文档对象模型树对所述前端页面进行渲染。
64.本技术实施例中，生成目标js代码和相应的虚拟dom之后，生成dom树，然后进行网页渲染展示，如图4所示为本技术实施例中应用场景的示意流程图，其中，使用babel插件，将代码进行编译，将相应的样式布局进行替换则对应前述实施例中的具体操作内容，在此不再进行赘述。
65.本技术中，首先获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；然后通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；最后利用所述目标抽象语法树生成目标js代码，并基于所述目标js代码获取相应的虚拟文档对象模型；利用所述虚拟文档对象模型生成对应的虚拟文档对象模型树，以便根据所述虚拟文档对象模型树对所述前端页面进行渲染。由此可见，利用预设babel插件将前端框架的源代码转换成抽象语法树的时候，对抽象语法树进行了深度优先遍历，找到了所有节点中与内联样式相关的，名称属性为style的样式节点，然后根据前端页面的设计图宽度，将其中的像素替换成相应的视口单位，实现内联样式在前端页面的自适应，如此一来，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性，而且不用考虑是否在内联样式上书写样式，也不用干涉第三方ui库上的内联样式将其覆盖。针对一些大屏或者移动端的自适应，这些环境下不会有最小字体限制的问题。
66.相应的，本技术实施例还公开了一种前端页面自适应装置，参见图5所示，该装置包括：
67.代码解析模块11，用于获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；
68.样式转换模块12，用于通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；
69.代码生成模块13，用于利用所述目标抽象语法树生成目标js代码，以便根据所述
目标js代码对所述前端页面进行渲染。
70.其中，关于上述各个模块更加具体的工作过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
71.由此可见，通过本实施例的上述方案，首先获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；然后通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；最后利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。由此可见，利用预设babel插件将前端框架的源代码转换成抽象语法树的时候，对抽象语法树进行了深度优先遍历，找到了所有节点中与内联样式相关的，名称属性为style的样式节点，然后根据前端页面的设计图宽度，将其中的像素替换成相应的视口单位，实现内联样式在前端页面的自适应，如此一来，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性，而且不用考虑是否在内联样式上书写样式，也不用干涉第三方ui库上的内联样式将其覆盖。针对一些大屏或者移动端的自适应，这些环境下不会有最小字体限制的问题。
72.进一步的，本技术实施例还公开了一种电子设备，图6是根据一示例性实施例示出的电子设备20结构图，图中内容不能认为是对本技术的使用范围的任何限制。
73.图6为本技术实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的前端页面自适应方法中的相关步骤。另外，本实施例中的电子设备20具体可以为计算机。
74.本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本技术技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
75.另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222及数据223等，数据223可以包括各种各样的数据。存储方式可以是短暂存储或者永久存储。
76.其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是windows server、netware、unix、linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的前端页面自适应方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
77.进一步的，本技术实施例还公开了一种计算机可读存储介质，这里所说的计算机可读存储介质包括随机存取存储器(random access memory，ram)、内存、只读存储器(read-only memory，rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、磁碟或者光盘或技术领域内所公知的任意其他形式的存储介质。其中，所述计算机程序被处理器执行时
实现前述前端页面自适应方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。
78.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
79.结合本文中所公开的实施例描述的前端页面自适应或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。
80.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
81.以上对本发明所提供的一种前端页面自适应方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。