Uniapp APP 内嵌 WebView 的 H5 与 APP 相互通讯及动态传参代码实例

在移动应用开发中，Uniapp 作为一个跨平台的开发框架，经常会遇到需要在 APP 中内嵌 WebView 来展示 H5 页面，并实现 H5 与 APP 相互通讯以及动态传参的需求。本文将通过一个具体的代码实例来详细介绍这一过程。

在 Uniapp 项目中，我们需要引入相关的插件来支持 WebView 的使用。通过配置相关的参数，创建一个 WebView 组件，并设置其相关的属性，如链接地址、加载方式等。

在 H5 页面中，我们可以通过 JavaScript 的 postMessage 方法向 APP 发送消息。例如：

window.postMessage({ type: 'customMessage', data: 'Hello from H5' }, '*');

在 Uniapp 的 APP 端，我们需要在 WebView 的相关回调函数中接收 H5 发送过来的消息。通过监听 onMessage 事件，获取到 H5 传递过来的数据，并进行相应的处理。

webview.addEventListener('message', function(event) {
  const message = event.data;
  // 处理接收到的消息
  console.log('Received message from H5:', message);
});

而要实现 APP 向 H5 传递参数，我们可以在加载 H5 页面时，通过 URL 携带参数的方式进行。例如：

const url = 'http://your-h5-page.com?param1=value1&param2=value2';
webview.loadUrl(url);

在 H5 页面中，通过解析 URL 获取传递的参数。

const urlParams = new URLSearchParams(window.location.search);
const param1Value = urlParams.get('param1');
const param2Value = urlParams.get('param2');

通过以上的代码实现，我们就能够在 Uniapp APP 内嵌的 WebView 中的 H5 页面与 APP 之间进行有效的相互通讯和动态传参。这在实际开发中具有广泛的应用场景，比如在电商应用中，H5 页面可以根据 APP 传递的用户信息展示个性化的内容，或者 APP 接收 H5 页面的操作反馈进行相应的处理。

掌握 Uniapp APP 内嵌 WebView 的 H5 与 APP 相互通讯及动态传参的技术，能够为我们开发更加丰富和灵活的移动应用提供有力的支持，提升用户体验和应用的功能性。