基于uniapp开发的H5实现动态隐藏导航栏

背景：公司另一个小程序想把我们的H5嵌入到他们小程序中，要隐藏掉导航栏，用他们的导航，我们自己的H5还是要保留导航栏的。

实现

1、增加一个中间页用于处理路由和登录，在onLoad中拿到路由和参数

      //登录也需要处理，这里没有展示
        onLoad(params) {
            console.log(JSON.stringify(params))
            if (params.hideNavBar && params.hideNavBar == '1'){
                //拿到hideNavBar == 1就本地缓存下来
                setNavBarStatus("1")
            }
            //此处应登录后跳转到对应页面
            uni.redirectTo({
                url: "/" + params.redirectUrl
            })
        },

2、在APP.vue的mounted()方法中调用隐藏方法，监听路由跳转时再一次执行隐藏方法

        mounted() {
            this.hideNavBar()
        },
        watch:{
            $route(to, from){
                this.hideNavBar()
            },
        },
        methods:{
            hideNavBar(){
                //判断是H5且调用方要求隐藏导航 getNavBarStatus() == '1'
                /*#ifdef H5*/
                if (getNavBarStatus() == '1'){
                    this.$nextTick(() => {
                        let head = document.getElementsByTagName('uni-page-head')
                        console.log(JSON.stringify(head), "head")
                        if (head[0]){
                            head[0].style.display = 'none'
                        }
                    })
                }
                /*#endif*/
            }
        }

3、注意页面的page.json中的页面不能配置自定义导航栏

如下

{
            "path" : "pages/****/****",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"//不可以配置custom，此时无法隐藏
            }
            
        }