uni-app 小程序 webview 无法接收网页传递的消息

uni-app 小程序 webview 无法接收网页传递的消息

开发环境 版本号 项目创建方式
Windows window 11 HBuilderX

示例代码：

<template>  
    <view>  
        <web-view  :src="url" [@message](/user/message)="messaged"></web-view>  
    </view>  
</template>  
<script>  
    export default {  
      data() {  
        return {  
          url: ''  
        }  
      },  
      onLoad(options) {  
        this.url = options.url;  
      },  
      methods: {  
        messaged(event) {  
          console.log(event);   // 没有接收到  uni.webView.postMessage 的信息  
        },  
      }  
}  

// web 端：  
methods: {  
    clickSendMsg() {  
      // uni.webView 可以打印出有 navigateTo/navigateBack/switchTab/postMessge/redirectTo/getEnv等方法  
      uni.webView.postMessage({  
        data: {  
          type: 'back'  
        }  
      });  
      uni.webView.navigateBack();     
  }

bug描述：

uniapp 小程序中的 webview 引入 uni.webview.1.5.5.js，并在web中调用 uni.webView.postMessage 以及 uni.webView.navigateBack 后，在小程序webview的 @message 并没有收到消息。

uniapp版本：3.0.0-3090620231104002
web端： nuxt 3


更多关于uni-app 小程序 webview 无法接收网页传递的消息的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已解决，由于使用的第三方的小程序平台，使用第三方提供的jssdk文件即可

更多关于uni-app 小程序 webview 无法接收网页传递的消息的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-app 中，小程序通过 webview 组件嵌入网页时，网页与小程序之间的通信可以通过 postMessage 和 onMessage 来实现。如果你遇到网页无法接收消息的问题，可以按照以下步骤进行排查和解决：

1. 确保网页正确发送消息

在网页中，确保你使用了 window.parent.postMessage 或 window.top.postMessage 来发送消息。例如：

window.parent.postMessage({ type: 'message', data: 'Hello from WebView' }, '*');

2. 确保小程序正确接收消息

在小程序中，确保你监听了 webview 的 message 事件。例如：

<web-view src="https://your-webpage.com" @message="handleMessage"></web-view>

在对应的 Vue 文件中，定义 handleMessage 方法：

export default {
  methods: {
    handleMessage(event) {
      console.log('Received message from WebView:', event.detail.data);
    }
  }
}

3. 检查跨域问题

确保网页和小程序之间的通信没有受到跨域限制。如果你在本地开发环境中测试，可以尝试将网页部署到一个支持 HTTPS 的服务器上，因为小程序要求 webview 加载的网页必须是 HTTPS 协议。

4. 检查小程序和网页的兼容性

确保你使用的小程序基础库版本支持 webview 的 message 事件。你可以在小程序开发工具的“详情”中查看基础库版本。

5. 调试和日志

在网页和小程序中添加调试日志，确保消息发送和接收的逻辑都正确执行。例如：

  • 在网页中，发送消息后打印日志：
console.log('Message sent:', { type: 'message', data: 'Hello from WebView' });
window.parent.postMessage({ type: 'message', data: 'Hello from WebView' }, '*');
  • 在小程序中，接收消息后打印日志：
handleMessage(event) {
  console.log('Received message from WebView:', event.detail.data);
}

6. 检查 webview 的 src 是否正确

确保 webview 的 src 属性正确指向你要加载的网页，并且网页加载成功。

7. 检查小程序权限

确保小程序已经配置了 webview 的相关权限，例如在小程序的 app.json 中配置 web-view 组件的权限。

8. 使用 uni.postMessage 和 uni.onMessage

如果你使用的是 Uni-app 的 web-view 组件，可以尝试使用 uni.postMessage 和 uni.onMessage 来进行通信。例如：

在网页中：

uni.postMessage({
  data: 'Hello from WebView'
});

在小程序中：

uni.onMessage(res => {
  console.log('Received message from WebView:', res.data);
});
回到顶部