uni-app h5端标题解决方法

最近公司的新项目要求同时能发布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的时候就会自动修改页面的标题了。

对您有帮助的话给我点个赞哦~