H5在微信浏览器打开的时候会显示两个 head 或者 title 头。
这两个 title 看着很不顺眼,随时都想要把它干掉。
但是并不是所有的页面的 head 都是一样的,uni-APP 虽然有一个“条件编译”功能,可以区分不同平台,显示不同的内容。
不过条件编译只能区别 H5 APP 和 各个平台的小程序,并没有对微信做独立的兼容。
于是我就干脆直接用 JS 判断,微信浏览器直接隐藏 head 的标签得了:

先贴出我的app.vue 的代码:

<script>
import contact from '@/utils/contact.js'

// #ifdef H5
// 微信快速登录
import {loginWxClient} from '@/utils/login_wx_client.js'
import getClientInfo  from '@/utils/client.js'
// #endif

export default {
    globalData: {
        
    },
    onLaunch: function() {
        
        // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
         // 小程序第三方平台自定义数据
          let extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {}
          let siteId = extConfig.siteid
          let secret = extConfig.secret
          uni.setStorageSync('siteId',siteId)
          uni.setStorageSync('secret',secret)
        // #endif
        
        // #ifdef H5
        // 微信快速登录
        loginWxClient(this);
        //获取client_id,client_secret_key
        getClientInfo();
        //调用判断微信浏览器
        this.isWeChat();
        // #endif
        
        this.$getApp();
        
        // 电话客服
        contact();
        
        let userInfo = uni.getStorageSync('userInfo');
        if(userInfo){
            this.$store.commit('login', userInfo)
        }
    },
    onShow: function() {
    
    },
    onHide: function() {
        
    },
    
    methods: {
        
        // #ifdef H5
    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);
          }
        },
        // #endif
    }
}

</script>

方法.png

调用.png

最后修改:2020 年 12 月 30 日 12 : 49 PM