大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！

今天这篇文章算是分享一段uniapp的坑吧，H5端向App端通信的一种解决实现。

我感觉很有必要和没有遇到过的朋友们分享一下，下次用到的时候可以直接拿下，避免踩坑。

一、重点描述

先说说前置条件，我的App端和H5端都是用uniapp写的，H5端通过webview在App中加载，底层算是webview套webview了。

注意，如果H5端不是用uniapp写的，则考虑使用deeplink与App端进行通信。

再说说需求场景，App端支付成功后，通过第三方链接跳转到H5端支付结果页，然后在H5端结果页点击完成按钮，回到App端订单列表页，完成流程。

此时，如果H5端不与App端通信，就会陷入webview循化嵌套问题。

二、细节剖析

实现原理如图所示：

1、App端接收消息

通过webview组件加载H5页面，在webview组件的message事件中，接收到H5端发送的消息，并做App端的逻辑处理，完成通信接收。

2、H5端发送消息

在H5端页面中，先引入依赖文件：https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js，再通过postMessage方法发送消息到App端，完成通信发送。

注意，这里如果直接调用uni.postMessage方法时，可能会报错。所以先引入依赖文件再调用会比较可靠，避免踩坑。

好了，今天要分享的内容就是这么多，最后感谢朋友们给个点赞、分享、推荐，拜拜~