核心逻辑是用 navigator.useragent.tolowercase().indexof('micromessenger') !== -1 判断微信环境，需确保 dom 加载完成后执行显示逻辑，并避免依赖 weixinjsbridge 进行环境判断。
用 navigator.userAgent 判断是否微信环境
核心逻辑就是检测 User-Agent 字符串里有没有 micromessenger，这是微信 WebView 的固定标识。注意大小写不敏感，但必须是完整单词匹配，不能只搜 wechat 或 weixin（这些可能被其他 App 误匹配）。
常见错误是直接用 indexOf('WeChat') 或 includes('wx') ——iOS 微信 UA 里没有 WeChat，安卓旧版 UA 里也没有 wx；真正稳定可靠的只有 micromessenger。
var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') !== -1;- 判断后可控制 DOM 显示：
document.getElementById('wx-only-btn').style.display = isWeixin ? 'block' : 'none';
按钮显示逻辑要放在 DOM 加载后执行
如果脚本写在 里且没加 defer 或事件监听，很可能执行时 DOM 还没就绪，getElementById 返回 null，导致按钮永远不显示。
更稳妥的做法是等 DOMContentLoaded，或把脚本放到底部 前。Vue/React 项目则应在 mounted 或 useEffect 中执行判断。
- 不要这样写：
<script>document.getElementById('btn').style.display = isWeixin ? 'block' : 'none'</script>（位置不确定） - 推荐这样：
document.addEventListener('DOMContentLoaded', () => { /* 判断 + 显示逻辑 */ }); - 避免在
window.onload里做——它等所有资源（图片、字体）加载完，延迟明显
注意 iOS 和 Android 微信 UA 差异不影响判断
iOS 微信 UA 包含 Micromessenger，Android 也是，但具体版本号和内核字段不同（比如 iOS 有 WKWebView，Android 多为 TBS/TC）。这些差异对 micromessenger 检测完全无影响，无需分别处理。
真正容易踩坑的是：某些安卓定制 ROM 或第三方微信（如“微信极速版”）UA 可能精简，但实测主流版本仍保留该关键字；若真遇到漏判，应优先怀疑 UA 被主动伪造或拦截，而非判断逻辑本身。
- 典型 iOS UA 片段：
Micromessenger/8.0.44 - 典型 Android UA 片段：
Micromessenger/8.0.51.2600 - 只要 UA 包含
micromessenger（忽略大小写），就可认为是微信环境
别依赖 WeixinJSBridge 做环境判断
WeixinJSBridge 是微信私有 API，只在微信内可用，但它不是环境判断的可靠依据——页面刚加载时它可能还没就绪，typeof WeixinJSBridge === 'undefined' 并不能反向证明“不在微信里”，只能说明“还没准备好”。
用它来判断会漏掉大量首屏渲染场景，尤其在 iOS WKWebView 下初始化更慢。正确顺序是：先用 UA 判断并显示/隐藏按钮，再在 WeixinJSBridgeReady 回调里绑定分享等交互逻辑。
- 错误做法：
if (typeof WeixinJSBridge !== 'undefined') { showBtn(); } - 正确做法：
if (isWeixin) { showBtn(); initWechatShare(); } -
WeixinJSBridge仅用于功能增强，不能替代 UA 判断
微信里按钮显示逻辑看似简单，但真正上线时最容易翻车的是 DOM 就绪时机和 UA 匹配粒度——不是所有“微信”都叫微信，也不是所有“加载完成”都等于 DOM 可操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
