微信开发者工具实现自定义tabbar组件跳转回官方tabbar首页。

我最近有个需求，要在微信小程序的所有界面都显示“首页”、“消息”和“联系我们”。这要求每页都可跳转回“首页”。我在CSDN拜读了以下文章，最终实现了此功能。现整理如下：

⑬微信小程序--》tabBar底部栏-CSDN博客

微信开发者工具 原生微信 ts 使用自定义tabbar_微信开发者工具 顶部标签栏-CSDN博客

微信小程序开发系列（三十一）·页面跳转API（wx.navigateTo、wx. redirectTo、wx.switchTab、wx.reLaunch、wx.naviga）以及如何进行参数传递-CSDN博客

1. app.json文件中，要按官方要求，加list。不要加这行代码“custom”:true,

1. 在app.json文件中，加"components/customtabbar/index",创建自己的自定义组件。文件结构如图。

1. Index.json

{

  "component": true

}

1. Index.wxml

<view class="tab-bar">

  <view class="tab-bar-border"></view>

  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">

    <image class="tab-bar-item-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>

    <view class="tab-bar-item-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>

  </view>

</view>

1. Index.wxss

.tab-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 48px;

  background: white;

  display: flex;

  padding-bottom: env(safe-area-inset-bottom);

}

.tab-bar-border {

  background-color: rgba(0, 0, 0, 0.33);

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 1px;

  transform: scaleY(0.5);

}

.tab-bar-item {

  flex: 1;

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}

.tab-bar-item-image {

  width: 27px;

  height: 27px;

}

.tab-bar-item-view {

  font-size: 10px;

}

1.  Index.js. triggerEvent向上层页面传输事件。

// components/customtabbar/index.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    selected: 0,

    color: "#7A7E83",

    selectedColor: "#3cc51f",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "c首页",

        "iconPath": "/images/icon_API.png",

        "selectedIconPath": "/images/icon_API_HL.png"

      },

      {

        "pagePath": "pages/message/message",

        "text": "c消息",

        "iconPath": "/images/icon_API.png",

        "selectedIconPath": "/images/icon_API_HL.png"

      },

      {

        "pagePath": "pages/contact/contact",

        "text": "c联系我们",

        "iconPath": "/images/icon_API.png",

        "selectedIconPath": "/images/icon_API_HL.png"

      }

    ]

  },

  switchTab: function (e) {

    const data = e.currentTarget.dataset

    const url = '/'+data.path

    console.log("customtabbar switchTab"+url)

    this.triggerEvent('navigatetonewpage', { url: url }); 

    //在组件中，无法用switchTab跳转到tabbar list中的页面。

    //wx.switchTab({ url: url })

    this.setData({

      selected: data.index

    })

  },

  

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

})

Testnav是我的应用功能。

Testnav.json引用自定义组件customtabbar

{

  "usingComponents": {

    "footer-button": "../../components/footerbuton/footerbutton",

    "customtabbar":"../../components/customtabbar/index"

  }

}

Testnav.wxml监听customtabbar的navigatetonewpage事件。事件一定要小写。

<!--pages/testnav/testnav.wxml-->

<view>  

  <navigator url="../testtar/testtar?userId=123&type=admin">跳转到目标页面</navigator>  

  <navigator url="/pages/droplist/droplist">跳转到home页面</navigator>

</view>

<view class="container">  

  <view bind:tap="handleClick">bindnavigatetonewpage</view>

  <!-- 页面内容    --> 

  <footer-button bindnavigatetonewpage="onMyComponentTap"/>  

  <customtabbar bindnavigatetonewpage="onMyComponentTap"/>

</view>

Testnav.js写事件onMyComponentTap。要用wx.switchTab跳转到app.json的list中的页面。

// pages/testnav/testnav.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

  },

  // 监听自定义事件  

  onMyComponentTap: function(e) {  

    // 从事件的数据中获取目标页面路径  

    console.log('onMyComponentTap')

    const url = e.detail.url; 

    

    console.log('url:'+url) 

    // 执行页面跳转  

/*     wx.navigateTo({  

      url: url  

    });   */

    wx.switchTab({

      url: url

    });

  },

})

经过以上步骤后，就能在自定义tabbar和官方tabbar之间切换。效果如下：

这是自定义页面中自定义的tabbar。点击自定义tabbar中 “首页”可跳转回真正的微信小程序“首页”。

下图是真正的首页。完工。