一种前端页面自适应方法、装置、设备及存储介质制造方法及图纸

本申请公开了一种前端页面自适应方法、装置、设备及存储介质，涉及网页数据处理技术领域，包括：获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染。通过本申请的技术方案，可以不需要再去考虑不同设备、屏幕和分辨率的兼容性，实现内联样式在前端页面的自适应。应。应。

【技术实现步骤摘要】
一种前端页面自适应方法、装置、设备及存储介质


[0001]本专利技术涉及网页数据处理
，特别涉及一种前端页面自适应方法、装置、设备及存储介质。

技术介绍

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

技术实现思路

[0005]有鉴于此，本专利技术的目的在于提供一种前端页面自适应方法、装置、设备及存储介质，能够实现内联样式在前端页面的自适应，解决最小字体限制的问题。其具体方案如下：
[0006]第一方面，本申请公开了一种前端页面自适应方法，包括：
[0007]获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；
[0008]通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；
[0009]利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染。
[0010]可选的，所述获取前端框架的目标源代码之前，还包括：
[0011]利用所述预设babel插件根据所述前端页面的设计图设置参考宽度，以得到所述设计图宽度。
[0012]可选的，所述获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树，包括：
[0013]获取react框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树。
[0014]可选的，所述通过深度优先遍历获取所述抽象语法树中的样式节点，包括：
[0015]利用所述预设babel插件，通过访问者模式对JSX元素节点进行深度优先遍历获取JSX属性节点；
[0016]遍历所述JSX属性节点，以得到名称属性为style的样式节点。
[0017]可选的，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，包括：
[0018]若所述样式节点类型为string字符串的第一类型样式节点，则通过正则的方式将所述string字符串中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值；
[0019]若所述样式节点类型为object对象的第二类型样式节点，则通过遍历的方式将所述object对象中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值。
[0020]可选的，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值之后，还包括：
[0021]将所述目标像素值的单位修改为视口单位。
[0022]可选的，所述利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染，包括：
[0023]利用所述目标抽象语法树生成目标JS代码，并基于所述目标JS代码获取相应的虚拟文档对象模型；
[0024]利用所述虚拟文档对象模型生成对应的虚拟文档对象模型树，以便根据所述虚拟文档对象模型树对所述前端页面进行渲染。
[0025]第二方面，本申请公开了一种前端页面自适应装置，包括：
[0026]代码解析模块，用于获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；
[0027]样式转换模块，用于通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；
[0028]代码生成模块，用于利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染。
[0029]第三方面，本申请公开了一种电子设备，所述电子设备包括处理器和存储器；其中，所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如前所述的前端页面自适应方法。
[0030]第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如前所述的前端页面自适应方法。
[0031]本申请中，首先获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；然后通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；最后利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染。由此可见，利用预设babel插件将前端框架的源代码转换成抽象语法树的时候，对抽象语法树进行了深度优先遍历，找到了所有节点中与内联样式相关的、名称属性为style的样式节点，然后根据前端页面的设计图宽度，将其中的像素替换成相应的视口单位，实现内联样式在前端页面的自适应。如此一来，有助于前端开发者在开发过程中只用关注设计图上的像素单位，不需要再去考虑不同设备、屏幕和分辨率的兼容性，而且不用考虑是否在内联样式上书写样式，也不用干涉第三方UI库上的内联样式将其覆盖。针对本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面自适应方法，其特征在于，包括：获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；利用所述目标抽象语法树生成目标JS代码，以便根据所述目标JS代码对所述前端页面进行渲染。2.根据权利要求1所述的前端页面自适应方法，其特征在于，所述获取前端框架的目标源代码之前，还包括：利用所述预设babel插件根据所述前端页面的设计图设置参考宽度，以得到所述设计图宽度。3.根据权利要求1所述的前端页面自适应方法，其特征在于，所述获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树，包括：获取react框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树。4.根据权利要求1所述的前端页面自适应方法，其特征在于，所述通过深度优先遍历获取所述抽象语法树中的样式节点，包括：利用所述预设babel插件，通过访问者模式对JSX元素节点进行深度优先遍历获取JSX属性节点；遍历所述JSX属性节点，以得到名称属性为style的样式节点。5.根据权利要求1所述的前端页面自适应方法，其特征在于，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，包括：若所述样式节点类型为string字符串的第一类型样式节点，则通过正则的方式将所述string字符串中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值；若所述样式节点类型为object对象的第二类型样式节...

【专利技术属性】
技术研发人员：朱锦泽，税雪飞，吴卓群，
申请(专利权)人：杭州安恒信息技术股份有限公司，
类型：发明
国别省市：