微信小程序 web-view 组件JS代码执行失败排查指南
在微信小程序中使用 web-view 组件加载 H5 页面时，开发者经常会遇到一个难题：H5 页面在浏览器和模拟器上运行正常，但在真机上却无法执行 JavaScript 代码。本文将通过一个案例分析，帮助您解决此类问题。
问题描述：
一个使用 web-view 组件加载 H5 直播页面的案例，H5 页面使用 flv.js 库播放直播视频。代码片段如下：
<meta charset="UTF-8">
<title></title>
<video autoplay="" id="videoElement" muted="" style="width: 100%;"></video>
<button id="unmuteButton">unmute</button>
<script>
window.onload = function() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var button = document.getElementById("unmuteButton");
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: '直播拉流地址'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
button.addEventListener("click", function() {
videoElement.muted = false;
flvPlayer.play();
});
}
};
</script>
此代码在浏览器和模拟器中运行良好，但在真机上却无法播放视频，JavaScript 代码似乎没有执行。
问题原因及解决方案：
此问题最常见的原因是微信小程序 web-view 的域名配置不正确。web-view 组件对访问域名有严格限制，必须在微信小程序后台的“开发管理” -> “开发设置” -> “服务器域名” 中配置业务域名，且域名必须使用 HTTPS 协议。如果 H5 页面引用的资源（例如视频流地址、js 库等）域名未在小程序后台配置，或使用了 HTTP 协议，则 web-view 将无法正常访问并执行 JavaScript 代码。
解决方案：
请仔细检查以下几点：
-
确保直播拉流地址和 flv.min.js 文件所在的域名已在微信小程序后台的业务域名中正确配置。 务必仔细核对域名拼写，区分大小写。
-
所有域名必须使用 HTTPS 协议。 HTTP 协议将导致 web-view 无法访问。
-
清除小程序缓存并重启小程序。 有时缓存可能会导致问题。
-
检查网络连接。 确保真机拥有稳定的网络连接。
-
检查 flv.js 库是否正确引入。 确保路径正确，且库文件能够被正常加载。
通过以上步骤，您可以有效排查并解决微信小程序 web-view 组件中 JavaScript 代码无法执行的问题，确保 H5 页面在真机上正常运行。
