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);
  }
},

这样刷新页面也可以隐藏头部了。

推荐阅读:

WebStorm怎么设置实现自动编译less文件

Vue.js学习笔记——条件、循环、双向绑定

联通沃云服务器拒绝连接请求如何开放端口

各大网站CSS初始化代码集合

ColorZilla Chrome浏览器网页取色插件(不定时更新)

赞 (4)
分享到: +

评论 板凳

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    Deshun
    可以
    Deshun 4年前 (2020-09-02)回复 取消评论