微信小程序-根据角色显示不同tabar（示例）

注意：这里结合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
}

------------------------------------------------------------------------------------------------     分割线     --------------------------------------------------------------------------------------------------------

那几个跳转的组件页面要加上

扫描二维码关注公众号，回复： 8773491 查看本文章

去其中一个附上：xxx.wxml

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

xxx.js

Component({

  /**
   * 组件的属性列表
   */
  options:{
    addGlobalClass: true,
  }
})

xxx.json

{
  "component": true
}

xxx.wxss 空的

OK，看看我的效果吧：