为什么使用jsbridge
2021-08-27 本文已影响0人
Rose_yang
在移动开发中，我们必不可少需要使用Web来代替部分Native，也就是业内所说的Hybrid App。
一、基本信息介绍
Ios 和 Android两种终端与Javascript的通信机制有些不同：
- Ios 机制：
（1）Native可直接调用Js，并可直接获取Js的返回值（这点与Android不同）
（2）Js不能直接调用Native，但可以通过反向调用，流程就是先将消息临时存储在Js端，然后通知Native反向调用获取消息内容
（实现原理是利用 shouldStartLoadWithRequest，就是Web的所有URL请求都会触发Native的行为）
- Android 机制：
（1）Native可直接调用Js，但不可直接获取Js的返回值（这点与Ios不同）
（2）Native注册addJavascriptInterface 后，Js 可直接调用Native的接口，并获取Native的返回值
（3）通过 shouldOverrideUrlLoading，也还是拦截Web的所有URL请求来达到通信的目的
二、存在的问题：
- Android addJavascriptInterface 的风险，可见乌云报道 ，简单的说法就是：通过反编译获取Native注册的Js对象，然后在页面通过反射Java的内置静态类，获取一些敏感的信息和破坏（api17已经采用@JavascriptInterface限制Js调用Native,但是历史版本还是存在风险问题)
三、最终采取的Js Bridge方案：
1. github上一篇 https://github.com/marcuswestin/WebViewJavascriptBridge
该项目提供了Ios上与Js通信的方案，原理如下：
（1）初始化创建的一个style.display=none 的iframe,并将iframe.src设置为自有协议，每次Js需要与Native通信时，Js端主动调用iframe.src即可，Native收到请求通知后，反向调用fetchQueue(可见源码)获取消息内容；若Native需要与Js通信，直接调用Js，并获取返回值
（2）Js——>Native：
Js将要发送的消息存放在Js端——>调用iframe.src，触发通知Native——>Native拦截请求，调用Js bridge里面的fetchQueue并获取返回的消息内容，处理消息——>将需要返回的数据通过直接调用Js的方式，让Js处理
（3）Native——>Js:
Native可直接调用Js并获取返回的内容
2. 移植到Android：
（1）由于上面的一2（1）限制，上面三1 （2）直接获取Js的返回值在Android上走不通，代替的方案是通过 shouldOverrideUrlLoading 携带Js的返回值
（2）其他流程与Ios一致
（3）移植的Android 代码github 地址：https://github.com/jacin1/JsBridge
