在uniapp开发中遇到代码转成h5的需求,在微信公众号中不需要设置的导航栏,在其他h5中保留导航栏。自己想处理方式如下(有用,就是需要在每个页面单独判断)
首先需要判断是否是微信浏览器
is_weixin(){
let ua = navigator.userAgent.toLowerCase();
return ua.indexOf('micromessenger') != -1;
}
第二在app.vue中的方法中写函数,获取转化成h5导航栏标签uni-page-head 给设置成display:none
methods:{
navTitle(){
let navTitle = document.getElementsByTagName('uni-page-head');
navTitle[0].style.display = 'none'
}
}
在需要隐藏导航栏的页面onload中加上判断是否是微信浏览器
onLoad: function(options) {
if(this.is_weixin()){
app.navTitle()
}
}
//app 是自己获取app.vue中的方法 const app = getApp()
这就能解决在微信h5中删除掉导航栏在wap端h5保留导航栏。
//当然也可以在pages.json文件中设置 直接去掉导航栏,但是不能兼容,去掉就两个都去掉了
{
"path": "pages/category/category",
"style": {
"navigationBarTitleText": "分类",
//只是一种
"navigationStyle":"custom",
//第二种
"app-plus":{
"titleNView": false //false 为不展示导航栏
}
}
}