App 原生和 js 通信 WebViewJavascriptBridge 原理

539 阅读1分钟

由于使用的比较多,所以扒拉下源框架 github.com/lzyzsd/JsBr… 源码, 梳理了下其实现原理。

无论是 Android 还是 iOS 核心思想都是,前端 js 加载指定的 url,原生端对该 url 进行拦截并触发相应的操作。比如初始化时候,js 端通过iframe 请求 https://bridge_loaded 来触发 App 加载包内的 js 注入到webview,包内的js代码主要是将一些通信使用的方法挂载到 window 上作为全局对象以供后续通信使用。

查看源码主要按 2 个方向进行 一,js 如何调用 App 方法及传递数据 二,App 如何调用 js 方法触发网页端的方法或功能

主要流程图大致如下

image.png