uni-app h5端标题解决方法

最近公司的新项目要求同时能发布APP端和h5端，最好还能把小程序一起搞定，然后就想到uni-app这个神奇的框架，可以同时开发APP，微信小程序，支付宝小程序，H5等等平台。简直太帅了，但是使用下来发现还是有些问题的。

H5端双标题栏

由于APP端和小程序端都有原生的标题栏可以使用，H5端页面没提供一个可以隐藏标题的方法，在移动端访问的时候会出现双标题，一个是微信浏览器的标题，加上运行到H5项目模拟的标题栏，如图：

微信图片_20190704180742.png

翻阅文档很久也没有发现有相关的配置，可以直接在发布到H5端时不渲染这个标题栏。然后观察到最后这个标题栏在发布时会渲染成一个<uni-page-head>元素，在全局的css中如下设置

1
2
3

uni-page-head {
  display: none;
}

标题栏去掉之后的效果：

微信图片_20190704181508.png

但是去掉标题栏后会导致页面主体部分，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
      }
    }
  }
})