uni-app微信小程序webview交互

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

uni-app微信小程序webview交互

uniapp中使用webview问题

uniapp中使用webview在H5环境下可以完美运行，但在小程序环境下无法正常工作。

我的代码执行流程：

  • 在Vue页面中使用webview组件。
  • webview加载成功后，微信小程序有@load回调。
  • 在HTML中使用uni.postMessage给小程序发送消息（H5环境下可以接收到）。
  • 但@message没有回调，H5中使用window.removeEventListener('message', handleMessage)监听事件，小程序中无法使用（因为小程序中没有window对象）。
  • 我也在社区中查阅了许多文档，但没有找到解决方案。

最终我想咨询的问题是，我代码是否存在问题，或者说小程序不支持webview交互？

注：

  1. 使用本地网络连接引入。
  2. 在HTML环境下引入了微信小程序js-sdk（jweixin-1.4.0.js），也引入了uniapp的uni.webview.1.5.6.js。
  3. 所有的JS代码都写在document.addEventListener('UniAppJSBridgeReady', function() { ... })中。

select-location.txt

项目创建方式 开发环境 版本号
Vue页面中使用webview组件 H5、微信小程序 uni.webview.1.5.6, jweixin-1.4.0.js

Harmonyos Next教程
6 回复

经验分享：可以用一个比较巧的做法绕过微信这个限制。是实现将 uni-im 打包成网页嵌入到微信的 web-view 时发现的，“直接用 uni-push 内外层通讯”


那么如果是小程序向网页传递数据呢？可以实现吗？除了在url后面拼接以外

回复 8***@qq.com: 网页可以

网页向小程序 postMessage 时，只会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接
请参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

那么如果是小程序向网页传递数据呢？可以实现吗？除了在url后面拼接以外

在处理uni-app与微信小程序中的webview交互时，关键在于如何在两个环境之间传递消息。uni-app提供了对微信小程序的良好支持，但webview组件的交互需要遵循微信小程序的相关规范。以下是一个基本的代码示例，展示了如何在uni-app中嵌入微信小程序webview并实现简单的消息传递。

1. 在uni-app中嵌入webview

首先，在uni-app的页面中使用<web-view>组件嵌入一个网页。注意，这里的src应该是你希望加载的网页URL。

<template>
  <view>
    <web-view :src="webviewUrl" @message="handleMessage"></web-view>
    <button @click="postMessage">Post Message to WebView</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://your-webview-url.com'
    };
  },
  methods: {
    postMessage() {
      const message = {
        type: 'hello',
        data: 'This is a message from uni-app'
      };
      // 使用 evalJs 方法发送消息到 webview
      this.$refs.webview.evalJs(`
        window.postMessage(JSON.stringify(${JSON.stringify(message)}), '*');
      `);
    },
    handleMessage(e) {
      const message = JSON.parse(e.detail.data);
      console.log('Message from webview:', message);
    }
  }
};
</script>

注意：由于<web-view>组件没有ref属性，上面的evalJs调用是一个示意。在实际操作中，你可能需要通过其他方式（如URL参数或后端中转）来发送消息，因为微信小程序中的<web-view>不直接支持evalJs。

2. 在Webview中的JavaScript处理消息

在你的webview网页中，你需要监听message事件来处理来自uni-app的消息，并可以使用postMessage方法发送消息回uni-app。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebView Page</title>
</head>
<body>
  <script>
    window.addEventListener('message', function(event) {
      const message = JSON.parse(event.data);
      console.log('Message from uni-app:', message);
      
      // 发送消息回uni-app（注意：这在实际微信小程序webview中可能受限）
      window.parent.postMessage(JSON.stringify({ type: 'reply', data: 'Hello from webview' }), '*');
    });
  </script>
</body>
</html>

重要提示：微信小程序对webview的交互有严格的安全限制。上面的直接通信方式可能不适用于所有情况。在实际应用中，你可能需要通过URL参数、服务器中转或其他微信小程序支持的方式来实现通信。

以上代码提供了一个基本的框架，但请根据你的具体需求和微信小程序的规范进行调整。

回到顶部