微信小程序webview内H5页面JS代码无法执行是什么原因？-js教程-PHP中文网

微信小程序webview内H5页面JS代码无法执行是什么原因？

花韻仙語

发布： 2025-03-05 08:18:14

原创

954人浏览过

微信小程序webview内h5页面js代码无法执行是什么原因？

微信小程序 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 代码。

解决方案：

请仔细检查以下几点：