最近公司的新项目要求同时能发布APP端和h5端，最好还能把小程序一起搞定，然后就想到uni-app这个神奇的框架，可以同时开发APP，微信小程序，支付宝小程序，H5等等平台。简直太帅了，但是使用下来发现还是有些问题的。
H5端双标题栏
由于APP端和小程序端都有原生的标题栏可以使用，H5端页面没提供一个可以隐藏标题的方法，在移动端访问的时候会出现双标题，一个是微信浏览器的标题，加上运行到H5项目模拟的标题栏，如图：
翻阅文档很久也没有发现有相关的配置，可以直接在发布到H5端时不渲染这个标题栏。然后观察到最后这个标题栏在发布时会渲染成一个<uni-page-head>元素，在全局的css中如下设置
uni-page-head {
display: none;
}
标题栏去掉之后的效果：
但是去掉标题栏后会导致页面主体部分，H5中渲染为<uni-page-wrapper>的标签高度计算错误,可以加上下面的代码重新计算高度(好像高度不对并不会影响显示效果，哈哈哈)
uni-page-wrapper {
height: calc(100% - 50px - env(safe-area-inset-bottom)) !important;
}
//50px为底部导航栏的高度
H5端标题自动修改
解决了标题栏的显示问题,还有个令人头疼的问题就是pages.json中给每个页面设置的标题，在页面切换的时候其实改得是模拟的标题栏，我们把模拟的标题栏隐藏以后，标题就不会变化了，所以我们用到document.title来修改页面的标题。
已知两种修改标题的情况，一种是固定标题，还有一种是动态标题，比如***商品详情。
封装了一个修改标题的方法，在项目的main.js中对Vue的mixin中添加一个onShow
Vue.mixin({
onShow() {
let { title } = this //在固定标题的页面data中设置title
if (this.$mp.query) { //整个app的onShow也会触发，这时$mp中没有query属性
let setTitle = this.$mp.query.title || title //在进入页面的query中没有title属性时会取data中的title
if (setTitle) {
uni.setNavigationBarTitle({ //uni-app 的修改title接口
title: setTitle
})
//以下为H5平台差异写法
// #ifdef H5
document.title = setTitle
// #endif
}
}
}
})
这样每个页面在onShow的时候就会自动修改页面的标题了。
对您有帮助的话给我点个赞哦~
