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

技术特征：
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对象的第二类型样式节点，则通过遍历的方式将所述object对象中的所述目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值。6.根据权利要求1所述的前端页面自适应方法，其特征在于，所述将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值之后，还包括：将所述目标像素值的单位修改为视口单位。7.根据权利要求1至6任一项所述的前端页面自适应方法，其特征在于，所述利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染，包括：利用所述目标抽象语法树生成目标js代码，并基于所述目标js代码获取相应的虚拟文档对象模型；利用所述虚拟文档对象模型生成对应的虚拟文档对象模型树，以便根据所述虚拟文档对象模型树对所述前端页面进行渲染。
8.一种前端页面自适应装置，其特征在于，包括：代码解析模块，用于获取前端框架的目标源代码，并利用预设babel插件对所述目标源代码进行解析，以得到抽象语法树；样式转换模块，用于通过深度优先遍历获取所述抽象语法树中的样式节点，然后将所述样式节点中固定不变的目标像素值替换为所述目标像素值与前端页面的设计图宽度的比值，以得到目标抽象语法树；所述样式节点为所述抽象语法树中名称属性为style的属性节点；代码生成模块，用于利用所述目标抽象语法树生成目标js代码，以便根据所述目标js代码对所述前端页面进行渲染。9.一种电子设备，其特征在于，所述电子设备包括处理器和存储器；其中，所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如权利要求1至7任一项所述的前端页面自适应方法。10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的前端页面自适应方法。

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


技术研发人员：朱锦泽 税雪飞 吴卓群
受保护的技术使用者：杭州安恒信息技术股份有限公司
技术研发日：2022.06.17
技术公布日：2022/9/2