vue项目H5页面,如何判断是在微信端打开还是在浏览器打开?

1,533 阅读1分钟

我的项目是在app.vue文件的created下进行判断(根据个人需求来写)

1.定义browser,通过以下方法可以判断很多浏览器。包括判断IE浏览器,Opera浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等。

image.png

2.以下代码,注释中表明了通过JS如何判断是否在微信浏览器打开,或是否在QQ空间浏览器、是否在新浪微博打开等。在微信端打开,就重定向处理。

image.png

3.附上代码

 created() {
    // 微信授权;
    let code = this.getQueryString('code');
    if (code) {
      // 微信授权
      this.getWXShowQuan(code);
    } else {
      var browser = {
        versions: (function () {
          var u = navigator.userAgent;
          return {
            //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase(),
      };
      //当前链接地址
      let search = window.location.search,
        origin = window.location.origin;
      let redirect_uri = encodeURIComponent(`${origin}${search}`);
      //判断打开的终端
      if (browser.versions.mobile) {
        var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          //在微信中打开
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxxxxxxxxxafd&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        }
        if (ua.match(/WeiBo/i) == 'weibo') {
          //在新浪微博客户端打开
        }
        if (ua.match(/QQ/i) == 'qq') {
          //在QQ空间打开
        }
        if (browser.versions.ios) {
          //是否在IOS浏览器打开
          //   alert('ios');
        }
        if (browser.versions.android) {
          //是否在安卓浏览器打开
          //   alert('Android');
        }
      } else {
        alert('pc');
        //否则就是PC浏览器打开
      }

      return;
    }
  },

getQueryString写在method里的方法,获取链接地址的某个值。

    getQueryString(n) {
      let r,
        reg = new RegExp('(^|&)' + n + '=([^&]*)(&|$)');
      r = window.location.search.substring(1).match(reg);
      return r ? decodeURI(r[2]) : null;
    },