uni-app中webview使用无法调用uni.postMessage的踩坑经验分享

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

uni-app中webview使用无法调用uni.postMessage的踩坑经验分享

1、使用uniapp项目写H5 webview，使用hello uniapp的模板，按照webview文档里的源码往template.h5.html里面写入相关内容。 2、引入的https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本，它这个地方是个坑。你要手动改源码。uni.webview.js文件里面注册的就是uni对象。被uniapp项目自带的uni对象覆盖了，我就是把源码里面注册uni对象换了个名字（webUni）就好了。 END：这里把我自己改好的js文件贴上来，包括template.h5.html文件，可以直接使用webUni.postMessage方法。

文件名 内容
template.h5.html 待补充
改好的uni.webview.js 待补充

压缩文件.rar


Harmonyos Next教程
1 回复

在uni-app中使用webview组件时，确实可能会遇到无法调用uni.postMessage的问题。这通常是由于一些常见的配置或用法错误导致的。下面，我将通过代码示例来展示如何在uni-app中正确使用webview组件，并通过postMessage进行通信。

首先，确保你的uni-app项目已经正确配置了webview组件。以下是一个基本的webview使用示例：

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

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://example.com/your-webview-page.html' // 替换为你的webview页面URL
    };
  },
  methods: {
    sendMessageToWebview() {
      // 假设webview页面已经加载完成，这里发送消息
      // 注意：这里不能直接使用 this.$refs.webview.postMessage，因为web-view组件不支持ref
      // 而是通过监听页面加载完成事件，然后使用evalJS或executeScript（视平台而定）来间接调用webview页面的函数
      // 但为了示例简洁，这里直接展示如何在webview页面内调用uni.postMessage（需webview页面配合）
      // 实际上，你可能需要在webview页面加载后，通过某种机制（如定时器检查、页面内postMessage回调等）确认页面已加载并准备好接收消息
    },
    handleMessage(event) {
      // 接收来自webview页面的消息
      console.log('Received message from webview:', event.detail.data);
    }
  }
};
</script>

在webview页面（即https://example.com/your-webview-page.html）中，你需要确保有相应的JavaScript代码来接收和发送消息。由于uni-app的webview组件封装了原生webview，通常你需要使用window.postMessage来发送消息到uni-app主页面，并监听message事件来接收来自uni-app的消息（尽管这里我们主要关注发送消息）。

<!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 sendMessageToUniApp(message) {
      window.postMessage(JSON.stringify(message), '*'); // 第二个参数是目标origin，这里为了示例简洁使用'*'，实际应指定具体的origin以增强安全性
    }

    // 监听来自uni-app的消息（虽然本示例主要关注发送，但这里也展示如何监听）
    window.addEventListener('message', function(event) {
      console.log('Received message from uni-app:', event.data);
    });

    // 示例：发送消息
    sendMessageToUniApp({ type: 'hello', content: 'This is a message from webview' });
  </script>
</body>
</html>

请注意，由于uni-app的webview组件在不同平台上可能有细微差异，因此在实际项目中，你可能需要根据平台特性进行适当的调整。

回到顶部