H5端向App端通信（Uniapp 必会）

在开发中，H5端向App端的通信是一个常见且重要的需求。本文将介绍如何使用uniapp实现H5端向App端的通信，解决WebView嵌套导致的通信问题。

需求场景

App端支付成功后，通过第三方链接跳转到H5端的支付结果页面。然后在H5端结果页面点击“完成”按钮，回到App端的订单列表页。如果没有实现通信，WebView可能会陷入嵌套问题。

实现方案

1. App端接收消息

在App端通过 webview 组件加载H5页面。在 webview 组件的 message 事件中，接收来自H5端发送的消息，完成通信。

<!-- App端接收消息 -->
<web-view :src="url" @message="listenMess"></web-view>

<script>
methods: {
  listenMess(e) {
    console.log('接收到的消息：' + JSON.stringify(e));
    // 跳转订单页
    if (e.detail.data[0].action === 'order') {
      uni.switchTab({
        url: `/pages/order/index`
      });
    }
  }
}
</script>

2. H5端发送消息

在H5端页面中，首先引入依赖文件 uni.webview.1.5.6.js，然后使用 postMessage 方法发送消息到App端。

<!-- H5端发送消息 -->
<button @click="navBack">完成</button>

<script>
import web from '@static/js/uni.webview.1.5.6.js';

methods: {
  navBack() {
    web.webView.postMessage({
      data: {
        action: 'order'
      }
    });
  }
}
</script>

总结

通过上述方式，H5端可以向App端发送消息并触发相应的操作。这样可以避免WebView嵌套的问题，实现顺畅的通信。希望这篇文章对你有所帮助！