uni-app 抖音小程序环境下 webview 无法通信

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app 抖音小程序环境下 webview 无法通信

类别 信息
产品分类 uniapp/小程序/字节跳动
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows
HBuilderX类型 正式
HBuilderX版本号 4.29
第三方开发者工具版本号 4.3.3
基础库版本号 3.49.0.7
项目创建方式 HBuilderX

操作步骤：

  • 直接使用，无法通信

预期结果：

  • 希望h5回调传值在小程序能收到

实际结果：

  • 没有反应

bug描述：

小程序页面代码如下

<template>  
  <web-view  
    ref="webview"  
    src="https://localhost"  
    @load="onWebLoad"  
    @message="onMessage"  
    @onPostMessage="getMessage"  
    @error="onError"  
  ></web-view>  
</template>  
<script>  
// import { mapActions, mapMutations } from "vuex";  
export default {  
  name: "list",  
  data() {  
    return {};  
  },  
  onLoad() {  
    console.log(this.$ref);  
  },  
  methods: {  
    onWebLoad(params) {  
      console.log("onWebLoad", params);  
    },  
    onMessage(params) {  
      console.log("onMessage", params);  
    },  
    getMessage(params) {  
      console.log("getMessage", params);  
    },  
    onError(params) {  
      console.log("onError", params);  
    },  
  },  
};  
</script>  
<style lang="scss" scoped></style>

以下是html代码

<body>  
    <div class="fileInputTips">  
        请上传PDF格式文件  
    </div>  
    <form id="uploadForm" enctype="multipart/form-data">  
        <div class="fileInputBtn">  
            <span id="upText">点击上传</span>  
            <input id="fileInput" accept=".pdf" class="fileInput" type="file" required>  
        </div>  
        <button class="fileInputBtn2" type="button" onclick="tijiao()">提交文件</button>  
    </form>  
    <script type="text/javascript" src="./uni.webview.js"></script>  
    <script type="text/javascript">  
        function tijiao() {  
           //webUni是为了防止被uni覆盖改名的  
            webUni.postMessage({  
                data: {  
                    action: 'message'  
                },  
            });  

        }  

    </script>  
</body>

Harmonyos Next教程
3 回复

document.addEventListener(‘UniAppJSBridgeReady’, function() {}


无效的，没有任何卵用

在uni-app抖音小程序环境下，如果你遇到webview组件无法通信的问题，通常是由于小程序平台对webview组件的限制或一些特定的实现细节导致的。以下是一个在uni-app中通过webview组件进行通信的代码示例，以及可能遇到的抖音小程序环境下的特殊处理方法。

基本通信示例

在 pages/index/index.vue 中：

<template>
  <view>
    <web-view :src="webviewSrc" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewSrc: 'https://example.com/your-webview-page' // 替换为你的webview页面地址
    };
  },
  methods: {
    handleMessage(event) {
      const { data } = event.detail;
      console.log('Received from webview:', data);
      // 处理从webview接收到的消息
    },
    postMessageToWebview() {
      // 假设你有一个ref引用到webview组件
      // this.$refs.webview.postMessage({ message: 'Hello from uni-app' });
      // 但由于抖音小程序限制，直接通过ref访问webview并调用方法可能不被支持
      // 因此，可以考虑通过改变src来传递简单参数，或者使用其他间接方式
    }
  }
};
</script>

在你的webview页面中（比如 https://example.com/your-webview-page）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webview Page</title>
</head>
<body>
  <script>
    // 发送消息给uni-app
    function postMessageToUniApp() {
      if (window.WeixinJSBridge) { // 微信小程序环境
        WeixinJSBridge.invoke('postMessage', { data: 'Hello from webview' });
      } else if (window.__uniapp_postMessage__) { // uni-app内置方法（非所有平台都支持）
        __uniapp_postMessage__('Hello from webview');
      } else {
        // 其他平台或回退方案，可能需要通过改变hash或查询参数来通信
        console.error('Unsupported platform for webview communication');
      }
    }

    // 可以在页面加载完成后自动发送消息，或者绑定到某个按钮点击事件上
    window.onload = postMessageToUniApp;
  </script>
</body>
</html>

抖音小程序特殊处理

在抖音小程序中，由于平台限制，直接通过postMessage或WeixinJSBridge等方式可能不起作用。你可能需要考虑以下替代方案：

  1. 使用URL参数或Hash值：通过改变webview的src属性中的查询参数或hash值来传递简单信息。
  2. 后端中转：通过服务器中转消息，uni-app和webview页面都与服务器通信来实现数据交换。
  3. 自定义协议：如果可能，定义一个自定义协议，通过webview的navigateToMiniProgram等方法触发uni-app的特定页面或操作。

请注意，具体实现需根据抖音小程序的最新文档和限制进行调整。

回到顶部