微信小程序自定義tabbar並獲取用戶信息

最近做的項目有個需求，在點擊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啦。