在H5頁面中判斷是否在微信內置瀏覽器打開，主要通過以下兩種方式：

1. 通過 User Agent 判斷（最常用）

// 方法1：直接判斷
function isWeChatBrowser() {
    const ua = navigator.userAgent.toLowerCase();
    return /micromessenger/i.test(ua);
}

// 方法2：詳細判斷
function isWeChatBrowser() {
    const ua = navigator.userAgent.toLowerCase();
    const isWeChat = ua.indexOf('micromessenger') !== -1;
    
    if (isWeChat) {
        // 獲取微信版本號（可選）
        const match = ua.match(/micromessenger\/([\d.]+)/i);
        const version = match ? match[1] : 'unknown';
        console.log('微信版本：', version);
        return true;
    }
    return false;
}

// 使用示例
if (isWeChatBrowser()) {
    console.log('在微信內置瀏覽器中打開');
    // 執行微信特定的邏輯
} else {
    console.log('在其他瀏覽器中打開');
}

2. 通過微信 JS-SDK 判斷

// 在已引入微信JS-SDK的情況下
function checkWeChatViaJSSDK() {
    if (typeof window.wx !== 'undefined') {
        console.log('已加載微信JS-SDK，説明在微信環境中');
        return true;
    }
    return false;
}

// 更安全的方式：結合 User Agent 和 JS-SDK 判斷
function isWeChatEnvironment() {
    const ua = navigator.userAgent.toLowerCase();
    const isWeChatUA = /micromessenger/i.test(ua);
    const hasWeChatJSSDK = typeof wx !== 'undefined';
    
    return isWeChatUA || hasWeChatJSSDK;
}

3. 完整的使用示例

<!DOCTYPE html>
<html>
<head>
    <title>微信環境檢測</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="result">檢測中...</div>
    
    <script>
        // 微信環境檢測函數
        function isWeChatBrowser() {
            const ua = navigator.userAgent.toLowerCase();
            return ua.indexOf('micromessenger') !== -1;
        }
        
        // 頁面加載後檢測
        document.addEventListener('DOMContentLoaded', function() {
            const resultElement = document.getElementById('result');
            
            if (isWeChatBrowser()) {
                resultElement.innerHTML = '✅ 當前在微信內置瀏覽器中';
                resultElement.style.color = 'green';
                
                // 獲取微信版本信息
                const ua = navigator.userAgent.toLowerCase();
                const match = ua.match(/micromessenger\/([\d.]+)/i);
                const wechatVersion = match ? match[1] : '未知版本';
                
                // 顯示更多信息
                const infoDiv = document.createElement('div');
                infoDiv.innerHTML = `微信版本：${wechatVersion}<br>User Agent：${navigator.userAgent}`;
                infoDiv.style.marginTop = '20px';
                infoDiv.style.fontSize = '12px';
                infoDiv.style.color = '#666';
                document.body.appendChild(infoDiv);
                
                // 執行微信特定的業務邏輯
                handleWeChatSpecificLogic();
            } else {
                resultElement.innerHTML = '❌ 當前不在微信內置瀏覽器中';
                resultElement.style.color = 'red';
                
                // 提示用户
                const tipDiv = document.createElement('div');
                tipDiv.innerHTML = '請使用微信掃描二維碼或在微信中打開此鏈接';
                tipDiv.style.marginTop = '20px';
                tipDiv.style.color = '#f60';
                document.body.appendChild(tipDiv);
            }
        });
        
        function handleWeChatSpecificLogic() {
            console.log('執行微信特有的邏輯');
            // 例如：初始化微信JS-SDK、調用微信分享等
        }
    </script>
</body>
</html>

4. 判斷特定的微信客户端

// 判斷是否為特定平台的微信
function getWeChatPlatform() {
    const ua = navigator.userAgent.toLowerCase();
    
    if (ua.indexOf('micromessenger') === -1) {
        return 'not_wechat';
    }
    
    if (ua.indexOf('windowswechat') !== -1) {
        return 'windows_wechat'; // Windows微信
    } else if (ua.indexOf('macwechat') !== -1) {
        return 'mac_wechat'; // Mac微信
    } else if (ua.indexOf('iphone') !== -1) {
        return 'ios_wechat'; // iOS微信
    } else if (ua.indexOf('android') !== -1) {
        return 'android_wechat'; // Android微信
    } else {
        return 'unknown_wechat';
    }
}

5. 注意事項

  1. User Agent 可能被修改：雖然不常見，但某些瀏覽器插件可以修改 User Agent
  2. 微信版本兼容性：不同微信版本支持的功能不同，建議做版本判斷
  3. 調試技巧：
    • 在微信開發者工具中可以模擬微信環境
    • 在微信中訪問 https://debugxweb.qq.com 可開啓調試模式

6. 實際應用場景

// 根據不同環境執行不同邏輯
function initPage() {
    if (isWeChatBrowser()) {
        // 微信環境：使用微信分享、微信支付等
        initWeChatShare();
        initWeChatPayment();
    } else {
        // 非微信環境：使用普通分享、其他支付方式
        initNormalShare();
        initAlternativePayment();
    }
}

// 判斷是否支持某些微信特性
function canUseWeChatFeature(feature) {
    if (!isWeChatBrowser()) return false;
    
    const ua = navigator.userAgent.toLowerCase();
    const match = ua.match(/micromessenger\/([\d.]+)/i);
    const version = match ? parseFloat(match[1]) : 0;
    
    // 根據微信版本判斷功能支持
    switch(feature) {
        case 'webpay':
            return version >= 6.0; // 示例：6.0+支持微信支付
        case 'miniprogram':
            return version >= 6.6; // 示例：6.6+支持跳轉小程序
        default:
            return version >= 5.0; // 基礎功能要求
    }
}