在混合开发中，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;
-
原生端调用方式
06a43844-fcc2-4d2c-868a-3c7b4aa45829.png
0fb5f8a8-ae0f-4b4f-8b45-d7693fd09b97.png
1170c76b-1ca0-454f-ae03-cd075062bac8.png
二、Vue 如何调用原生 App 方法？
Vue 调用原生方法的核心是：原生端先注册一个全局接口，Vue 端通过 window 访问该接口。
07fe4202-31c3-4a4c-af11-a109ab5be401.png
04c5fa39-eada-4ce9-b7aa-933a0231453e.png
ac88a815-9f2f-4301-bb8c-6c207ca9b3a3.png
0e707ed8-45b2-4f8b-961a-daf06b5a34c3.png
三、关键注意事项
参数传递规范
建议始终使用 JSON 字符串传递参数（JSON.stringify/JSON.parse），避免因数据类型差异（如数组、对象）导致解析错误。安全限制
- 安卓 addJavascriptInterface 在 API < 17 存在安全漏洞，需确保系统版本或限制方法权限；
- 原生接口只暴露必要方法，避免敏感操作（如文件删除、系统设置）被滥用。
- 兼容性处理
不同平台的 UserAgent 可能存在差异，建议在实际项目中通过更精确的规则判断平台。
