小程序与内嵌网页的数据通信

news2025/1/8 15:29:41

小程序与内嵌网页的数据通信

前言

微信小程序提供了web-view组件，允许开发者在小程序中嵌入网页。然而，由于小程序和网页运行在不同的环境中，它们之间的通信就需要依赖特定的机制来实现。然而我们日常的需求中，很多的时候都涉及到小程序内嵌网页和小程序之间进行数据通信的情况。这篇文章是我自己总结的微信小程序与内嵌web-view中网页通信的一些方法。

小程序向内嵌网页传递数据

通过修改web-view的src属性：可以在src中附加参数，然后在网页中解析这些参数（这种方式的操作类似于在网页中嵌入 iframe）。例如

<web-view src="{{url}}"></web-view>

url: https://www.a.com?id=123&name=456

或者在小程序中设置url时，可以附加参数：

this.setData({
  url: `${this.data.url}?param=value`
});

网页向小程序传递数据

使用wx.miniProgram.postMessage：在H5页面中，可以使用wx.miniProgram.postMessage向小程序发送消息。例如：

wx.miniProgram.postMessage({
  data: { message: 'Hello from H5' }
});

在小程序中，需要在web-view组件上绑定bindmessage事件来接收消息:

<web-view bindmessage="getMessage"></web-view>

小程序的JavaScript中处理消息：

Page({
  getMessage(e) {
    console.log(e.detail.data); // 获取到的消息数组
  }
});

注意，消息只有在特定时机（如小程序后退、组件销毁、分享等）才会被触发。比如说：

H5刷新本页：wx.miniProgram.redirectTo
H5 页面跳转：wx.miniProgram.navigateTo
H5回退页面：wx.miniProgram.navigateBack

如果不加这些具体的操作，我们在微信开发者工具端会收到这样的一个信息

invokeAppService postMessage {message: "Hello from H5"} 2

并没有收到相对应的message事件打印的内容,然后我们修改代码：

wx.miniProgram.postMessage({
  data: { message: 'Hello from H5' }
});
wx.miniProgram.navigateBack();

不出意外的话会得到我们想要的结果，但是有些时候还是会出意外？就是当我们添加了当前带 web-view 的页面为编译页面的时候，使用了 wx.miniProgram.navigateBack();依旧会的得到invokeAppService postMessage {message: "Hello from H5"} 2这样的结果。

我们只需要略微调整即可:

const $button = document.getElementById('btn')
$button.addEventListener('click', () => {
  wx.miniProgram.postMessage({
    data: { message: 'Hello from H5' }
  });
  wx.miniProgram.redirectTo({
    url: '/pages/Test/WorkWebView/WorkWebView'
  })
})