CN116541008A - 前端页面布局方法、装置、设备和存储介质 - Google Patents

前端页面布局方法、装置、设备和存储介质 Download PDF

Info

Publication number
CN116541008A
CN116541008A CN202310815593.6A CN202310815593A CN116541008A CN 116541008 A CN116541008 A CN 116541008A CN 202310815593 A CN202310815593 A CN 202310815593A CN 116541008 A CN116541008 A CN 116541008A
Authority
CN
China
Prior art keywords
page
custom
information
taro
head
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310815593.6A
Other languages
English (en)
Inventor
于志杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Bailong Mayun Technology Co ltd
Original Assignee
Beijing Bailong Mayun Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Bailong Mayun Technology Co ltd filed Critical Beijing Bailong Mayun Technology Co ltd
Priority to CN202310815593.6A priority Critical patent/CN116541008A/zh
Publication of CN116541008A publication Critical patent/CN116541008A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请涉及一种前端页面布局方法，包括：隐藏taro框架的taro页面中的页面头部和页面底部，taro页面包括页面头部、页面内容区域和页面底部；获取自定义的配置信息，自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；根据自定义的配置信息配置taro框架的入口文件，以使得在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部；获取头部路由信息、页面内容路由信息以及底部路由信息；根据头部路由信息控制自定义页面头部的展示，根据页面内容路由信息控制自定义页面内容区域的展示，根据底部路由信息控制自定义页面底部的展示。本申请可以实现基于taro框架对前端页面布局的自定义开发。

Description

前端页面布局方法、装置、设备和存储介质
技术领域
本申请涉及开发技术领域，特别是涉及一种前端页面布局方法、装置、设备和存储介质。
背景技术
taro是一个开放式跨端解决方案，支持使用 React/Vue/Nerv等框架来开发小程序/H5等应用。现如今市面上端的形态多种多样，Web、React Native、小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。taro一套遵循React语法规范的多端开发解决方案。使用taro，只书写一套代码，再通过taro的编译工具，将源代码分别编译出可以在不同端（小程序、H5、App 端等）运行的代码。
由于主流移动端框架即taro是基于多平台跨端开发，然而，在使用taro页面布局时模板化较重，对于特殊定制的布局样式，或特殊样式的navbar（导航条）和tabbar（页卡栏）的兼容较差，并且，自定义样式处理成本高，需要考虑兼容问题，因此，如何基于taro框架实现前端页面布局的自定义化是亟需解决的问题
发明内容
基于此，本申请提供了一种前端页面布局方法、装置、设备和存储介质，以解决现有技术中存在的问题。
第一方面，提供一种前端页面布局方法，该方法包括：
隐藏taro框架的taro页面中的页面头部和页面底部，其中，所述taro页面包括页面头部、页面内容区域和页面底部；
获取自定义的配置信息，所述自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；
根据所述自定义的配置信息配置所述taro框架的入口文件，以使得在所述taro页面的所述页面内容区域展示所述自定义页面头部、自定义页面内容区域和自定义页面底部；
获取头部路由信息、页面内容路由信息以及底部路由信息；
根据所述头部路由信息控制所述自定义页面头部的展示，根据所述页面内容路由信息控制所述自定义页面内容区域的展示， 根据所述底部路由信息控制所述自定义页面底部的展示。
根据本申请实施例中一种可实现的方式，所述根据所述头部路由信息控制所述自定义页面头部的展示，包括：
若所述头部路由信息用于指示展示所述自定义页面头部，则展示所述自定义页面头部；
若所述头部路由信息未指示展示所述自定义页面头部，则展示默认的页面头部。
根据本申请实施例中一种可实现的方式，所述根据所述底部路由信息控制所述自定义页面底部的展示，包括：
若所述底部路由信息用于指示展示所述自定义页面底部，则展示所述自定义页面底部。
根据本申请实施例中一种可实现的方式，所述展示所述自定义页面底部，包括：
识别taro页面的终端设备的设备信息；
根据所述设备信息确定底部展示高度信息；
根据所述底部展示高度信息控制所述自定义页面底部的展示区域。
根据本申请实施例中一种可实现的方式，所述方法还包括：
通过所述自定义页面头部监听到页面处理信息时，获取所述自定义页面内容区域的更新后的页面内容路由信息；
根据所述更新后的页面内容路由信息确定所述自定义页面内容区域的自定义展示业务；
在所述自定义页面内容区域展示所述自定义展示业务。
根据本申请实施例中一种可实现的方式，所述自定义展示业务包括自定义弹窗层和\或自定义loading层。
根据本申请实施例中一种可实现的方式，所述隐藏taro框架的taro页面中的页面头部和页面底部，包括：
将taro框架的页面头部不进行配置，以隐藏所述页面头部；
通过样式控制方式隐藏所述taro页面的页面底部。
第二方面，提供了一种前端页面布局装置，该装置包括：
隐藏模块：用于隐藏taro框架的taro页面中的页面头部和页面底部，其中，所述taro页面包括页面头部、页面内容区域和页面底部；
第一获取模块：用于获取自定义的配置信息，所述自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；
配置模块：用于根据所述自定义的配置信息配置所述taro框架的入口文件，以使得在所述taro页面的所述页面内容区域展示所述自定义页面头部、自定义页面内容区域和自定义页面底部；
第二获取模块：用于获取头部路由信息、页面内容路由信息以及底部路由信息；
展示模块：用于根据所述头部路由信息控制所述自定义页面头部的展示，根据所述页面内容路由信息控制所述自定义页面内容区域的展示， 根据所述底部路由信息控制所述自定义页面底部的展示。
第三方面，提供了一种计算机设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的计算机指令，所述计算机指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述第一方面中涉及的方法。
第四方面，提供了一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述计算机指令用于使计算机执行上述第一方面中涉及的方法。
根据本申请实施例所提供的技术内容，本申请通过隐藏taro框架的taro页面中的页面头部和页面底部，根据自定义的配置信息在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部，进一步分别根据路由信息、页面内容路由信息以及底部路由信息，对自定义页面头部、自定义页面内容区域和自定义页面底部进行展示。本申请可以对于实现基于taro框架对前端页面布局的自定义开发，对于特殊样式的处理支持度高，视觉效果好，开发成本小；由于是在taro页面的页面内容区域进行自定义布局，自定义页面头部、自定义页面底部和自定义页面内容区不相关，头部和底部的展示可以统一配置，提高开发效率。
附图说明
图1为一个实施例中前端页面布局方法的流程示意图；
图2为一个实施例中前端页面布局方法的页面示意图之一；
图3为一个实施例中前端页面布局方法的页面示意图之二；
图4为一个实施例中前端页面布局装置的结构框图；
图5为一个实施例中计算机设备的示意性结构图。
具体实施方式
以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
图1为本申请实施例提供的一种前端页面布局方法的流程图，如图1所示，该方法可以包括以下步骤：
步骤101：隐藏taro框架的taro页面中的页面头部和页面底部，其中，taro页面包括页面头部、页面内容区域和页面底部。
具体地，taro是一个遵循 React 语法规范的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发小程序/H5 等应用，内置了UI组件，还有物料市场，只编写一套代码就能够适配到多端。如图2所示，taro框架的基础结构图中，taro页面包括navbar即页面头部、页面内容区和tabbar即页面底部三个部分。由于taro页面原有的navbar即页面头部和tabbar即页面底部模板化严重，对于特殊定制的布局样式，或特殊样式的navbar和tabbar的兼容较差，无法还原设计图，导致用户视觉效果上感觉体验较差。在本步骤中隐藏taro框架的taro页面中原有的页面头部navbar和页面底部tabbar。
在本申请的一个实施例中，上述步骤101中的隐藏taro框架的taro页面中的页面头部和页面底部，包括：将taro框架的页面头部不进行配置，以隐藏页面头部；通过样式控制方式隐藏taro页面的页面底部。
具体地，步骤101中隐藏taro框架的taro页面中的页面头部包括将taro框架的页面头部不进行配置，以隐藏页面头部。隐藏taro框架的taro页面中的页面底部包括通过样式控制的方式隐藏taro页面的页面底部。
步骤102：获取自定义的配置信息，自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息。
具体地，自定义配置信息是用户自定义的布局样式，包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息。本步骤获取了用户自定义布局样式的自定义配置信息，即自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息。
步骤103：根据自定义的配置信息配置taro框架的入口文件，以使得在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部。
具体地，taro框架的入口文件即根页面，也就是taro页面布局中的页面内容区域，如图2中的页面内容区。根据自定义的配置信息配置taro框架的入口文件即taro页面布局中的页面内容区域，以使得在taro页面的页面内容区域展示用户自定义样式的自定义页面头部、自定义页面内容区域和自定义页面底部。如图3所示，图三为用户taro页面布局中的页面内容区域中自定义的布局样式，包括自定义页面头部、自定义页面内容区域和自定义页面底部。
步骤104：获取头部路由信息、页面内容路由信息以及底部路由信息。
具体地，在taro页面的页面内容区域展示的自定义页面头部、自定义页面内容区域和自定义页面底部，三者相互独立，分别根据各自的路由配置信息进行展示。本步骤中分别获取自定义页面头部对应的头部路由信息，自定义页面内容区域对应的页面内容路由信息和自定义页面底部对应的底部路由信息。
步骤105：根据头部路由信息控制自定义页面头部的展示，根据页面内容路由信息控制自定义页面内容区域的展示，根据底部路由信息控制自定义页面底部的展示。
具体地，根据头部路由信息控制自定义页面头部的展示，例如，列表页面对应列表路由地址，自定义页面头部的顶部导航对应列表标题。自定义页面头部根据路由的变化进行不同的展示，不同的路由信息控制不同的顶部页面名称，如详情页、列表页、我的页面等。根据页面内容路由信息控制自定义页面内容区域的展示，路由信息对页面内容区展示对应的业务内容。根据底部路由信息控制自定义页面底部的展示，例如不同的路由信息控制自定义页面底部的显示或隐藏。
可以看出，本申请实施例通过隐藏taro框架的taro页面中的页面头部和页面底部，根据自定义的配置信息在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部，进一步分别根据路由信息、页面内容路由信息以及底部路由信息，对自定义页面头部、自定义页面内容区域和自定义页面底部进行展示。本申请可以对于实现基于taro框架对前端页面布局的自定义开发，对于特殊样式的处理支持度高，视觉效果好，开发成本小；由于是在taro页面的页面内容区域进行自定义布局，自定义页面头部、自定义页面底部和自定义页面内容区不相关，头部和底部的展示可以统一配置，提高开发效率。
在本申请的一个实施例中，上述步骤105中的根据头部路由信息控制自定义页面头部的展示，包括：若头部路由信息用于指示展示自定义页面头部，则展示自定义页面头部；若头部路由信息未指示展示自定义页面头部，则展示默认的页面头部。
具体地，自定义页面头部默认固定在页面的顶部进行页面标题展示，并根据头部路由信息控制自定义页面头部的展示，例如，列表页面对应列表路由地址，自定义页面头部的顶部导航对应列表标题。若头部路由信息用于指示展示自定义页面头部，则展示自定义页面头部，例如详情页、列表页、我的页面等；若头部路由信息未指示展示自定义页面头部，则展示默认的页面头部，其中默认的页面头部为预先设置的默认样式。
由于顶部展示统一根据路由进行配置，不用在每个页面进行业务处理，只要在顶部文件进行方法配置即可完成业务处理，若头部路由信息未指示展示自定义页面头部就可以使用默认的页面头部。 减少了开发成本，提高了开发效率，与用户的体验效率。
在本申请的一个实施例中，上述步骤105中的根据底部路由信息控制自定义页面底部的展示，包括：若底部路由信息用于指示展示自定义页面底部，则展示自定义页面底部。
具体地，根据底部路由信息控制自定义页面底部的展示，底部tabbar同时根据路由配置进行是否展示，在部分不需要进行tabbar展示的页面进行隐藏。若底部路由信息用于指示展示自定义页面底部，则展示自定义页面底部；若底部路由信息未指示展示自定义页面底部，则不展示自定义页面底部。例如在进入聊天页面时，此页面不需要进行底部tabbar的展示，此时则不展示自定义页面底部。
在本申请的一个实施例中，展示自定义页面底部，包括：识别taro页面的终端设备的设备信息；根据设备信息确定底部展示高度信息；根据底部展示高度信息控制自定义页面底部的展示区域。
具体地，自定义页面底部的tabbar固定在页面的底部，根据不同设备的机型进行底部高度的兼容处理，让其始终保持一定的适配高度。 在展示自定义页面底部tabbar的过程中，首先，识别taro页面对应的终端设备的设备信息，例如设备的型号、尺寸等信息；其次，根据设备信息确定底部展示高度信息，例如tabbar在页面底部展示的高度值；最后，根据底部展示高度信息控制自定义页面底部的展示区域。例如，识别taro页面对应的终端设备的设备信息为设备对应的机型信息，根据机型信息确定底部展示高度信息，包括根据机型信息确定底部展示区域的长度和高度的阈值。根据底部展示区域的长度和高度的阈值，控制自定义的页面底部tabbar展示长度小于长度阈值，高度小于高度阈值。由此，自定义页面底部根据不同设备的机型进行底部高度的兼容处理，让其始终保持一定的适配高度，可解决的适配机型，设备的兼容性问题。
在本申请的一个实施例中，方法还包括：通过自定义页面头部监听到页面处理信息时，获取自定义页面内容区域的更新后的页面内容路由信息；根据更新后的页面内容路由信息确定自定义页面内容区域的自定义展示业务；在自定义页面内容区域展示自定义展示业务。
具体地，通过自定义页面头部监听自定义页面内容区域由于页面变化产生的页面处理信息。其中，页面处理信息例如用户的点击操作等。自定义页面头部用于监听用户在进行了点击页面按钮等页面处理操作时产生的页面处理信息。根据该页面处理信息，获取响应于该页面处理信息自定义页面内容区域的更新后的页面内容路由信息，并根据该更新后的页面内容路由信息，在自定义页面内容区域内展示与更新后的页面内容路由信息对应的自定义展示业务。
在本申请的一个实施例中，自定义展示业务包括自定义弹窗层和\或自定义loading层。
具体地，在通过自定义页面头部监听到页面处理信息时，根据该页面处理信息，获取响应于该页面处理信息自定义页面内容区域的更新后的页面内容路由信息，并根据该更新后的页面内容路由信息，确定自定义页面内容区域的自定义展示业务，包括
定义弹窗层和\或自定义loading层，如图3所示，在自定义页面内容区域内展示对应的定义弹窗层和\或自定义loading层。
本申请的实施例通过隐藏taro框架的taro页面中的页面头部和页面底部，根据自定义的配置信息在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部，进一步分别根据路由信息、页面内容路由信息以及底部路由信息，对自定义页面头部、自定义页面内容区域和自定义页面底部进行展示。本申请可以对于实现基于taro框架对前端页面布局的自定义开发，对于特殊样式的处理支持度高，视觉效果好，开发成本小；由于是在taro页面的页面内容区域进行自定义布局，自定义页面头部、自定义页面底部和自定义页面内容区不相关，头部和底部的展示可以统一配置，提高开发效率。
应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本申请中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
图4为本申请实施例提供的一种前端页面布局装置的结构示意图，如图4所示，该装置可以包括：
隐藏模块401：用于隐藏taro框架的taro页面中的页面头部和页面底部，其中，taro页面包括页面头部、页面内容区域和页面底部；
第一获取模块402：用于获取自定义的配置信息，自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；
配置模块403：用于根据自定义的配置信息配置taro框架的入口文件，以使得在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部；
第二获取模块404：用于获取头部路由信息、页面内容路由信息以及底部路由信息；
展示模块405：用于根据头部路由信息控制自定义页面头部的展示，根据页面内容路由信息控制自定义页面内容区域的展示， 根据底部路由信息控制自定义页面底部的展示。
在本申请的一个实施例中，根据头部路由信息控制自定义页面头部的展示，包括：若头部路由信息用于指示展示自定义页面头部，则展示自定义页面头部；若头部路由信息未指示展示自定义页面头部，则展示默认的页面头部。
在本申请的一个实施例中，根据底部路由信息控制自定义页面底部的展示，包括：若底部路由信息用于指示展示自定义页面底部，则展示自定义页面底部。
在本申请的一个实施例中，展示自定义页面底部，包括：识别taro页面的终端设备的设备信息；根据设备信息确定底部展示高度信息；根据底部展示高度信息控制自定义页面底部的展示区域。
在本申请的一个实施例中，方法还包括：通过自定义页面头部监听到页面处理信息时，获取自定义页面内容区域的更新后的页面内容路由信息；根据更新后的页面内容路由信息确定自定义页面内容区域的自定义展示业务；在自定义页面内容区域展示自定义展示业务。
在本申请的一个实施例中，自定义展示业务包括自定义弹窗层和\或自定义loading层。
在本申请的一个实施例中，隐藏taro框架的taro页面中的页面头部和页面底部，包括：将taro框架的页面头部不进行配置，以隐藏页面头部；通过样式控制方式隐藏taro页面的页面底部。
根据本申请提供的具体实施例，本申请所提供的技术方案可以具备以下优点：
通过隐藏taro框架的taro页面中的页面头部和页面底部，根据自定义的配置信息在taro页面的页面内容区域展示自定义页面头部、自定义页面内容区域和自定义页面底部，进一步分别根据路由信息、页面内容路由信息以及底部路由信息，对自定义页面头部、自定义页面内容区域和自定义页面底部进行展示。本申请可以对于实现基于taro框架对前端页面布局的自定义开发，对于特殊样式的处理支持度高，视觉效果好，开发成本小；由于是在taro页面的页面内容区域进行自定义布局，自定义页面头部、自定义页面底部和自定义页面内容区不相关，头部和底部的展示可以统一配置，提高开发效率。
上述各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
需要说明的是，本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，可以在符合所在国的适用法律法规要求的情况下（例如用户明确同意，对用户切实通知，用户明确授权等），在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。
根据本申请的实施例，本申请还提供了一种计算机设备、一种计算机可读存储介质。本申请还提供了一种计算机设备，包括至少一个处理器，以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的计算机指令，计算机指令被至少一个处理器执行，以使至少一个处理器能够执行上述任一实施例所述前端页面布局方法。
如图3所示，是根据本申请实施例的计算机设备的框图。计算机设备旨在表示各种形式的数字计算机或移动装置。其中数字计算机可以包括台式计算机、便携式计算机、工作台、个人数字助理、服务器、大型计算机和其它适合的计算机。移动装置可以包括平板电脑、智能电话、可穿戴式设备等。
如图5所示，计算机设备500包括计算单元501、ROM 502、 RAM 503 、总线504以及输入/输出（I/O）接口505 ，计算单元 501、ROM 502 以及 RAM 503 通过总线504彼此相连。输入/输出（I/O）接口505也连接至总线504。
计算单元501可以根据存储在只读存储器（ROM）502 中的计算机指令或者从存储单元508加载到随机访问存储器（RAM）503 中的计算机指令，来执行本申请方法实施例中的各种处理。计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501可以包括但不限于中央处理单元（CPU）、图形处理单元（GPU）、各种专用的人工智能（AI）计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器（DSP）、以及任何适当的处理器、控制器、微控制器等。在一些实施例中，本申请实施例提供的方法可被实现为计算机软件程序，其被有形地包含于计算机可读存储介质，例如存储单元508。
RAM 505还可存储设备500操作所需的各种程序和数据。计算机程序的部分或者全部可以经由ROM 502和/或通信单元509而被载入和/或安装到设备500上。
计算机设备500中的输入单元506、输出单元507、存储单元508和通信单元509可以连接至I/O接口505。其中，输入单元506可以是诸如键盘、鼠标、触摸屏、麦克风等；输出单元507可以是诸如显示器、扬声器、指示灯等。设备500能够通过通信单元509与其他设备进行信息、数据等的交换。
需要说明的是，该设备还可以包括实现正常运行所必需的其他组件。也可以仅包含实现本申请方案所必需的组件，而不必包含图中所示的全部组件。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列（FPGA）、专用集成电路（ASIC）、专用标准产品（ASSP）、芯片上系统的系统（SOC）、负载可编程逻辑设备（CPLD）、计算机硬件、固件、软件和/或它们的组合中实现。
用于实施本申请的方法的计算机指令可以采用一个或多个编程语言的任何组合来编写。这些计算机指令可以提供给计算单元501，使得计算机指令当由诸如处理器等计算单元501执行时使执行本申请方法实施例中涉及的各步骤。
本申请还提供了一种计算机可读存储介质，其上存储有计算机指令，所述计算机指令用于使计算机执行上述任一实施例所述前端页面布局方法。
本申请提供的计算机可读存储介质可以是有形的介质，其可以包含或存储计算机指令，用以执行本申请方法实施例中涉及的各步骤。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的等形式的存储介质。
上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (10)

1.一种前端页面布局方法，其特征在于，该方法包括：
隐藏taro框架的taro页面中的页面头部和页面底部，其中，所述taro页面包括页面头部、页面内容区域和页面底部；
获取自定义的配置信息，所述自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；
根据所述自定义的配置信息配置所述taro框架的入口文件，以使得在所述taro页面的所述页面内容区域展示所述自定义页面头部、自定义页面内容区域和自定义页面底部；
获取头部路由信息、页面内容路由信息以及底部路由信息；
根据所述头部路由信息控制所述自定义页面头部的展示，根据所述页面内容路由信息控制所述自定义页面内容区域的展示， 根据所述底部路由信息控制所述自定义页面底部的展示。
2.根据权利要求1所述的前端页面布局方法，其特征在于，所述根据所述头部路由信息控制所述自定义页面头部的展示，包括：
若所述头部路由信息用于指示展示所述自定义页面头部，则展示所述自定义页面头部；
若所述头部路由信息未指示展示所述自定义页面头部，则展示默认的页面头部。
3.根据权利要求1所述的前端页面布局方法，其特征在于，所述根据所述底部路由信息控制所述自定义页面底部的展示，包括：
若所述底部路由信息用于指示展示所述自定义页面底部，则展示所述自定义页面底部。
4.根据权利要求3所述的前端页面布局方法，其特征在于，所述展示所述自定义页面底部，包括：
识别taro页面的终端设备的设备信息；
根据所述设备信息确定底部展示高度信息；
根据所述底部展示高度信息控制所述自定义页面底部的展示区域。
5.根据权利要求1所述的前端页面布局方法，其特征在于，所述方法还包括：
通过所述自定义页面头部监听到页面处理信息时，获取所述自定义页面内容区域的更新后的页面内容路由信息；
根据所述更新后的页面内容路由信息确定所述自定义页面内容区域的自定义展示业务；
在所述自定义页面内容区域展示所述自定义展示业务。
6.根据权利要求5所述的前端页面布局方法，其特征在于，所述自定义展示业务包括自定义弹窗层和或自定义loading层。
7.根据权利要求1所述的前端页面布局方法，其特征在于，所述隐藏taro框架的taro页面中的页面头部和页面底部，包括：
将taro框架的页面头部不进行配置，以隐藏所述页面头部；
通过样式控制方式隐藏所述taro页面的页面底部。
8.一种前端页面布局装置，其特征在于，该装置包括：
隐藏模块：用于隐藏taro框架的taro页面中的页面头部和页面底部，其中，所述taro页面包括页面头部、页面内容区域和页面底部；
第一获取模块：用于获取自定义的配置信息，所述自定义的配置信息包括自定义页面头部信息、自定义页面内容区域信息和自定义页面底部信息；
配置模块：用于根据所述自定义的配置信息配置所述taro框架的入口文件，以使得在所述taro页面的所述页面内容区域展示所述自定义页面头部、自定义页面内容区域和自定义页面底部；
第二获取模块：用于获取头部路由信息、页面内容路由信息以及底部路由信息；
展示模块：用于根据所述头部路由信息控制所述自定义页面头部的展示，根据所述页面内容路由信息控制所述自定义页面内容区域的展示， 根据所述底部路由信息控制所述自定义页面底部的展示。
9.一种计算机设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的计算机指令，所述计算机指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述计算机指令用于使计算机执行权利要求1至7中任一项所述的方法。
CN202310815593.6A 2023-07-04 2023-07-04 前端页面布局方法、装置、设备和存储介质 Pending CN116541008A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310815593.6A CN116541008A (zh) 2023-07-04 2023-07-04 前端页面布局方法、装置、设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310815593.6A CN116541008A (zh) 2023-07-04 2023-07-04 前端页面布局方法、装置、设备和存储介质

Publications (1)

Publication Number Publication Date
CN116541008A true CN116541008A (zh) 2023-08-04

Family

ID=87458180

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310815593.6A Pending CN116541008A (zh) 2023-07-04 2023-07-04 前端页面布局方法、装置、设备和存储介质

Country Status (1)

Country Link
CN (1) CN116541008A (zh)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115268908A (zh) * 2022-07-21 2022-11-01 中国平安财产保险股份有限公司 自定义配置页面的方法、装置、设备和存储介质

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115268908A (zh) * 2022-07-21 2022-11-01 中国平安财产保险股份有限公司 自定义配置页面的方法、装置、设备和存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
WDY5201314: "移动端 Taro 小程序 自定义导航栏", pages 1 - 4, Retrieved from the Internet <URL:https://www.dazhuanlan.com/ wdy5201314/topics/1042554> *
折翼的飞鸟: "Taro自定义Tabbar", pages 1 - 8, Retrieved from the Internet <URL:https://www.cnblogs.com/wind-wang/p/16798285.html> *

Similar Documents

Publication Publication Date Title
CN105988665B (zh) 信息复制系统、信息复制方法及电子设备
CN111240669B (zh) 界面生成方法、装置、电子设备及计算机存储介质
CN107592334A (zh) 一种信息推广方法、装置及设备
CN104871122A (zh) 显示控制设备和程序
CN104375814A (zh) 接口文档的生成方法及装置
CN113378511B (zh) 页面的显示方法、装置、电子设备和存储介质
CN110909768A (zh) 一种标注数据获取方法及装置
CN112508005B (zh) 用于处理图像的方法、装置、设备以及存储介质
CN113033346A (zh) 文本检测方法、装置和电子设备
CN116541008A (zh) 前端页面布局方法、装置、设备和存储介质
CN115878935A (zh) 一种图表的局部刷新方法、系统、装置、设备及介质
CN104281562A (zh) 一种电子文档的处理方法及装置
CN113138760A (zh) 一种页面生成方法、装置、电子设备和介质
CN107291350A (zh) 应用于支持多点触控的终端设备的擦除方法及终端设备
CN113656041A (zh) 数据处理方法、装置、设备及存储介质
CN112861504A (zh) 文本交互方法、装置、设备、存储介质及程序产品
CN105740222A (zh) 用于阅读器排版的方法、设备、阅读器和电子设备
CN113065544A (zh) 一种文字识别方法、装置及电子设备
CN112748917A (zh) 图表显示方法及装置
CN112507671B (zh) 用于调整文本间距的方法、装置、以及可读介质
CN110244886B (zh) 信息显示方法、装置、计算机设备及存储介质
CN113762223B (zh) 题目拆分模型训练方法、题目拆分方法及相关装置
CN116339733B (zh) 一种应用程序页面生成方法、系统、电子设备及介质
CN113342413B (zh) 用于处理组件的方法、装置、设备、介质和产品
CN113438428B (zh) 用于视频自动化生成的方法、装置、设备和计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20230804