基于屏幕适配的数据展示方法、装置、设备及存储介质与流程

本发明涉及一种数据展示，尤其涉及一种基于屏幕适配的数据展示方法、装置、设备及存储介质。

背景技术：

1、随着计算机技术的发展，浏览器页面中的页面的类型日益增多，页面的设计稿尺寸也各有不同，常见的设计稿尺寸有640px(像素)和750px(像素)等。此外，能够浏览页面的终端类型也日益增多，不同类型的终端通常具有不同的操作系统和屏幕尺寸，常见的屏幕尺寸有320px(像素)、375px(像素)和414px(像素)等。同一页面内容在屏幕尺寸的浏览器页面进行展示时，现有技术往往需要创建多套代码，即，每个不同分辨率的浏览器页面都配套设置有一套代码，进而需要技术人员开发多套页面代码，同时，在待展示数据有修改时，需要多套代码同步修改，不方便维护，使得页面开发效率和维护效率较低。

技术实现思路

1、有鉴于此，本发明提供了一种基于屏幕适配的数据展示方法、装置、设备及存储介质，用于解决现有技术中页面开发效率和维护效率较低的问题。

2、第一方面，本发明实施例提供了一种基于屏幕适配的数据展示方法，方法包括：

3、获取目标页面的分辨率数据和页面属性数据，根据所述分辨率数据将所述目标页面划分为不同区域，得到待渲染区域，并根据所述页面属性数据和预设渲染规则判断针对所述目标页面的渲染类型；

4、按照所述渲染类型和待展示数据对所述待渲染区域进行渲染，以将所述待展示数据在所述目标页面上进行展示。

5、可选地，所述获取目标页面的分辨率数据和页面属性数据的步骤，包括：

6、将用于数据展示的设备上目标浏览器的页面作为目标页面，获取所述目标浏览器的分辨率，作为目标页面的分辨率数据；

7、基于所述分辨率数据和预设分类规则确定所述目标浏览器的页面类型；

8、将所述页面类型作为所述页面属性数据。

9、可选地，所述根据所述分辨率数据将所述目标页面划分为不同区域，得到待渲染区域的步骤，包括：

10、通过栅格系统，基于所述分辨率数据，将所述目标页面划分为包含第一预设数目个连续栅格的第一区域；

11、在所述第一区域中选取第二预设数目个连续栅格作为所述待渲染区域。

12、可选地，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

13、在预设数据库中查找是否存在针对不同分辨率数据的页面设计数据集；

14、若存在针对不同分辨率数据的页面设计数据集，则在所述页面设计数据集中确定与所述目标页面对应的页面设计数据，作为目标页面设计数据；

15、基于所述目标页面设计数据获取第一布局参数和第一内容数据，并将所述第一布局参数和所述第一内容数据共同作为所述待展示数据。

16、可选地，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

17、若不存在针对不同分辨率数据的页面设计数据集，则按预设布局规则中的标记方法对各个待渲染区域进行批注，并记录各个待渲染区域的批注信息和所述待渲染区域的数量数据；

18、根据所述批注信息确定与各个待渲染区域对应的第二内容数据；

19、按所述布局规则中的布局方法和所述数量数据确定针对所述目标页面的第二布局参数；

20、将所述第二布局参数和所述第二内容数据共同作为所述待展示数据。

21、可选地，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

22、获取所述目标页面的数量；

23、若所述目标页面的数量小于阈值，则继续执行所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤；

24、若所述目标页面的数量大于或者等于所述阈值，则判断各个目标页面的分辨率数据是否处于同一预设区间；

25、当各个目标页面的分辨率数据处于同一预设区间时，则按照所述渲染类型和待展示数据分别对各个目标页面的待渲染区域进行渲染；

26、当各个目标页面的分辨率数据不处于同一预设区间时，则获取用户请求信息，并基于所述用户请求信息确定各个目标页面的目标渲染类型，所述目标渲染类型用于按照所述目标渲染类型和所述待展示数据对所述待渲染区域进行渲染。

27、可选地，所述获取用户请求信息，并基于所述用户请求信息确定各个目标页面的目标渲染类型的步骤，包括：

28、获取所述用户请求信息中的渲染方案；

29、通过所述渲染方案中包含渲染类型的数量判断所述渲染方案的类型；

30、若所述渲染方案中包含渲染类型的数量为1，则确定所述渲染方案为第一方案，则将所述渲染方案中包含的渲染类型作为各个目标页面的目标渲染类型；

31、若所述渲染方案中包含渲染类型的数量不为1，则将所述渲染方案中包含的各个渲染类型作为所述目标渲染类型。

32、第二方面，本发明实施例还提供了一种基于屏幕适配的数据展示装置，所述装置包括：

33、数据获取模块，用于获取目标页面的分辨率数据和页面属性数据，根据所述分辨率数据将所述目标页面划分为不同区域，得到待渲染区域，并根据所述页面属性数据和预设渲染规则判断针对所述目标页面的渲染类型；

34、渲染模块，用于按照所述渲染类型和待展示数据对所述待渲染区域进行渲染，以将所述待展示数据在所述目标页面上进行展示。

35、第三方面，本发明实施例还提供了一种电子设备，所述电子设备包括：

36、一个或者多个处理器；

37、存储装置，用于存储一个或者多个程序；

38、当所述一个或者多个程序被所述一个或者多个处理器执行，使得所述一个或者多个处理器实现如本发明任一所述实施例中的基于屏幕适配的数据展示方法。

39、第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本发明任一所述实施例中的基于屏幕适配的数据展示方法。

40、本发明实施例的技术方案，通过获取目标页面的分辨率数据和页面属性数据，根据所述分辨率数据将所述目标页面划分为不同区域，得到待渲染区域，并根据所述页面属性数据和预设渲染规则判断针对所述目标页面的渲染类型；按照所述渲染类型和待展示数据对所述待渲染区域进行渲染，以将所述待展示数据在所述目标页面上进行展示。通过将多种渲染方式和一组待展示数据结合到一起，根据不同分辨率灵活选择页面布局，根据页面属性数据选择不同的渲染方式对待展示数据进行处理，无需为每种分辨率的屏幕都设置单独的一套代码，无需多套代码就可以实现屏幕适配提高屏幕适配灵活性，节省了屏幕适配的研发成本，同时，在待展示数据需要修改时，只对一套代码进行修改，显而易见的提高了页面维护效率。

技术特征：

1.一种基于屏幕适配的数据展示方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述获取目标页面的分辨率数据和页面属性数据的步骤，包括：

3.根据权利要求1所述的方法，其特征在于，所述根据所述分辨率数据将所述目标页面划分为不同区域，得到待渲染区域的步骤，包括：

4.根据权利要求1所述的方法，其特征在于，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

5.根据权利要求4所述的方法，其特征在于，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

6.根据权利要求1所述的方法，其特征在于，在所述按照所述渲染类型和待展示数据对所述待渲染区域进行渲染的步骤之前，还包括：

7.根据权利要求6所述的方法，其特征在于，所述获取用户请求信息，并基于所述用户请求信息确定各个目标页面的目标渲染类型的步骤，包括：

8.一种基于屏幕适配的数据展示装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，所述电子设备包括：

10.一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一所述的基于屏幕适配的数据展示方法。

技术总结本发明实施例公开了一种基于屏幕适配的数据展示方法、装置、设备及存储介质，方法包括：获取目标页面的分辨率数据和页面属性数据，根据分辨率数据将所述目标页面划分为不同区域，得到待渲染区域，并根据页面属性数据和预设渲染规则判断针对所述目标页面的渲染类型；按照渲染类型和待展示数据对所述待渲染区域进行渲染，以将所述待展示数据在所述目标页面上进行展示。通过将多种渲染方式和一组待展示数据结合到一起，根据不同分辨率灵活选择页面布局，根据页面属性数据选择不同的渲染方式对待展示数据进行处理，无需为每种分辨率的屏幕都设置单独的一套代码，无需多套代码就可以实现屏幕适配提高屏幕适配灵活性，节省了屏幕适配的研发成本。技术研发人员：马振宏,张攀受保护的技术使用者：宏为（西安）数据服务有限公司技术研发日：技术公布日：2024/11/18