乐趣区

关于vue.js:微信小程序下根据不同身份的用户显示不同的tabbar和页面uniapp

jiezi

介绍：

当初咱们要满足的我的项目需要是依据登录用户角色的不同，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 放在页面展现最初
<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/…，只是在文章中批改了代码、图片以及少部分注意事项。

退出移动版