微信小程序下根據不一樣身份的用戶顯示不一樣的tabbar和頁面(uniapp)

介紹：

如今咱們要知足的項目需求是根據登陸用戶角色的不一樣，tabBar的數量和內容顯示不一樣，以下圖

用戶角色爲管理員時：

用戶爲普通用戶時：

注意：如下全部的設置在uView框架下的微信小程序中使用沒有問題，其餘的小程序客戶端或者框架何嘗試

1、配置tabBar

• 建立tabBar中須要展現的全部頁面，包括不一樣角色展現的不一樣的頁面
• 打開pages.json頁面配置tabBar項，全部須要在tabBar中出現的頁面這裏都須要配置，須要特別注意的是：custom必須配置未true，若是不配置，在打開小程序的時候會先加載自帶的tabBar，再加載自定義的tabBar，影響使用的效果

"tabBar": {
    "custom": true,
    "color": "#909399",
    "selectedColor": "#303133",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list":[
        {
            "pagePath": "pages/index/index",
            "iconPath": "static/uview/tabs/discount.png",
            "selectedIconPath":"static/uview/tabs/discount_selected.png",
                "text": "優惠"
            },
            {
                "pagePath": "pages/category/category",
                "iconPath": "static/uview/tabs/products.png",
                "selectedIconPath": "static/uview/tabs/products_selected.png",
                "text": "商品"
            },
            {
                "pagePath": "pages/user/user",
                "iconPath": "static/uview/tabs/user.png",
                "selectedIconPath": "static/uview/tabs/user_selected.png",
                "text": "用戶中心"
            }
        ]
    },
"usingComponents": {}

• 建立utils目錄，在目錄下新建tabBar.js文件，這個文件用於自定義tabBar屬性的文件，用來覆蓋自帶的配置

// 普通的用戶
const generalUser = [
    {
        text: "優惠",
        pagePath: "/pages/index/index",
        iconPath: "/static/uview/tabs/discount.png",
        selectedIconPath: "/static/uview/tabs/discount_selected.png"
    },
    {
        text: "商品",
        pagePath: "/pages/category/category",
        iconPath: "/static/uview/tabs/products.png",
        selectedIconPath: "/static/uview/tabs/products_selected.png"
    },
    {
        text: "個人",
        pagePath: "/pages/user/user",
        iconPath: "/static/uview/tabs/user.png",
        selectedIconPath: "/static/uview/tabs/user_selected.png"
    }
]

// 小程序管理者
const admin = [
    {
        text: "優惠",
        pagePath: "/pages/index/index",
        iconPath: "/static/uview/tabs/discount.png",
        selectedIconPath: "/static/uview/tabs/discount_selected.png"
    }
]

// 配送員
const courier = [
    {
        text: "首頁",
        pagePath: "/pages/index/index",
        iconPath: "/static/uview/tabs/discount.png",
        selectedIconPath: "/static/uview/tabs/discount_selected.png"
    },
    {
        text: "個人",
        pagePath: "/pages/user/user",
        iconPath: "/static/uview/tabs/user.png",
        selectedIconPath: "/static/uview/tabs/user_selected.png"
    }
]

export default {
    generalUser,
    admin,
    courier
}

這裏須要注意配置頁面的順序和圖片資源的路徑，這裏的順序是展現時的順序，圖片路徑static前必須加上/，不然會找不到

2、配置vuex

uniapp框架集成了vuex，能夠直接使用

• 在store目錄下建立modules文件夾，在modules文件夾下新建tabBar.js文件，該文件用於對不一樣的登錄角色作判斷，根據結果展現不一樣的tabBar和頁面。

import tabBar from "../../utils/tabBar.js"

// 判斷當前登錄用戶角色
// 0 爲管理員
// 1 爲普通用戶
// 2 爲快遞員

// 三元表達式判斷當前登錄的用戶角色
var user_type = uni.getStorageInfoSync("userType")
let type = user_type === 0 ? 'admin': user_type === 1 ? "generalUser" : "courier"

const state = {
    list: tabBar[type]
}

export default {
    namespaced: true,
    state
}

• 在store目錄下新建getters.js文件並配置

const getters = {
    tabBarList: state => state.tabBar.list,
}

export default getters

• 配置store目錄下的index.js文件

import getters from './getters.js'
import tabBar from './modules/tabBar.js'
const store = new Vuex.Store({
    modules: {
        tabBar
    },
    getters
}

• 配置main.js文件，引入stroe

import store from '@/store';
const app = new Vue({
    store
});

3、引入組件

在每一個須要展現tabBar的頁面引入uView中的tabBar組件，父傳子傳值，一些固定的值能夠不傳值直接在組件中修改

// template部分，u-tabBar放在頁面展現最後
<u-tabbar
    :list="tabBarList"
    :active-color="activeColor"
    :inactive-colot="inactiveColor"
></u-tabbar>
// js部分
<script>
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
                activeColor: "#fa3534", // 選中時的顏色
                inactiveColor: "#000"  // 未選中時的顏色
            }
        },
        computed: {
            ...mapGetters([
                'tabBarList',  // 獲取展現的tabBar列表
            ])
        }
    }
</script>

完結！

文章內容主要引自 https://chowdera.com/2021/01/...，只是在文章中修改了代碼、圖片以及少部分注意事項。