微信小程序-根據角色顯示不同tabBar（示例）

注意：這里結合ColorUI(最近研究這個)加菜單模板的方式，可能還有更簡潔的方式，這里只是一種解決方案，歡迎討論     -------- 轉載請標注

一. 業務邏輯：有時使用場景會有不同角色登錄同一小程序，需要根據不同角色顯示不同菜單

二. 實現：

　　1> app.json (只需配置起始頁面index)

 "pages": [
    "pages/sys/index/index",
    ...]

　　2> index.wxml

<datas wx:if="{{PageCur=='datas'}}"></datas>
<maintenance wx:if="{{PageCur=='maintenance'}}"></maintenance>
<monitor wx:if="{{PageCur=='monitor'}}"></monitor>
<mine wx:if="{{PageCur=='mine'}}"></mine>
<!-- tabar菜單 -->
<template is="tabBar" data="{{menus}}"  />

　　3> index.js

// pages/_index/_index.js
var menus  = require('../../../datas/js/menus');

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    /* 聲明權限數據 */
    roleId: "",
    /* 聲明跳轉Target */
    PageCur: "datas",
    /* 聲明菜單數據 */
    menus: {}
  },

  /* ColorUI頁面跳轉方式 */
  NavChange(e) {
    var cur = e.currentTarget.dataset.cur;
    if(cur){
      this.setData({
        PageCur: cur,
        "menus.activeUrl": cur
      })
    }
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    /* 
      獲取角色信息
      ...
    */
    options.roleId = 2;
    /* roleId 1:站長；2:管理員 */
    if(options.roleId == 1){
      this.setData({
        roleId: options.roleId,
        menus: menus.agentMenuData
      })
    } else{
      this.setData({
        roleId: options.roleId,
        menus: menus.masterMenuData
      })
    }
  }
})

　　4> index.json（Color將一級頁面都作為組件）

{
  "navigationBarTitleText": "首頁",
  "usingComponents": {
    "datas": "/pages/biz/datas/home/home",
    "maintenance": "/pages/biz/maintenance/home/home",
    "monitor": "/pages/biz/monitor/home/home",
    "mine": "/pages/biz/mine/home/home"
  }
}

　　5> 我的菜單模板tabar-template.xml

<!-- 普通菜單模板 -->
<template name="tabBar">
  <view class="cu-bar tabbar bg-black shadow foot"  >
    <view class="action" bindtap="NavChange" data-cur="{{item.currentUrl}}" wx:for="{{menus.list}}" wx:key="currentUrl">
      <view class='cuIcon-cu-image'>
        <image src="{{menus.activeUrl==item.currentUrl?item.checkedImgUrl:item.unCheckImgUrl}}"></image>
      </view>
      <view class="{{menus.activeUrl==item.currentUrl?'text-green':'text-gray'}}">{{item.title}}</view>
    </view>
  </view>
</template>

<!-- 自定義菜單模板 -->
<template name="tabBar">
  <view class="cu-bar tabbar bg-black shadow foot"  >
    <view class="action" bindtap="NavChange" data-cur="{{item.currentUrl}}" wx:for="{{menus.list}}" wx:key="currentUrl">
      <view wx:if="{{item.btnType==0}}">
        <view class='cuIcon-cu-image'>
          <image src="{{menus.activeUrl==item.currentUrl?item.checkedImgUrl:item.unCheckImgUrl}}"></image>
        </view>
        <view class="{{menus.activeUrl==item.currentUrl?'text-green':'text-gray'}}">{{item.title}}</view>
      </view>
       <view wx:else="{{item.btnType==0}}">
        <view class="action text-{{item.btnTitleTextColor==''?'gray':item.btnTitleTextColor}} add-action" bindtap="{{item.bindTap}}">
          <button class="cu-btn cuIcon-add text-{{item.btnImgTextColor=='white'?'':item.btnImgTextColor}} bg-{{item.btnBgColor==''?'black':item.btnBgColor}}}  shadow"></button> 
          <view>{{item.title}}</view>
        </view>
       </view>
    </view>
  </view>
</template>

　　6> 菜單數據 menus.js

/* 背景顏色一覽：
red:嫣紅  orange:桔橙 yellow:明黃 olive:橄欖  green:森綠；
cyan:天青  blue:海藍  purple:奼紫  mauve:木槿 pink:桃粉；
brown:棕褐 grey:玄灰  gray:草灰  black:墨黑 white:雅白 */

var agentMenus = {
  activeUrl: 'datas',
  list:[{
    currentUrl:"datas",
    unCheckImgUrl:"/assets/images/tabbar/basics.png",
    checkedImgUrl:"/assets/images/tabbar/basics_cur.png",
    btnType: 0,
    title:"數據"
  },{
    currentUrl:"maintenance",
    unCheckImgUrl:"/assets/images/tabbar/component.png",
    checkedImgUrl:"/assets/images/tabbar/component_cur.png",
    btnType: 0,
    title:"維護"
  },{
    bindTap: "_scanCode",
    btnTitleTextColor: "",
    btnImgTextColor: "",
    btnBgColor: "green",
    btnType: 1,
    title:"掃碼"
  },{
    currentUrl:"monitor",
    unCheckImgUrl:"/assets/images/tabbar/plugin.png",
    checkedImgUrl:"/assets/images/tabbar/plugin_cur.png",
    btnType: 0,
    title:"監控"
  },{
    currentUrl:"mine",
    unCheckImgUrl:"/assets/images/tabbar/about.png",
    checkedImgUrl:"/assets/images/tabbar/about_cur.png",
    btnType: 0,
    title:"我的"
  }]
}

var masterMenus = {
  activeUrl: 'datas',
  list:[{
    currentUrl:"datas",
    unCheckImgUrl:"/assets/images/tabbar/basics.png",
    checkedImgUrl:"/assets/images/tabbar/basics_cur.png",
    btnType: 0,
    title:"數據"
  },{
    currentUrl:"mine",
    unCheckImgUrl:"/assets/images/tabbar/about.png",
    checkedImgUrl:"/assets/images/tabbar/about_cur.png",
    btnType: 0,
    title:"我的"
  }]
}

module.exports = {
  agentMenuData: agentMenus,
  masterMenuData: masterMenus
}

------------------------------------------------------------------------------------------------     分割線     --------------------------------------------------------------------------------------------------------

那幾個跳轉的組件頁面要加上

去其中一個附上：xxx.wxml

<text>----->我的頁面</text>

xxx.js

Component({

  /**
   * 組件的屬性列表
   */
  options:{
    addGlobalClass: true,
  }
})

xxx.json

{
  "component": true
}

xxx.wxss 空的

OK，看看我的效果吧：

源碼：

　　鏈接：https://pan.baidu.com/s/1HHwZnk0J7cosi4_v_94ZjQ 
　　提取碼：xsr8