微信小程序下根据不同身份的用户显示不同的tabbar和页面(uniapp)

介绍：

现在我们要满足的项目需求是根据登录用户角色的不同，tabBar的数量和内容显示不同，如下图

用户角色为管理员时：

用户为普通用户时：

注意：以下所有的设置在uView框架下的微信小程序中使用没有问题，其他的小程序客户端或者框架未尝试

一、配置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前必须加上/，否则会找不到

二、配置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
});

三、引入组件

在每个需要展示tabBar的页面引入uView中的tabBar组件，父传子传值，一些固定的值可以不传值直接在组件中修改

// template部分，u-tabBar放在页面展示最后

// js部分

完结！

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