如何用JS准确判断企业微信内置浏览器？

Question

如何通过JavaScript准确判断用户是否在企业微信内置浏览器中打开页面？常见方案依赖于UserAgent特征识别，但因企业微信与微信客户端UserAgent极为相似，易出现误判。此外，部分安卓机型或系统更新后UserAgent存在差异，导致兼容性问题。更可靠的判断需结合特定JS-SDK接口（如`wx.qy`对象）或企业微信特有的环境变量，但需注意权限和加载时机。如何在不依赖网络请求的情况下实现高准确率的本地判断？

Answer 1

一、背景与挑战：企业微信内置浏览器的识别困境

在企业级Web应用开发中，判断用户是否在企业微信（WeCom）内置浏览器中打开页面是一个高频需求。典型场景包括：调用企业微信JS-SDK、获取成员信息、触发审批流程等。然而，由于企业微信与个人微信客户端在UserAgent上高度相似，仅依赖UA字符串的传统方法极易出现误判。

例如，两者UA均包含关键词如 MicroMessenger 和 WindowsWechat（PC端），或 Mobile/ + 特定内核标识（移动端）。此外，安卓系统碎片化导致部分厂商定制ROM修改了默认UA行为，进一步加剧兼容性问题。

因此，仅靠正则匹配UA已不足以支撑高准确率的本地判断，必须引入更深层次的环境探测机制。

二、常见方案分析与局限性

• 方案1：UserAgent特征识别 —— 简单直接，但准确性低。
• 方案2：navigator.userAgent.includes('wxwork') —— 部分版本支持，非全量覆盖。
• 方案3：检测window.wx.qy是否存在 —— 更可靠，但需注意加载时机。
• 方案4：尝试调用企业微信专属API并捕获异常 —— 可行但存在副作用风险。

方案	实现方式	准确率	兼容性	是否依赖网络
UA匹配 MicroMessenger	/MicroMessenger/i.test(navigator.userAgent)	低	高	否
UA含 wxwork	/wxwork/i.test(navigator.userAgent)	中	中	否
检测 window.wx.qy	typeof window.wx?.qy !== 'undefined'	高	高（需SDK加载）	否
调用 qy.config	主动调用接口看是否报错	高	中（权限限制）	否
navigator.vendor 匹配	navigator.vendor.includes('Tencent')	极低	差	否

三、深度解析：企业微信运行环境的本质差异

企业微信虽然基于微信内核构建，但在JavaScript执行环境中注入了独立的命名空间和对象模型。最显著的是：

if (window.wx && typeof window.wx.qy !== 'undefined') {
  console.log('当前环境为企业微信');
}

其中 wx.qy 是企业微信JS-SDK提供的专属命名空间，用于调用企业相关接口（如wx.qy.openUserProfile），而个人微信中仅存在 wx.miniProgram 或 wx.updateAppMessageShareData 等公众平台接口。

该对象由企业微信客户端在页面初始化阶段通过原生桥接注入，属于“可信信号”，难以伪造，因此具备较高可信度。

四、高准确率本地判断的核心策略

为实现不依赖网络请求的高准确率判断，建议采用“多层融合检测”策略：

1. 第一层：快速UA筛查（初步过滤）
2. 第二层：检查 window.wx 是否存在
3. 第三层：验证 window.wx.qy 是否为合法对象
4. 第四层：监听企业微信特有的事件（如 `menu:share` 行为差异）
5. 第五层：延迟重试机制应对SDK异步加载

以下为完整实现代码示例：

function isRunningInWeCom() {
  // 层1：UA快速排除非微信环境
  const ua = navigator.userAgent;
  if (!/MicroMessenger/i.test(ua)) return false;

  // 层2：尝试检测 wx.qy 对象（核心依据）
  if (typeof window.wx !== 'undefined' && typeof window.wx.qy !== 'undefined') {
    return true;
  }

  // 层3：补充UA关键字（部分安卓机有效）
  if (/wxwork/i.test(ua)) {
    return true;
  }

  // 层4：兜底逻辑 - 检查是否存在企业微信特有方法
  try {
    if (window.external && typeof window.external.invoke !== 'undefined') {
      return true; // 企业微信PC端可能暴露此接口
    }
  } catch (e) {}

  return false;
}

// 异步等待SDK加载后再判断（适用于延迟场景）
function waitForWxQy(timeout = 5000) {
  return new Promise((resolve) => {
    const check = () => {
      if (isRunningInWeCom()) {
        resolve(true);
      } else if (timeout <= 0) {
        resolve(false);
      } else {
        setTimeout(check, 100);
        timeout -= 100;
      }
    };
    check();
  });
}

五、流程图：企业微信环境检测决策路径

graph TD A[开始检测] --> B{UA包含 MicroMessenger?} B -- 否 --> C[非微信环境] B -- 是 --> D{window.wx 存在且 wx.qy 非 undefined?} D -- 是 --> E[确认为企业微信] D -- 否 --> F{UA包含 wxwork?} F -- 是 --> E F -- 否 --> G{是否存在 window.external.invoke?} G -- 是 --> E G -- 否 --> H[启动轮询检测wx.qy] H -- 检测到 --> E H -- 超时 --> I[判定为非企业微信]

六、最佳实践建议与注意事项

• 避免过早访问 wx 对象：企业微信JS-SDK通常异步加载，建议在 DOMContentLoaded 或 script onload 回调后检测。
• 不要依赖单一指标：组合使用UA、对象存在性、行为特征提升鲁棒性。
• 区分企业微信与微信工作台：后者是微信内的H5容器，无 wx.qy 支持。
• 移动端与PC端差异处理：PC版企业微信UA可能不含 wxwork，需依赖对象检测。
• 安全边界控制：禁止在非企业微信环境调用 wx.qy 接口，防止报错影响用户体验。
• 日志埋点辅助定位问题：记录UA、检测结果、设备类型，便于后续分析兼容性问题。

七、扩展思考：未来可探索的方向

随着企业微信逐步向标准化Web能力演进，未来或许可通过以下方式增强识别能力：

• 利用 self.ClientRect 或 navigator.connection 中的企业微信私有字段（实验性）
• 观察页面生命周期事件（如 resume/suspend）的行为模式差异
• 结合CSS媒体查询探测企业微信特有的视口处理逻辑
• 使用 performance.getEntriesByType("navigation") 分析来源类型
• 探索Service Worker注册行为的差异（部分环境受限）