uni-app在微信浏览器隐藏头部的一个方法

做 H5 经常会遇到很多需求，比如在微信/钉钉浏览器打开的时候会显示两个 head 或者 title 头。

这是就有人看这两个 title 不顺眼，强烈建议要把它干掉。

但是并不是所有的页面的 head 都是一样的，uni-APP 虽然有一个“条件编译”功能，可以区分不同平台，显示不同的内容。

不过条件编译只能去别 H5 APP 和 各个平台的小程序，并没有对微信做独立的兼容。

于是我就干脆直接用 JS 判断，微信浏览器直接隐藏 head 的标签得了：

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

// #ifdef H5
            if (platform === 'WX') {
                setTimeout(() => {
                    let navTitleDom = document.getElementsByTagName('uni-page-head')
                    if (navTitleDom.length) {
                        navTitleDom[0].style.display = 'none'
                    }
                })
            }
            // #endif

但是发现一个问题，首次进入页面没有问题，再进行页面跳转就会失效，应该是页面跳转并没有走 App.vue 。

换个方法，在页面中插入 style ：

// #ifdef H5
            if (platform === 'WX') {
                setTimeout(() => {
                    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);
                })
            }
            // #endif

这样完美解决~

参考来源