uni-app中web-view为什么不触发WeixinJSBridgeReady

发布于 1周前 作者 bupafengyu 来自 uni-app

uni-app中web-view为什么不触发WeixinJSBridgeReady
游戏项目；uniapp做公众号；ios不能自动播放直播画面，安卓正常
直播链接是webrtc://play.csyl4949.top/live/chaoma012
用TCPlayer 集成直播播放，发现ios微信浏览器不能自动播放，
在网上搜到WeixinJSBridgeReady可以做到自动播放，
发现html文件微信浏览器直接打开可以自动播放；web-view嵌入html链接不走WeixinJSBridgeReady了，是咋回事？麻烦大佬帮忙看看，

图片是服务器上的html文件


Harmonyos Next教程
3 回复

你引入了2个jweixin的库，看看是不是有报错哦


删掉了，跟这个没有关系

在uni-app中使用<web-view>组件时，如果遇到WeixinJSBridgeReady事件不触发的问题，这通常是由于微信环境中的一些特殊行为或者页面加载顺序问题导致的。WeixinJSBridgeReady是微信JS-SDK中的一个事件，用于确保微信内置浏览器的JS接口调用准备就绪。在标准的微信网页开发中，我们通常会通过监听这个事件来确保后续的功能调用不会出错。

然而，在uni-app中直接使用<web-view>时，这个事件的处理需要一些额外的注意，因为<web-view>组件实际上是在原生层面嵌入了一个WebView，与uni-app本身的JavaScript环境是相对隔离的。这意味着，在<web-view>加载的页面中，你需要自行确保微信JS-SDK的初始化。

以下是一个可能的解决方案示例，展示如何在<web-view>加载的页面中正确初始化微信JS-SDK并监听WeixinJSBridgeReady事件：

步骤1：确保在微信环境中

首先，在<web-view>加载的HTML页面中，你需要检查当前环境是否为微信环境。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weixin JS-SDK Demo</title>
    <script type="text/javascript">
        function isWeixinBrowser() {
            var ua = navigator.userAgent.toLowerCase();
            return ua.match(/MicroMessenger/i) == 'micromessenger';
        }

        if (isWeixinBrowser()) {
            document.addEventListener('WeixinJSBridgeReady', function () {
                // 初始化微信JS-SDK相关代码
                alert('WeixinJSBridgeReady triggered!');
                // 例如调用微信JS-SDK接口
                wx.config({
                    // 配置信息
                });
            }, false);
        } else {
            alert('This is not WeChat browser!');
        }
    </script>
</head>
<body>
    <h1>Hello, WeChat!</h1>
</body>
</html>

步骤2：在uni-app中使用<web-view>

在uni-app的页面中，使用<web-view>组件加载上述HTML页面。

<template>
  <view>
    <web-view src="https://your-webview-url.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    // 方法定义
  }
};
</script>

注意，这里的https://your-webview-url.com应该替换为你实际存放上述HTML页面的URL。

通过这种方式，你可以在<web-view>加载的页面中正确地监听并处理WeixinJSBridgeReady事件，从而安全地使用微信JS-SDK提供的功能。

回到顶部