Uniapp WebView 与 H5 通信的三种方式代码示例

在移动应用开发中，Uniapp 框架常常需要与 H5 页面进行通信，以实现数据交互和功能协同。下面将为您详细介绍 Uniapp WebView 与 H5 通信的三种常见方式，并提供相应的代码示例。

方式一：通过 URL 传递参数

在 Uniapp 中，可以通过在加载 H5 页面的 URL 中携带参数，将数据传递给 H5 页面。在 H5 页面中，可以通过解析 URL 获取参数。

Uniapp 代码示例：

let params = { key: 'value' };
let url = `yourH5PageUrl?${JSON.stringify(params)}`;
this.webview.loadUrl(url);

H5 代码示例：

function getUrlParams() {
  let params = new URLSearchParams(window.location.search);
  for (let [key, value] of params) {
    console.log(key + ': ' + value);
  }
}

方式二：使用 JavaScript 注入

Uniapp 可以通过向 WebView 注入 JavaScript 代码，在 H5 页面中执行，从而实现通信。

Uniapp 代码示例：

this.webview.evalJS('javascript:yourFunctionInH5("data")');

H5 代码示例：

function yourFunctionInH5(data) {
  console.log(data);
}

方式三：自定义协议

可以自定义通信协议，通过拦截特定的协议来处理通信。

Uniapp 代码示例：

this.webview.addEventListener('shouldStartLoadWithRequest', (event) => {
  if (event.url.startsWith('yourCustomProtocol:')) {
    // 处理通信逻辑
  }
});

H5 代码示例：

window.location.href = 'yourCustomProtocol:data';

通过以上三种方式，能够有效地实现 Uniapp WebView 与 H5 之间的通信，根据具体的业务需求和场景选择合适的方式，可以提高开发效率和应用的性能。

在实际开发中，还需要注意处理异常情况、数据格式的转换以及安全性等方面的问题，以确保通信的稳定和可靠。希望这些代码示例和介绍能够帮助您在 Uniapp 开发中顺利实现与 H5 的通信。