《成为大前端》系列 - 4.1 Native与JS通信 - 认识 JS 调用 Native

这里介绍一下 JS 调用 Native 是怎么回事

JS 调用 Native

JS 调用 Native 分两部分：

• JS 端的代码
• Native 端提供的 JS 接口

JS 如何调用到 Native，简单来说是 JS 引擎提供的一种方式。其实平常使用浏览器时，我们一直在调用 native 的代码，比如：

console.log("Hello word");

我们在 chrome 的调试工具下，直接打印 console.log 这个方法本身，会出现如下图：

说明 log 方法本身就是一个 native 方法，通常是由 C++写成的，在引擎启动时就已经添加了 console 的相关方法

WebView 中 JS 调用 Native 的通道

可以预先了解一下，如下

iOS

let data = ...
window.webkit.messageHandlers.someHandler.postMessage(data)

Android

window.someAndroidObj.someFunc("hello world");

也就是说 WebView 启动时客户端就已经向 JS 中预置了以上方法，预置的方法方式 Android 和 iOS 各不相同。 详情请看接下来的 Android/iOS 的 Native 与 JS 通信章节。