微信各端存在预加载、localStorage失效、AudioContext限制及CSS动画异常等兼容性问题，需分别采用轮询+MutationObserver、localStorage探测降级、手势触发音频、setTimeout检测样式等方案适配。
微信内置浏览器不触发 onload 或 DOMContentLoaded
微信 iOS 版（尤其是 8.0.40+）对页面生命周期做了更激进的预加载优化，常导致 JS 插件在 DOM 尚未就绪时执行，或直接跳过标准事件。这不是 bug，是微信 WebView 的主动干预。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用
document.addEventListener('DOMContentLoaded', ...)做插件初始化入口，改用requestIdleCallback+ 回退轮询（iOS Safari 不支持requestIdleCallback时用setTimeout延迟 16ms 检查document.body） - 对关键 DOM 节点（如插件挂载点）用
MutationObserver监听插入，而非依赖全局加载事件 - 避免在
中同步加载插件脚本；改为或动态document.createElement('script')并监听onload
localStorage 在微信 Android 7.x–9.x 上静默失效
部分安卓机型（尤其华为 EMUI、小米 MIUI）的微信 WebView 对 localStorage 的写入会返回成功但实际不持久，读取始终为空。这是系统级 WebView 组件的兼容性断层，非代码逻辑问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化插件前先做
localStorage可用性探测：try { localStorage.setItem('test', '1'); localStorage.removeItem('test'); } catch(e) { /* fallback */ } - 降级方案优先选
sessionStorage（微信中稳定性更高），其次用内存缓存 + URL 参数透传（适用于简单状态） - 若必须持久化，改用
indexedDB（微信 Android 7.0+ 支持），但注意其异步特性需重写插件状态恢复逻辑
微信 iOS 禁用 Web Audio API 自动播放，插件音频功能白屏/报错
微信 iOS 默认禁止任何音频上下文（AudioContext）在用户无交互前启动，调用 audioContext.resume() 会抛出 DOMException: The operation is not allowed，且不触发 onstatechange 回调。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有音频相关插件逻辑必须包裹在用户手势回调内（如
document.body.addEventListener('touchstart', initAudio, { once: true })） - 避免在插件构造函数中创建
AudioContext，改为懒初始化：首次播放请求时才 new 实例并 resume - 检测环境：用
typeof AudioContext !== 'undefined' && /MicroMessenger/i.test(navigator.userAgent)区分微信场景，提前禁用非必要音频提示
插件 CSS 动画在微信中卡顿或不触发 transitionend
微信 Android 使用 X5 内核，对 will-change、transform: translateZ(0) 等硬件加速标记响应不稳定；iOS 微信则常因强制启用 WKWebView 的渲染策略导致 transitionend 事件丢失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画触发后，不用
transitionend作为插件状态切换依据，改用setTimeout加固定延时（如 300ms）+getComputedStyle主动检查最终样式值 - 避免对
height、width等触发重排的属性做过渡；统一转为transform+opacity - 微信 Android 下慎用
@keyframes动画，X5 内核对animation-fill-mode解析有偏差，建议用 JS 控制style.animation字符串启停
跨平台适配最麻烦的不是语法差异，而是微信把「标准行为」当可优化项来裁剪——它不报错，只悄悄绕过。每次加新插件，都得单独验一遍微信各端的真实执行流，不能信控制台里跑通了就算完。
