最近做的项目有个需求，在点击tabbar的“我的”模块时候，要获取到用户的基本信息，比如用户头像。

按照小程序获取用户信息的方式为:

<button type="getUserInof">按钮</button>

但是，在这里，没有途径点击这个按钮。

所以想到自定义tabbar.

一、在文件根目录新建一个template的文件夹，里面新建对应的template的文件。

文件目录如下图：

1. template.wxml部分：

   <!--pages/template/template.wxml-->
   <template name="tabBar">
   	<view class="tabBar">
   		<block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
   			<view class="tabBar-item">
   				<navigator open-type="reLaunch" url="{{item.pagePath}}" wx:if="{{item.text!='我的'}}">
   					<view>
   						<image class="icon" src='{{item.iconPath}}'></image>
   					</view>
   					<view class="{{item.current== 1? 'tabBartext' :''}}">{{item.text}}</view>
   				</navigator>
   				<button open-type="getUserInfo" class="btn_user" bindgetuserinfo="getUserInfo" data-url="{{item.pagePath}}" wx:else>
   					<view>
   						<image class="icon" src='{{item.iconPath}}'></image>
   					</view>
   					<view class="{{item.current== 1? 'tabBartext' :''}}">{{item.text}}</view>
   				</button>
   			</view>
   		</block>
   	</view>
   </template>

2. template.wxss部分：

   /* pages/template/template.wxss */
   .icon{
     width:54rpx;
     height: 54rpx;
     display: block;
     margin:0 auto;
   }
   .tabBar{
     width:100%;
     position: fixed;
     bottom:0;
     padding:10rpx;
     margin-left:-4rpx;
     background:#fff;
     font-size:24rpx;
     color:#333333;
     height: 80rpx;
     z-index: 9999;
   }
   
    .tabBar-item{
     float:left;
     width:20%;
     text-align: center;
     overflow: hidden;
     font-size: 26rpx;
   }
   /*当前字体颜色*/
   .tabBartext{
     color:#CD1811;
   }
   .btn_user{
     background: transparent;
     border: none;
     padding: 0;
     margin: 0;
     line-height: normal;
     position: static;
     font-size: 26rpx;
   }
   button::after{
     width: 0;
     height: 0;
   }

    

3. template.js部分：

   function tabbarinit() {
     return [
       {
         "current": 0,
         "pagePath": "/pages/index/index",
         "text":"首页",
         "iconPath":"/img/tab_indexs.png",
         "selectedIconPath":"/img/tab_index.png"
       },
       {
         "current": 0,
         "pagePath": "/pages/museum/museum",
         "text":"博物馆",
         "iconPath":"/img/tab_museums.png",
         "selectedIconPath":"/img/tab_museum.png"
       },
       {
         "current": 0,
         "pagePath":"/pages/mission/mission",
         "text":"小任务",
         "iconPath":"/img/tab_missions.png",
         "selectedIconPath":"/img/tab_mission.png"
   
       },
       {
         "current": 0,
         "pagePath":"/pages/resources/resources",
         "text":"好资源",
         "iconPath":"/img/tab_resources.png",
         "selectedIconPath":"/img/tab_resource.png"
       },
       {
         "current": 0,
         "pagePath":"/pages/mine/mines",
         "text":"我的",
         "iconPath":"/img/tab_mines.png",
         "selectedIconPath":"/img/tab_mine.png"
       }
     ]
   
   }
   //tabbar 主入口
   function tabbarmain(bindName = "tabdata", id, target) {
     console.log(id,'if')
     var that = target;
     var bindData = {};
     var otabbar = tabbarinit();
     otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
     otabbar[id]['current'] = 1;
     bindData[bindName] = otabbar
     that.setData({ bindData });
   }
   
   module.exports = {
     tabbar: tabbarmain
   }

   二、在app.wxss引入tabbar的样式：

@import "/template/template.wxss";

三、在需要的页面引入文件：

先在js里面引入emplate.js;然后在onload里面定义template

var template = require('../../template/template.js');
Page({
  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar,根据不同的页面修改序号
   
  },
})

然后在wxml里面引入组件，放在所有代码最前边即可。

<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
<view class="content">
***
</view>

这样就完成了自定义tabbar啦。