背景：公司另一个小程序想把我们的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，此时无法隐藏
}
}
