微信小程序 自定义tabbar

官网地址：

>

在一个微信小程序中想要用到两种不同的tabbar样式，需要在appjs中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbarwxml

在appjson中无需定义“tabBar”

在appjs中自定义如下

在appwxss中定义显示样式

indexwxml，用到自定义tabbar的页面的首部都需要引入模板文件

indexjs

logsjs

加载自定义tabbar的那句话（appeditTabBar）写在onload或onshow中都可以。

只写了两个主页面，其他页面可自行定义跳转。

最后放上效果图：

wxnavigateTo 和 wxredirectTo 是不允许跳转到 tabbar 页面的，

所以如果需要跳转到含有tabbar的页面，只能用 wxswitchTab 跳转。

            wxswitchTab({

                  url: '/home/home'

            })

wxswitchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wxreLaunch：关闭所有页面，打开到应用内的某个页面。

wxreLaunch是可以跳转到tabBar页面的。它和wxswitchTab的区别就是：前者可以触发onLoad事件，而后者则不能触发。所以通过wxreLaunch跳转到tabBar的方式完美解决了不能刷新的问题。

在小程序项目中 我发现 wxswitchTab 跳转是触发onLoad事件  但是只会触发一次 如果我通过退出登录 是不会再次触发onLoad事件 的 而wxreLaunch是可以跳转到tabBar页面的 再次触发onLoad事件

制作的icon要在5050px以内（红色）， 小程序导航icon周围系统自留了空间（蓝色），此处的小房子icon是3439px

微信小程序，简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

扩展资料：

安全管理

2018年12月27日,腾讯公司发布《腾讯隐私保护白皮书》,倡导“科技向善,数据有度”的隐私保护理念。在小程序的《服务条款》、《运营规范》中,分别设有“用户个人信息保护”和“用户隐私及数据规范”专章介绍。

微信小程序在产品功能设计上给用户更多控制力。在小程序的设置页,为用户提供了数据权限开关,一旦用户授权之后又关闭,小程序再次使用该用户数据时需要重新获得授权,为用户提供更方便的数据控制权。用户在小程序的资料页还可以看到隐私数据保护的提示以及投诉入口。

小程序在收集、获取用户数据上,小程序坚持“必要+合理”原则。必要是指只有在小程序的具体业务中,确实有场景需要获取用户数据的情况下,开发者才能去获取用户的同意授权；合理是指开发者获取数据的范围不应该超出具体场景所需要的数据范围。

例如一个提供外卖服务的小程序,可能需要获得电话、地址等数据,但没有必要获取性别、年龄等数据,否则平台会认为小程序收集用户数据的行为违反了“必要并且合理”的原则,会对这类小程序进行处理。

参考资料来源：百度百科-微信小程序

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。

做成效果 ：

此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。

此文件编写的组件会作为自定义的tabBar展示出来

以上就是关于微信小程序 自定义tabbar全部的内容，包括:微信小程序 自定义tabbar、小程序--tabbar导航、微信小程序自定义底部导航栏，切换不同页面显示不同tabbar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！