Uniapp 与 H5 在 App 端的交互

一、整体调用逻辑框架

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

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

1. 获取 web-view 元素

   • 核心方式：通过 uni.createSelectorQuery() 获取 web-view 组件的 DOM 节点（需在组件挂载完成后执行，如 onReady/mounted 生命周期）。

   • 关键代码逻辑：

     // 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 已渲染完成（避免异步获取不到）。

2. 向 H5 传值/触发 H5 方法

   Uniapp 向 H5 通信的核心是 evalJS 方法（仅 App 端支持），通过该方法执行 H5 页面的 JS 代码，实现传值或触发方法：

   • 传值逻辑：将参数序列化（如 JSON.stringify）后，拼接到 H5 方法调用的代码字符串中，通过 evalJS 执行。

     // 假设 H5 页面有全局方法 receiveDataFromUniapp
     const data = { id: 1, name: 'test' };
     // 缓存的 web-view 元素调用 evalJS
     this.webViewElement.evalJS(`receiveDataFromUniapp(${JSON.stringify(data)})`);

   • 触发 H5 方法逻辑：直接通过 evalJS 执行 H5 全局方法名，无需传值时简化为：

     this.webViewElement.evalJS(`triggerH5Method()`);

   • 边界处理：若传值包含特殊字符（如引号），需做转义；H5 侧方法必须挂载到 window 全局对象上，否则 Uniapp 无法调用。

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

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

   // H5 页面
   window.receiveDataFromUniapp = function(data) {
     // 处理 Uniapp 传递的参数
     console.log('来自Uniapp的数据：', data);
   };
   
   window.triggerH5Method = function() {
     // 执行 H5 自身业务逻辑
   };

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

四、关键总结

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