[移动开发]js判断移动端浏览器类型，微信浏览器、支付宝小程序、微信小程序等

起因

现在市场上各种跨平台开发方案百家争鸣各有千秋，个人认为最成熟的还是hybird方案，简单的说就是写H5各种嵌入，当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线。

所谓的hybird方案很多时候单独指h5嵌入app页面，本专辑讲的却比这个要广泛很多，作者想写一个基础框架嵌入所有移动端app，包括app壳子、微信公众号、微信小程序、支付宝页面、支付宝小程序等，而且是一套代码可以同时嵌入各种app，这样最大程度上节约开发成本，当然我们的框架也会注意到开发质量，如前面文章提到的移动端页面切换动画也是为了提升用户体验。

大hybird方案必须要处理的是判断当前程序运行在什么环境中，故有此篇判断浏览器类型的合集。

微信浏览器

微信公众号或微信内直接打开链接

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
  // 在微信中打开
}

微信小程序

// html 引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// js中如下判断
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
  wx.miniProgram.getEnv((res)=>{
    if (res.miniprogram) {
      // 在微信小程序中打开
    }
  })
}

支付浏览器

支付宝浏览器中

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
  // 在支付宝中打开
}

支付宝小程序中

// html 引入
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// js中如下判断
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
  my.getEnv((res)=>{
    if (res.miniprogram) {
      // 在支付宝小程序中打开
    }
  })
}

app壳子

在app壳子中往往使用往ua里面添加唯一标识符来做标识。

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/myapp/i)=="myapp") {
  // 在自家app壳子里面
}

其他的没有标识的app，最后的倔强

可以使用路径上新增参数的方式去识别，当识别到参数就在session保存起来，这样作用周期就是某一次打开，防止了数据污染。

完整版js

我习惯命名browser-env.js

// 自家app壳子的ua标识
const SELF_APP_UA_KEY = 'myapp'

const browserEnv = {
  enum: {
    BROWSER: 0,         // 浏览器访问，

    SELFAPP: 10,        // 自己家app

    WX: 20,             // 微信浏览器
    WX_MINIPROGRAM: 21, // 微信小程序

    ALI: 30,            // 支付宝浏览器
    ALI_MINIPROGRAM: 31,// 支付宝小程序

    // ... 更多扩展
  },
  webType: 0,
  initWebType: function (type) {
    // 设置值，并且让其不可改变，防止开发随意篡改。
    Object.defineProperty( this, "webType", {
      value: type,
      writable: false,
      configurable: false
    });
  },
  // 识别浏览器类型
  identifyBrowser() {
    // ua和枚举的浅层映射放这里，ua能匹配的都这么处理
    let codeKey = {
      'micromessenger': this.enum.WX,
      'alipay': this.enum.ALI
    }
    // 添加自家app映射
    codeKey[SELF_APP_UA_KEY] = this.enum.SELFAPP;

    // 获取ua
    let ua = navigator.userAgent.toLowerCase();
    let type = this.enum.BROWSER
    for (let key in codeKey) {
      let mk = `/${key}/i`;
      if (ua.match(mk) == key) {
        type = codeKey[key]
      }
    }

    // ua 匹配不出来的，继续匹配  // 延迟引入JSSDK往后处理，不讲究可以直接写入html
    if (type == this.enum.WX) {
      wx.miniProgram.getEnv((res)=>{
        if (res.miniprogram) {
          type = this.enum.WX_MINIPROGRAM
        }
      })
    } else if (type ==  this.enum.ALI) {
      my.getEnv((res)=>{
        if (res.miniprogram) {
          type = this.enum.ALI_MINIPROGRAM
        }
      })
    }

    this.initWebType(type)
  },
  install(Vue) {
    this.identifyBrowser()

    Vue.config.globalProperties.$browserEnv = browserEnv;
  },
}

export default browserEnv;

老规矩，全局引入

import browserEnv from '@/utils/browser-env.js'
app.use(browserEnv)

使用，个人觉得使用枚举更加清晰吧，一顿写数字其实也挺好

if (this.$browserEnv.webType == this.$browserEnv.enum.WX) {
  // 在微信中
}

原创不易，转载请注明出处，欢迎留言提议。