Uniapp 与 H5 在 App 端的交互

一、整体调用逻辑框架

Uniapp 开发的 App 中嵌入 H5 页面（通过 web-view 组件）时，二者的交互核心围绕 Uniapp 向 H5 传值/触发方法 、H5 向 Uniapp 通信 两层，其中 Uniapp 侧对 web-view 元素的操作是关键枢纽。

二、Uniapp 侧核心逻辑（获取 web-view 元素 + 传值/触发方法）

获取 web-view 元素
- 核心方式：通过 uni.createSelectorQuery() 获取 web-view 组件的 DOM 节点（需在组件挂载完成后执行，如 onReady/mounted 生命周期）。
- 关键代码逻辑：
  javascript 复制代码
```
// 1. 创建选择器查询对象
const query = uni.createSelectorQuery().in(this); 
// 2. 定位 web-view 元素（通过 ref 或类名/ID）
query.select('#web-view-id').fields({ node: true, size: true }).exec((res) => {
  if (res[0]) {
    this.webViewElement = res[0].node; // 缓存 web-view 元素，供后续操作
  }
});
```
- 注意点：in(this) 必须加（指定组件上下文），否则在自定义组件中无法获取元素；需确保 web-view 已渲染完成（避免异步获取不到）。
向 H5 传值/触发 H5 方法

Uniapp 向 H5 通信的核心是 evalJS 方法（仅 App 端支持），通过该方法执行 H5 页面的 JS 代码，实现传值或触发方法：
- 传值逻辑：将参数序列化（如 JSON.stringify）后，拼接到 H5 方法调用的代码字符串中，通过 evalJS 执行。
  javascript 复制代码
```
// 假设 H5 页面有全局方法 receiveDataFromUniapp
const data = { id: 1, name: 'test' };
// 缓存的 web-view 元素调用 evalJS
this.webViewElement.evalJS(`receiveDataFromUniapp(${JSON.stringify(data)})`);
```
- 触发 H5 方法逻辑：直接通过 evalJS 执行 H5 全局方法名，无需传值时简化为：
  javascript 复制代码
```
this.webViewElement.evalJS(`triggerH5Method()`);
```
- 边界处理：若传值包含特殊字符（如引号），需做转义；H5 侧方法必须挂载到 window 全局对象上，否则 Uniapp 无法调用。

三、H5 侧响应逻辑（辅助 Uniapp 交互）

H5 需提前定义全局方法（供 Uniapp 调用）：

javascript 复制代码

// H5 页面
window.receiveDataFromUniapp = function(data) {
  // 处理 Uniapp 传递的参数
  console.log('来自Uniapp的数据：', data);
};

window.triggerH5Method = function() {
  // 执行 H5 自身业务逻辑
};

H5 向 Uniapp 通信（补充）：通过 uni.postMessage（小程序/App 通用）或 App 端 plus.webview.postMessage，但核心交互仍以 Uniapp 主动操作为主。

四、关键总结

Uniapp 端获取 web-view 是前提：依赖 selectorQuery，需在组件渲染完成后执行，且需指定上下文 in(this)。
传值/触发方法的核心是 evalJS：通过执行 H5 全局 JS 方法实现通信，参数需序列化避免语法错误。
H5 端需暴露全局方法：方法必须挂载到 window 上，否则 Uniapp 无法通过 evalJS 调用。
仅 App 端生效：evalJS 是 Uniapp 针对 App 端 web-view 的特有 API，H5/小程序端需用其他方式（如 postMessage）。