微信 H5 常见问题

使用快捷键 Ctrl + F 快速搜索关键词定位问题。

一、布局问题

[ 待添加 ]

问题描述：

• 待添加。

解决方案：

• 待添加。

---

二、兼容问题

[ 键盘遮挡输入框 ]

问题描述：

• 当键盘弹起时，会遮挡输入框，用户无法正常输入。 参考资料 (opens new window)

解决方案：

// 监听键盘高度变化，自动滚动页面
window.addEventListener("resize", () => {
  setTimeout(() => {
    document.activeElement.scrollIntoView({
      behavior: "smooth",
      block: "center"
    });
  }, 200);
});

---

[ 自动播放音频与音效 ]

问题描述：

• 问题 1: 进入页面时无法自动播放背景音乐。
• 问题 2: iOS 用户手动点击播放后，无法播放音效。

解决方案：

• 问题 1: 背景音乐自动播放: 用户交互后，调用 video.play()。
• 问题 2: 交互触发音效: iOS 情况特殊，音频需要播放一遍后，才可以通过 video.play() 播放。

// 创建音频池
const audioPool = ref([]);

// 初始化音频
const initAudio = () => {
  audioPool.value.forEach((audio) => {
    audio.volume = 0; // 设置音量为 0
    audio
      .play()
      .then(() => {
        // 播放一遍后，后续才能正常播放
        audio.pause();
        audio.currentTime = 0;
        audio.volume = 0.1;
      })
      .catch((err) => console.log("音频初始化失败:", err));
  });
};

注：iOS 系统对音频的权限管理非常严格，每个音频都需要触发才能正常播放。而音频池是为了解决单个 audio 播放卡顿的问题。

---

三、安全问题

[ 访问链接存在安全风险 ]

问题描述：

• 最初以为是安全域名配置问题，忽略了浏览器的报错信息，实际原因正如提示所述——服务器 SSL 证书未正确配置或无效。
• 项目网站虽然部署了 SSL 证书，但对应的 API 接口服务器未部署 SSL 证书，导致被拦截。

注：安卓下无异常，iOS 环境下会出现安全提示，这也表明 iOS 系统对网络安全要求更为严格。

---

🔖 持续更新中...

如有新发现问题，及时补充完善此文档，以沉淀经验。