web前端大屏适配方法、装置及其应用与流程

本申请涉及数据可视化，特别是涉及web前端大屏适配方法、装置及其应用。

背景技术：

1、大屏数据可视化开发是一种将数据通过图形化手段进行展示的技术，通常使用大屏幕作为展示媒介。这种技术可以帮助企业、机构和政府更好地了解其业务和运营情况，及时发现问题和机会，优化决策和行动。大屏数据可视化开发通常包括对数据的收集、处理和分析，以及对可视化呈现的设计和实现。它需要运用各种数据可视化技术，如图表、表格、地图等，将数据以清晰、直观的方式展示出来。大屏数据可视化开发可以提高数据可读性和理解性，降低数据分析和处理的难度，从而帮助人们更好地利用数据。

2、目前在传统的大屏数据可视化开发上，直接使用vw或者rem为单位，无法做到快速高效、精准还原ui设计稿的效果，主要有下面这些原因：

3、1)直接使用vw为单位，需要手动进行px单位转vw单位计算，开发效率低。

4、2)采用rem为单位，首先需要手动计算比例，然后在使用rem单位的时候不够精准，仍然需要做一些百分比手动计算，无法高度还原ui设计稿。

5、因此，亟待一种web前端大屏适配方法、装置及其应用，可解决传统开发效率低，ui设计稿还原度差等问题。

技术实现思路

1、本申请实施例提供了web前端大屏适配方法、装置及其应用，针对目前技术传统开发效率低，ui设计稿还原度差等问题。

2、本发明核心技术主要是把读取到ui设计稿的像素值直接设置为虚拟像素单位的值，在代码转化编译的时候，采用规定公式计算转化，达到高效、便捷、精准的开发效果。

3、第一方面，本申请提供了web前端大屏适配方法，所述方法包括以下步骤：

4、s00、加载并读取主入口程序的代码，并将该代码的字符串转化为抽象语法树；

5、s10、遍历抽象语法树，根据抽象语法树中的importdeclaration节点值筛选得到样式文件以及导入语句引用的文件路径；其中，样式文件为css文件；

6、s20、获取样式文件中的css字符串，根据ui设计稿总宽度对该css字符串计算，使得虚拟像素单位的值转换为vw单位的值，得到新的样式文件；

7、s30、根据新的样式文件生成新的主入口文件并插入到html文件中。

8、进一步地，s10步骤中，根据importdeclaration节点值为“.css”结尾筛选得到样式文件。

9、进一步地，s10步骤中，当importdeclaration节点值为“.js”结尾时，根据“.js”结尾文件的路径读取文件为字符串，生成新的语法抽象树，并再次递归执行s10步骤直至筛选得到样式文件。

10、进一步地，s10步骤中，通过设定的正则表达式识别出需要转换的字符位置，将数字部分计算转换，同时将vpx替换为vw。

11、进一步地，s10步骤中，数字部分的计算公式为：

12、x＝虚拟像素*100/ui设计稿总宽度

13、其中，x为计算结果，虚拟像素单位为数值部分，100为将ui设计稿总宽度100等分。

14、进一步地，s10步骤中，正则表达式为：

15、/\b(\d+(\.\d+)？)vpx\b/g。

16、进一步地，s10步骤中，取抽象语法树中的source.value的值作为导入语句引用的文件路径。

17、第二方面，本申请提供了一种web前端大屏适配装置，包括：

18、读取模块，加载并读取主入口程序的代码，并将该代码的字符串转化为抽象语法树；

19、遍历模块，遍历抽象语法树，根据importdeclaration节点值为“.css”结尾筛选得到样式文件以及导入语句引用的文件路径；其中，样式文件为css文件；当importdeclaration节点值为“.js”结尾时，根据“.js”结尾文件的路径读取文件为字符串，生成新的语法抽象树，并再次递归遍历抽象语法树直至筛选得到样式文件；

20、转换模块，获取样式文件中的css字符串，根据ui设计稿总宽度对该css字符串计算，使得虚拟像素单位的值转换为vw单位的值，得到新的样式文件；

21、写入模块，根据新的样式文件生成新的主入口文件并插入到html文件中；

22、输出模块，响应于用户的读取html文件请求，显示内容。

23、第三方面，本申请提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的web前端大屏适配方法。

24、第四方面，本申请提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据上述的web前端大屏适配方法。

25、本发明的主要贡献和创新点如下：1、与现有技术相比，本申请采用虚拟像素单位并进行自动转换计算，不受ui设计稿和屏幕大小的影响，十分灵活的适配各种大小的分辨率，等比缩放宽高不变形；

26、2、与现有技术相比，本申请在css代码编写开发中，设置虚拟像素的值为真实的设计稿像素值，一旦css文件监听器监听到文件变化，自动读取人工编写的css代码，去检测人工编写的css代码，识别出需要转化的css字符位置，然后数字部分(值)计算转化，字符串部分(像素单位)替换vpx成vw，可免去人工计算转换步骤。达到高效、便捷、精准的开发效果。

27、本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

技术特征：

1.web前端大屏适配方法，其特征在于，包括以下步骤：

2.如权利要求1所述的web前端大屏适配方法，其特征在于，s10步骤中，根据importdeclaration节点值为“.css”结尾筛选得到样式文件。

3.如权利要求2所述的web前端大屏适配方法，其特征在于，s10步骤中，当importdeclaration节点值为“.js”结尾时，根据“.js”结尾文件的路径读取文件为字符串，生成新的语法抽象树，并再次递归执行s10步骤直至筛选得到样式文件。

4.如权利要求1所述的web前端大屏适配方法，其特征在于，s10步骤中，通过设定的正则表达式识别出需要转换的字符位置，将数字部分计算转换，同时将vpx替换为vw。

5.如权利要求4所述的web前端大屏适配方法，其特征在于，s10步骤中，数字部分的计算公式为：

6.如权利要求4所述的web前端大屏适配方法，其特征在于，s10步骤中，正则表达式为：

7.如权利要求1-6任意一项所述的web前端大屏适配方法，其特征在于，s10步骤中，取所述抽象语法树中的source.value的值作为导入语句引用的文件路径。

8.一种web前端大屏适配装置，其特征在于，包括：

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至7任一项所述的web前端大屏适配方法。

10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至7任一项所述的web前端大屏适配方法。

技术总结
本申请提出了web前端大屏适配方法、装置及其应用，包括S00、加载并读取主入口程序的代码，并将该代码的字符串转化为抽象语法树；S10、遍历抽象语法树，根据抽象语法树中的ImportDeclaration节点值筛选得到样式文件以及导入语句引用的文件路径；其中，样式文件为css文件；S20、获取样式文件中的css字符串，根据UI设计稿总宽度对该css字符串计算，使得虚拟像素单位的值转换为vw单位的值，得到新的样式文件；S30、根据新的样式文件生成新的主入口文件并插入到html文件中。本申请可不受UI设计稿和屏幕大小的影响，十分灵活的适配各种大小的分辨率，等比缩放宽高不变形。

技术研发人员：郁强,王康平,严金刚,谢淼烽,彭大蒙
受保护的技术使用者：城云科技（中国）有限公司
技术研发日：
技术公布日：2024/1/15