实现Uniapp微信小程序webview与h5通信以及踩坑记录

本文记录了菜鸟作者在使用uniapp开发项目时，遇到的众多问题其二：实现开发微信小程序的webview与h5页面的间接实时通信。

吐槽：不愧是大厂啊，就是这么财大气粗有个性。

前言

开发工具：

• HBuilderX 3.4.19
• Node.js v14.15.4
• uniapp v4.2.4

需求

在微信小程序中，通过webview加载h5页面，并实现webview与h5页面的间接实时通信。

踩坑记录

1. 使用uniapp自带的webview组件，无法直接实现webview与h5页面的通信。

2. 使用第三方webview组件，也无法直接实现webview与h5页面的通信。

3. 使用uniapp的postMessage API，可以实现webview与h5页面的通信，但是只能发送简单的数据类型，无法发送复杂的数据类型。

4. 使用uniapp的createWebViewContext API，可以实现webview与h5页面的通信，可以发送复杂的数据类型，但是需要在h5页面中主动调用uniapp的JSAPI，才能实现通信。

5. 使用uniapp的window.addEventListener API，可以实现webview与h5页面的通信，可以发送复杂的数据类型，并且不需要在h5页面中主动调用uniapp的JSAPI，但是需要在uniapp的js文件中手动实现通信逻辑。

解决方案

最终，我采用了第五种方案，使用uniapp的window.addEventListener API来实现webview与h5页面的通信。

在uniapp的js文件中，我手动实现了通信逻辑，如下：

// 在uniapp的js文件中
window.addEventListener('message', function(event) {
  const data = event.data;
  // 处理从h5页面传过来的数据
});

在h5页面中，我主动调用uniapp的JSAPI，向webview发送数据，如下：

// 在h5页面中
uni.postMessage({
  data: '这是从h5页面传过来的数据'
});

这样，就实现了webview与h5页面的间接实时通信。

总结

uniapp的webview组件虽然无法直接实现webview与h5页面的通信，但是可以通过使用uniapp的postMessage API、createWebViewContext API或window.addEventListener API来实现间接实时通信。

在实际开发中，我建议使用window.addEventListener API来实现webview与h5页面的通信，因为这种方式不需要在h5页面中主动调用uniapp的JSAPI，并且可以发送复杂的数据类型。