Web App 嵌入微信公眾號的標準實現方式

核心方案

將 HTML5 頁面部署到公開可訪問的服務器（需 HTTPS 域名），在微信公眾平台配置自定義菜單，菜單類型選「跳轉網頁」，填入頁面 URL。用戶點擊菜單即可在微信內置瀏覽器打開 Web App。

詳細步驟

1. 服務器部署：確保頁面可通過 HTTPS 訪問，配置有效 SSL 證書。
2. 公眾號配置：
   • 登錄微信公眾平台 → 功能 → 自定義菜單
   • 添加菜單項，類型選「跳轉網頁」，輸入頁面鏈接
   • 發布菜單
3. 頁面適配：
   • 設置 viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0">
   • 使用 REM/百分比布局，適配不同屏幕寬度
   • 引入 weixin-js-sdk 以調用微信原生能力（分享、支付、定位等）
4. 域名驗證：在公眾號設置 → 功能設置 → JS 接口安全域名 中添加你的域名。

進階：網頁授權獲取用戶信息

若需獲取用戶 OpenID、頭像等，需實現網頁授權 OAuth2.0 流程：

1. 引導用戶訪問：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
2. 微信回調 redirect_uri?code=CODE
3. 服務端用 code 換取 access_token 和 openid
4. 拉取用戶信息

注意事項

• 避免在微信外打開頁面時出錯，可用 navigator.userAgent.includes('MicroMessenger') 判斷環境。
• 頁面加載速度優化：壓縮資源、啟用 CDN、使用 Service Worker 緩存。
• 微信瀏覽器緩存較激進，更新頁面需修改資源鏈接版本號（如 app.js?v=20240101）。