一种基于微信小程序的自定义TabBar方法

技术领域

本申请涉及移动应用程序开发和界面设计技术领域，具体为一种基于微信小程序的自定义TabBar方法。

背景技术

TabBar是小程序页面中常用的导航组件，它可以方便地切换页面，并提高用户体验。在一些场景下，自定义TabBar可以更好地满足业务需求和用户体验。微信小程序提供了自定义TabBar的功能，可以自定义底部菜单的背景色、选中态样式、未选中态样式等属性，以适应不同的应用场景，可以自定义每个TabBar按钮的图标，可以是图片或者是iconfont图标等。可以自定义每个TabBar按钮的文字，以便于用户识别和使用。

现有自定义TabBar的样式和功能都需要在代码里定义，且最多只支持5个页面，随着产品需求的变化而不断调整代码，而这些调整可能会涉及到多个页面，增加了维护的难度和成本。由于微信小程序平台的不断更新，以及不同手机厂商、不同操作系统的差异，小程序版本的不同，现有自定义TabBar在不同的环境下可能会出现兼容性问题，需要开发者进行充分的测试和适配。

发明内容

本申请的目的在于提供一种基于微信小程序的自定义TabBar方法，以解决上述背景技术中提出的在不同的环境下可能会出现兼容性问题，需要开发者进行充分的测试和适配的问题。

为实现上述目的，本申请提供如下技术方案：一种基于微信小程序的自定义TabBar方法，包括以下步骤：

步骤A，将app.josn文件配置页面固定为tabbar-custom1，tabbar-custom2，tabbar-custom3，tabbar-custom4，tabbar-custom5这5个页面；

步骤B，将步骤A的5个页面全部引入TabbarCustom组件，隐藏微信小程序自带的tabbar；

步骤C，小程序启动后调用接口，根据接口获取tabbar的配置信息，该配置是一个一维数组；

步骤D，TabbarCustom组件获取tabbar的配置信息，根据tabbar数组内容的顺序分配名为pagePath的tabbar页面路径，然后通过数组的map方法去循环渲染每一项的内容，如果该项为分类导航，则会根据分类导航的配置，通过数组的map方法去循环渲染，生成一个节点通过相对定位固定在该项顶部，默认为隐藏状态，用showClassify为false标识，点击该项区域会触发点击事件，点击事件会拿到该项配置，判断是否是分类导航，如果是分类导航，则取反showClassify状态，展示或隐藏分类导航节点，点击分类导航子项，则会根据路径地址跳转到二级页面，如果不是分类导航，则跳转到该项的pagePath路径，并携带参数realPath，realPath为配置的目标链接地址；

步骤E，tabbar页面会根据页面参数realPath去匹配对应的组件，在页面进行组件的引入渲染。

优选的，所述步骤B中的TabbarCustom组件调用微信官方提供的wx.hideTabBar方法。

优选的，所述步骤C中数组对象信息包含tabbar导航名称，选中前和选中后的导航名称颜色，选中前和选中后的图标，选中前的tababr背景颜色和选中后的tababr背景颜色，是否是分类导航以及渲染页面的路径。

优选的，所述TabbarCustom组件为自定义tabbar组件，负责渲染自定义tabbar的文字样式，图标样式，选中后的文字样式，图标样式，分类导航以及事件处理。

优选的，所述步骤D中如果当前页面的路径地址和当前项的配置地址一致，则用selected为true标识选中状态，根据selected状态分别渲染对应的内容。

与现有技术相比，本发明的有益效果是：

1)本发明支持动态配置TabBar的图标、文字、颜色、背景颜色等属性，而且可以随时进行更新和修改，不需要重新发布应用程序，大大提高了应用程序的灵活性和可维护性。此外，本发明还支持分类导航的新型设计，可以满足不同应用场景下的需求，提高了用户的使用体验。

2)本发明采用了TabbarCustom组件进行渲染，避免了多个页面之间相互影响的问题，提高了应用程序的兼容性和可靠性。同时，通过引入状态栏和标题栏的样式设置，增强了应用程序的可定制性。

3)本发明方案非常简单易用，只需要通过配置后台进行配置即可，降低了应用程序的开发成本和难度。

4)本发明具有原生tabbar的能力，支持switchTab切换tabbar页面，保证其稳定性和可靠性，引入的tabbar页面是一个容器，其内容是根据配置信息渲染生成，是非固定的，且tabbar的页面路径支持配置任意页面，同时tabbar样式根据配置动态展示，可根据需求随时随意配置，更具有灵活性和个性化。

5)本发明支持动态设置TabBar的图标、文字、颜色、背景颜色等属性，可以随时根据需求进行调整；支持动态配置导航栏，状态栏的背景颜色；支持分类导航，在tabbar展示更多跳转链接；支持动态配置tabbar页面路径，不需要通过发布，通过修改配置即可完成更新，灵活多变；tabbar样式适配曲面屏、全面屏；支持非tabbar页面进入小程序，左上角图标可以回到首页。

附图说明

图1为本发明流程框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

实施例：

请参阅图1，本申请提供一种技术方案：一种基于微信小程序的自定义TabBar方法，包括以下步骤：

步骤A，将app.josn文件配置页面固定为tabbar-custom1，tabbar-custom2，tabbar-custom3，tabbar-custom4，tabbar-custom5这5个页面；

步骤B，将步骤A的5个页面全部引入TabbarCustom组件，TabbarCustom组件调用微信官方提供的wx.hideTabBar方法，隐藏微信小程序自带的tabbar；

步骤C，小程序启动后调用接口，根据接口获取tabbar的配置信息，该配置是一个一维数组，数组对象信息包含tabbar导航名称，选中前和选中后的导航名称颜色，选中前和选中后的图标，选中前的tababr背景颜色和选中后的tababr背景颜色，是否是分类导航以及渲染页面的路径；

步骤D，TabbarCustom组件获取tabbar的配置信息，根据tabbar数组内容的顺序分配名为pagePath的tabbar页面路径，例如：数组第一项pagePath为tabbar-custom1的页面路径，数组第二项pagePath为tabbar-custom2的页面路径，以此类推，然后通过数组的map方法去循环渲染每一项的内容，如果当前页面的路径地址和当前项的配置地址(默认为tabbar-custom1页面地址)一致，则用selected为true标识选中状态，根据selected状态分别渲染对应的内容，如果该项为分类导航，则会根据分类导航的配置，通过数组的map方法去循环渲染，生成一个节点通过相对定位固定在该项顶部，默认为隐藏状态，用showClassify为false标识，点击该项区域会触发点击事件，点击事件会拿到该项配置，判断是否是分类导航，如果是分类导航，则取反showClassify状态，展示或隐藏分类导航节点，点击分类导航子项，则会根据路径地址跳转到二级页面，如果不是分类导航，则跳转到该项的pagePath路径，并携带参数realPath，realPath为配置的目标链接地址；

步骤E，tabbar页面会根据页面参数realPath去匹配对应的组件，在页面进行组件的引入渲染。

本发明相对于已有的实现方案，支持动态设置TabBar的图标、文字、颜色、背景颜色等属性，可以随时根据需求进行调整，能够满足不同小程序的不同需求，根据不同小程序的定位和功能特点，自由定制tabbar的样式和布局，增加小程序的灵活性和个性化，通过配置5个固定的页面，注册为TabBar页面，避免了多个页面之间相互影响的问题，提高了代码的可维护性和可读性，通过转换为组件，实现了自定义TabBar的渲染，提高了程序的兼容性和可靠性。

以上显示和描述了本申请的基本原理和主要特征和本申请的优点,对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请；因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本申请内，不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

尽管已经示出和描述了本申请的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本申请的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本申请的范围由所附权利要求及其等同物限定。