使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器

使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器

主要代码如下

type NavigatorMap = '微信' | '支付宝' | '钉钉' | '专有钉钉' | '企业微信' | '微信小程序'

export default (nav: NavigatorMap): boolean => {
  const u = navigator.userAgent.toLowerCase()
  const navigatorMap = {
    微信: new RegExp(/micromessenger/, 'i').test(u),  //微信
    企业微信: new RegExp(/micromessenger/, 'i').test(u) && new RegExp(/wxwork/, 'i').test(u),//企业微信
    支付宝: new RegExp(/alipay/, 'i').test(u),// 支付宝
    专有钉钉: new RegExp(/taurusapp/, 'i').test(u),//专有钉钉
    钉钉: new RegExp(/dingtalk/, 'i').test(u), // 钉钉
    微信小程序: (window as any)?.__wxjs_environment == "miniprogram"
  }

  return navigatorMap[nav]
}

使用

navigatorUserAgent('微信') 
// 如果在微信浏览器中直接返回 true，其他平台返回false

技术点说明

navigator.userAgent.toLowerCase() UserAgent 只读属性返回当前浏览器的用户代理字符串。
先看在谷歌浏览器控制台打印的结构：

‘mozilla/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.0.3 mobile/15e148 safari/604.1’

主要判断移动端APP的内置浏览器，以移动端钉钉浏览器环境为例

mozilla/5.0 (linux; u; android 11; zh-cn; v1936a build/rp1a.200720.012) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/69.0.3497.100 uws/3.22.1.210 mobile safari/537.36 aliapp(dingtalk/6.5.20) com.alibaba.android.rimet/24646881 channel/10003993 language/zh-cn abi/64 ut4aplus/0.2.25 colorscheme/light

❗❗❗注意: 该规范要求浏览器通过该字段提供尽可能少的信息。不要假设此属性的值在同一浏览器的未来版本中保持不变。尽量完全不要使用它，或者只在浏览器的当前版本和过去版本中使用它。新的浏览器可能开始使用相同的 UA，或部分，作为一个旧的浏览器，你真的不能保证浏览器代理确实是这个属性的广告。还要记住，浏览器用户可以根据需要更改此字段的值(UA 欺骗)。

Navigator.userAgent