H5于原生APP交互封装（这里用vue，其他同理）

原创

于 2019-05-10 16:58:09 发布 · 2.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #H5与原生交互

本文介绍了如何在APP中嵌套H5页面，并实现H5与原生APP之间的交互。通过创建DeviceType.js和utilityApi.js文件进行环境判断和交互方法封装，确保方法调用的一致性。在H5中使用bannerClick(id)方法调用原生的jumpBanner(id)方法，注意URL参数的编码处理和iOS中window.webkit.messageHandlers的坑，需要传递null作为参数。最后，在Vue项目中定义全局指令实现交互，强调交互前需与Android和iOS团队协调变量和方法名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目要求APP中要嵌套H5的页面。

首先，创建两个JS文件，便于区分管理

1、DeviceType.js用于判断环境是Android还是IOS

export const DeviceType=(()=>{
    var u = navigator.userAgent;
    if (u.match(/Android/i) != null) {
        return "Android";
    } else if (u.match(/iPhone|iPod|ios/i) != null) {
        return "IOS";
    }
})()

2、utilityApi.js 再创建一个文件用于封装与android和ios交互的方法，保证统一并且易于管理。要引入DeviceType.js