Web页面呈现方法、装置、设备及存储介质制造方法及图纸

本发明专利技术提供的Web页面呈现方法、装置、设备及存储介质，获取第一显示区域的预设内边距，并根据第一显示区域的预设内边距，确定第一标题区域与第一内容区域在第一显示区域中的布局参数，使其成为基于用户预设参数得到的个性化参数；然后，通过获取内容元素的总数目、预设尺寸与预设外边距，并根据内容元素的总数目、预设尺寸与预设外边距，以及第一内容区域的尺寸，确定内容元素在第一内容区域中的布局参数，使其成为基于用户预设参数得到的个性化参数；最后，采用vue框架，根据以上各区域及元素的布局参数，自适应地呈现目标Web页面，使目标Web页面能够为用户呈现更具个性化的页面效果，从而提高了自适应Web页面的个性化呈现效果。果。果。

【技术实现步骤摘要】
Web页面呈现方法、装置、设备及存储介质


[0001]本专利技术涉及互联网
，更具体的说，涉及Web页面呈现方法、装置、设备及存储介质。

技术介绍

[0002]在Web页面开发中，经常会遇到一组数据具有多个维度的情况，用户通常会希望按照某个维度对数据进行分类，并在Web页面中进行展示。
[0003]现有Web页面呈现方式中，可使用vue框架来自适应地呈现包含多种数据的Web页面，以提高Web页面的自适应性，但是在满足页面自适应的同时，却导致Web页面的呈现风格较为单一，难以满足数据呈现方面的多样化需求，也无法在不同场景下为用户呈现更具个性化的页面效果。
[0004]因此，目前迫切需要一种Web页面呈现方案，以在实现页面自适应的条件下，提高页面的个性化显示效果。

技术实现思路

[0005]鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的Web页面呈现方法、装置、设备及存储介质。
[0006]为实现上述目的，本专利技术提供如下技术方案：
[0007]一种Web页面呈现方法，包括：
[0008]获取第一显示区域的预设内边距；
[0009]根据所述第一显示区域的预设内边距，确定第一标题区域与第一内容区域在所述第一显示区域中的布局参数；所述布局参数包括位置及尺寸；
[0010]获取内容元素的总数目、预设尺寸与预设外边距；
[0011]根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数；
[0012]采用vue框架，根据以上各区域及元素的布局参数，自适应地呈现目标Web页面。
[0013]优选的，在所述获取第一显示区域的预设内边距之前，所述方法还包括：
[0014]获取第二显示区域的预设内边距，所述第二显示区域包裹在所述第一显示区域的外部；
[0015]根据所述第二显示区域的预设内边距，确定第二标题区域与第二内容区域在所述第二显示区域中的布局参数；
[0016]获取第一显示区域的总数目、预设尺寸与预设外边距；
[0017]根据所述第一显示区域的总数目、预设尺寸与预设外边距，以及所述第二内容区域的尺寸，确定所述第一显示区域在所述第二内容区域中的布局参数。
[0018]优选的，所述根据所述第一显示区域的预设内边距，确定第一标题区域与第一内容区域在所述第一显示区域中的布局参数包括：
[0019]根据所述第一显示区域的预设内边距，在所述第一显示区域中确定临边区域；所述临边区域为，当所述第一显示区域的指定边从原始位置向所述第一显示区域的内侧平移所述预设内边距后到达目标位置时，所述原始位置与所述目标位置之间覆盖的区域；所述第一显示区域的指定边，为围成所述第一显示区域的多个边中由用户指定的边；
[0020]将所述临边区域的位置及尺寸，确定为第一标题区域在所述第一显示区域中的位置及尺寸；
[0021]将所述第一显示区域中除所述临边区域之外的剩余区域的位置及尺寸，确定为所述第一内容区域在所述第一显示区域中的位置及尺寸。
[0022]优选的，所述根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数包括：
[0023]根据所述内容元素的预设宽度与预设水平外边距，以及所述第一内容区域的总宽度，确定所述第一内容区域中能够容纳所述内容元素的最大列数，作为第一目标列数；
[0024]根据所述第一目标列数与所述内容元素的总数目，确定所述第一内容区域中容纳所述内容元素所需的最小行数，作为第一目标行数；
[0025]根据所述第一目标列数与所述第一目标行数，以及所述内容元素的预设宽度与预设水平外边距，确定所述内容元素在所述第一内容区域中的位置及尺寸。
[0026]优选的，所述根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数还包括：
[0027]根据所述内容元素的预设外边距，设置所述第一内容区域的负边距，以缩短所述第一内容区域的边界与临近所述边界的内容元素之间的距离；
[0028]根据所述第一目标列数与所述第一目标行数，以及所述内容元素的预设宽度与预设水平外边距，结合所述第一内容区域的负边距，确定所述内容元素在所述第一内容区域中的位置及尺寸。
[0029]优选的，所述根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数还包括：
[0030]当检测到指定内容元素的上方不存在相邻内容元素时，将所述指定内容元素的上外边距调整为零；所述指定内容元素为所述内容元素中的任一内容元素；
[0031]当检测到指定内容元素的下方不存在相邻内容元素时，将所述指定内容元素的下外边距调整为零。
[0032]优选的，在所述根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数之后，所述方法还包括：
[0033]获取内容元素的预设布局方式；
[0034]根据所述内容元素的预设布局方式，确定所述内容元素中子元素的布局参数。
[0035]一种Web页面呈现装置，包括：
[0036]预设参数获取单元，用于获取第一显示区域的预设内边距；
[0037]标题内容布局单元，用于根据所述第一显示区域的预设内边距，确定第一标题区域与第一内容区域在所述第一显示区域中的布局参数；所述布局参数包括位置及尺寸；
[0038]所述预设参数获取单元，还用于获取内容元素的总数目、预设尺寸与预设外边距；
[0039]内容元素布局单元，用于根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数；
[0040]目标页面呈现单元，用于采用vue框架，根据以上各区域及元素的布局参数，自适应地呈现目标Web页面。
[0041]一种存储介质，所述存储介质包括存储的程序，其中，所述程序执行以上任一项所述的Web页面呈现方法。
[0042]一种电子设备，所述电子设备包括至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行以上任一项所述的Web页面呈现方法。
[0043]借由上述技术方案，本专利技术提供的Web页面呈现方法、装置、设备及存储介质，获取第一显示区域的预设内边距，并根据第一显示区域的预设内边距，确定第一标题区域与第一内容区域在第一显示区域中的布局参数，使第一标题区域与第一内容区域的布局参数成为基于用户预设参数得到的个性化参数；然后，通过获取内容元素的总数目、预设尺寸与预设外边距，并根据内容元本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种Web页面呈现方法，其特征在于，包括：获取第一显示区域的预设内边距；根据所述第一显示区域的预设内边距，确定第一标题区域与第一内容区域在所述第一显示区域中的布局参数；所述布局参数包括位置及尺寸；获取内容元素的总数目、预设尺寸与预设外边距；根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数；采用vue框架，根据以上各区域及元素的布局参数，自适应地呈现目标Web页面。2.如权利要求1所述的方法，其特征在于，在所述获取第一显示区域的预设内边距之前，所述方法还包括：获取第二显示区域的预设内边距，所述第二显示区域包裹在所述第一显示区域的外部；根据所述第二显示区域的预设内边距，确定第二标题区域与第二内容区域在所述第二显示区域中的布局参数；获取第一显示区域的总数目、预设尺寸与预设外边距；根据所述第一显示区域的总数目、预设尺寸与预设外边距，以及所述第二内容区域的尺寸，确定所述第一显示区域在所述第二内容区域中的布局参数。3.如权利要求1所述的方法，其特征在于，所述根据所述第一显示区域的预设内边距，确定第一标题区域与第一内容区域在所述第一显示区域中的布局参数包括：根据所述第一显示区域的预设内边距，在所述第一显示区域中确定临边区域；所述临边区域为，当所述第一显示区域的指定边从原始位置向所述第一显示区域的内侧平移所述预设内边距后到达目标位置时，所述原始位置与所述目标位置之间覆盖的区域；所述第一显示区域的指定边，为围成所述第一显示区域的多个边中由用户指定的边；将所述临边区域的位置及尺寸，确定为第一标题区域在所述第一显示区域中的位置及尺寸；将所述第一显示区域中除所述临边区域之外的剩余区域的位置及尺寸，确定为所述第一内容区域在所述第一显示区域中的位置及尺寸。4.如权利要求1所述的方法，其特征在于，所述根据所述内容元素的总数目、预设尺寸与预设外边距，以及所述第一内容区域的尺寸，确定所述内容元素在所述第一内容区域中的布局参数包括：根据所述内容元素的预设宽度与预设水平外边距，以及所述第一内容区域的总宽度，确定所述第一内容区域中能够容纳所述内容元素的最大列数，作为第一目标列数；根据所述第一目标列数与所述内容元素的总数目，确定所述第一内容区域中容纳所述内容元素所需的最小行数，作为第一目标行数；根据所述第一目标列数与所述第一目标行数，以及所述内容元素的预设宽度与预设水平外边距，确定所述内容元素在所述第一内容区域中的位置及尺寸。5.如权...

【专利技术属性】
技术研发人员：袁芳婷，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：