微信小程序 — 自定义Tabbar

1.app.json

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首 页"
      },
      ...//此处省略其他tabbar页面
    ]
}

重点 “custom”: true,其他按原生tabbar正常配置，每个tab页都要写不然无法跳转

2、app.json 文件夹新建目录

自定义tabbar
tabbar具体写法参考微信官方文档

3、每个Tabbar页面的js文件都要写

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
          selected: 2
        })
      }
    }
  },
  methods: {
    onGotUserInfo: function (e) {
      console.log("nickname=" + e.detail.userInfo.nickName);
    }
  }
})

不写 —— 第一次点击页面跳转后没有点击态（点击3高亮的是0）；页面的方法写在 Component（methods:{ }）中，不能写在Page({ })中，不然找不到方法。

点击Tabbar 获取授权

在tabbar组件中添加button，不能使用for循环，不然每个tab都会弹出授权提示。

 <button open-type='getUserInfo' bindgetuserinfo="onGotUserInfo">
      <cover-image src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected == index ? selectedColor : color}}">{{item.text}}</cover-view>
 </button>

tabbar 组件能直接使用tabbar页面的类

即：home页面所写类会影响tabbar显示，类的命名要注意。