(转)Vue 与原生 App 跨端通信：安卓、iOS、鸿蒙通用方

2025-08-31 本文已影响0人缘之空_bb11

在混合开发中，Vue 页面与原生 App 的通信是绕不开的核心需求。无论是原生调用 Vue 方法，还是 Vue 触发原生功能，都需要一套清晰的通信机制。今天就为大家梳理一套适用于安卓、iOS、鸿蒙三大平台的通用方案，附具体实现代码。

一、原生 App 如何调用 Vue 方法？

要让原生 App 能调用 Vue 中的方法，关键是将 Vue 方法挂载到 window 对象上，让原生端可以直接访问。

1. Vue 端：定义方法并暴露到 window
在 Vue 组件中，先定义需要被原生调用的方法，然后挂载到 window 全局对象：

// 定义供原生调用的方法
const appToVueFn = (param) => {
  console.log('收到原生传递的参数：', param);
  // 处理逻辑：如更新页面数据、触发组件方法等 
  // 可选：返回数据给原生   
  return {
    status: 'success', data: 'Vue 已处理'
  };
  // 挂载到 window，供原生调用
  window.appToVueFn = appToVueFn;