Vue&uni-app在微信瀏覽器隱藏titleNView的一個方法

做 H5 經常會遇到很多需求，比如在微信/釘釘瀏覽器打開的時候會顯示兩個 head 或者 title 頭。

這是就有人看這兩個 title 不順眼，強烈建議要把它干掉。

但是並不是所有的頁面的 head 都是一樣的，uni-APP 雖然有一個“條件編譯”功能，可以區分不同平台，顯示不同的內容。

不過條件編譯只能去別 H5 APP 和 各個平台的小程序，並沒有對微信做獨立的兼容。

於是我就干脆直接用 JS 判斷，微信瀏覽器直接隱藏 head 的標簽得了：

我是在 app.vue 添加如下代碼：

isWeChat: function () {
  let ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    let head = document.getElementsByTagName('uni-page-head');
    head.style.cssText = "display:none;"
  }
},

在合適的位置調用一下：

this.isWeChat();

但是發現一個問題，首次進入頁面沒有問題，再進行頁面跳轉就會失效，應該是頁面跳轉並沒有走 App.vue 。

換個方法，在頁面中插入 style ：

isWeChat: function () {
  let ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {//判斷微信
    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML="uni-page-head,.uni-page-head{display:none;}";
    document.getElementsByTagName('head').item(0).appendChild(style);
  }
},

這樣刷新頁面也可以隱藏頭部了。

文章非原創，轉載於 https://www.w3h5.com/post/545.html ，寫下來只是方便自己查詢與記錄。