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的時候就會自動修改頁面的標題了。

對您有幫助的話給我點個贊哦~