JSBridge原理解析——以WebviewJavascriptBridge实现方式为例
发布网友
共1个回答
热心网友
JSBridge是一种webview与native端进行通信的手段。通过JSBridge，webview可以通过jsb调用native的能力，而native端也可以通过jsb在webview上执行逻辑。以WebviewJavascriptBridge为例，解析其实现方式：
在JSBridge中，主要通过拦截URL请求实现native端与webview端的通信效果。WebviewJavascriptBridge是一个较为流行的实现方式，其源码地址为：github.com/marcuswesti...
实现JSBridge的关键步骤包括：
1. 注册Bridge：在webview侧和native侧分别注册bridge，通过一个对象储存所有函数。
2. 初始化代码注入：在webview内部注入初始化代码，此代码执行关键操作。
3. 监听URL请求：在iOS中，如WKWebview，监听URL请求进行相关处理。
4. webview调用native能力：当webview与native端注册桥后，双方可以互相调用。具体过程包括webview调用、native接收、执行响应。
5. native调用webview能力：与webview调用相反，native主动调用JS侧方法。
具体步骤如下：
2-4-1：webview侧调用native，通过callHandler生成message并推入队列，更改iframe src。
2-4-2：native侧处理消息队列，检测iframe src变化，执行WKFlushMessageQueue获取message。
2-4-3：webview侧处理来自native的消息，根据responseId执行回调函数。
过程总结如下图所示。
通过这种方式，JSBridge实现了webview与native端的高效通信，为跨平台应用提供了便利。
