uniapp APP中内嵌webview的H5与APP相互通讯动态传参代码示例

在uni-app中，如果你想要在内嵌的Webview与App之间进行通信，可以使用uni.postMessage方法从Webview向App传递消息，同时使用uni.onMessage方法来监听这些消息。以下是实现这一通信的代码示例：

Webview向App发送消息

在H5页面中，可以使用以下代码向App发送消息：

// 向App发送消息
uni.postMessage({
  data: {
    type: 'someEvent',
    content: 'Hello from H5!'
  }
});

App监听Webview发送的消息

在uni-app的Vue组件中，可以这样监听来自Webview的消息：

export default {
  data() {
    return {
      // ...
    };
  },
  mounted() {
    this.listenWebviewMessage();
  },
  methods: {
    listenWebviewMessage() {
      uni.onMessage(message => {
        console.log('Received message from Webview:', message);
        // 处理消息
        if (message.data.type === 'someEvent') {
          // 根据消息类型做出相应的处理
          alert(message.data.content);
        }
      });
    }
  }
};

注意事项

1. uni.postMessage和uni.onMessage是uni-app框架提供的方法，用于实现Webview与App之间的通信。

2. 在实际应用中，你可能需要根据实际需求来处理不同类型和不同内容的消息。

3. 确保在组件的适当生命周期钩子（如mounted）中设置消息监听，以便在组件创建后立即开始监听消息。

4. 如果你需要从App向Webview发送消息，可以使用uni.postMessage的Webview版本，即在App的页面中调用uni.postMessage，参数与Webview向App发送消息时相同。

以上代码仅作为一个简单的示例，实际应用中可能需要根据具体需求进行调整和扩展。