uni项目踩坑 判断进入的域名链接 动态显示tabbar

项目需求：

1.两个不同域名进入到该项目中，通过不同的域名进行判断动态的展示tabbar菜单（菜单上有的点击跳转是外部链接，有的是本项目的页面）
2.如果是一个固定域名进入的 显示第二个菜单选中，如果不是的话不显示选中状态

难点：

1.uni下的pages.json中的tabbar的list数组只有一个，且不能写成动态的
2.怎么获取到来的时候的url链接（点击跳转的是统一链接，不能通过href或者host来获取）

3.菜单点击还要进入相应的链接和页面（动态的)

 

思路：

1.在页面入口文件进行document.referrer判断 分割取到域名（还可以通过和后端沟通跳转携带参数来判断），设置全局变量

2.把pages.json中的tabbar的list设置为空，不适用系统自带的tabbar

3.新建一个vue文件，设置为全局组件，在需要显示菜单的页面中进行引入显示，定义好props为了显示选中哪个，里面循环的数组设置为变量，通过上面的全局变量进行动态显示，使用uni.navigateTo进行跳转

<template>
    <view class="tab-bar">
        <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
            <image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
</template>



<script>
    export default {
        props: {
            selected: { // 当前选中的tab index
                type: Number,
                default: 0
            },
            userIdentity: { // 当前角色
                type: Number,
                default: 0
            }

        },
        data() {
            return {
                color: "#666666",
                selectedColor: "#666666",
                list: []
            }
        },
        created() {
            var _this = this
                _this.list = [
                    {
                        "pagePath": "/pages/enterMYUrl/shangcheng/index",
                        "iconPath": "/static/enterMYUrl/home.png",
                        "selectedIconPath": "/static/enterMYUrl/home_select.png",
                        "text": "商城首页"
                    },
                    {
                        "pagePath": "/pages/enterMYUrl/yunyaofang/index",
                        "iconPath": "/static/enterMYUrl/pharmacy.png",
                        "selectedIconPath": "/static/enterMYUrl/pharmacy_click.png",
                        "text": "云药房"
                    },
                    {
                        "pagePath": "/pages/enterMYUrl/gouwuche/index",
                        "iconPath": "/static/enterMYUrl/cart.png",
                        "selectedIconPath": "/static/enterMYUrl/cart_click.png",
                        "text": "购物车"
                    },
                    {
                        "pagePath": "/pages/enterMYUrl/home/index",
                        "iconPath": "/static/enterMYUrl/my.png",
                        "selectedIconPath": "/static/enterMYUrl/my_click.png",
                        "text": "个人中心"
                    }
                ]
            } else {
                _this.list = [{
                        "pagePath": "/pages/enterUrl/home/index",
                        "iconPath": "/static/enterMYUrl/home.png",
                        "selectedIconPath": "/static/enterMYUrl/home_select.png",
                        "text": "中基云医"
                    },
                    {
                        "pagePath": "/pages/home/index/index",
                        "iconPath": "/static/enterMYUrl/pro.png",
                        "selectedIconPath": "/static/enterMYUrl/pro_click.png",
                        "text": "专家问诊"
                    },
                    {
                        "pagePath": "/pages/patientvisit/index",
                        "iconPath": "/static/enterMYUrl/wenzhen.png",
                        "selectedIconPath": "/static/enterMYUrl/wenzhen_click.png",
                        "text": "我的问诊"
                    },
                    {
                        "pagePath": "/pages/enterUrl/shop/index",
                        "iconPath": "/static/enterMYUrl/shop.png",
                        "selectedIconPath": "/static/enterMYUrl/shop_click.png",
                        "text": "健康商城"
                    },
                    {
                        "pagePath": "/pages/enterUrl/my/index",
                        "iconPath": "/static/enterMYUrl/my.png",
                        "selectedIconPath": "/static/enterMYUrl/my_click.png",
                        "text": "个人中心"
                    }
                ]
            }
        },
        methods: {
            switchTab(item, index) {
                let url = item.pagePath;
                // uni.switchTab({
                //     url: url
                // })
                if (this.$URL_TYPE == "zhongji") {
                    uni.navigateTo({
                        url: url
                    })
                } else {
                    uni.navigateTo({
                        url: url
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

        .tab-bar-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .tab_img {
                width: 37rpx;
                height: 41rpx;
            }

            .tab_text {
                font-size: 20rpx;
                margin-top: 9rpx;
            }
        }
    }
</style>

注：里面的图片路径要写成绝对路径，不然打包的时候如果是在该项目下的页面会出现层级问题，显示不出来图片

4.可有可无：<tab-bar :selected="isShow"></tab-bar>
isShow为变量，通过判断是哪个域名下的 然后不传或者传一个假值给bar.vue组件，就可以不显示菜单了。