JSBridge

背景

原生APP虽然稳定，但是迭代比较慢，发版的时候需要商店审核，同个功能在不同端需要写两套代码（这里主要是ios系统和安卓系统），但是随着H5的发展，原生APP内核中支持用webview打开H5页面，所以了混合APP的诞生了。这时候H5和原生APP的通信成了需要解决的问题，JSBridge应运而生。

定义

JSBridge是一种JS实现的H5和客户端交流的桥梁的方法统称，解决两者的通信问题，可以让H5调用原生APP的API，如查看相册、扫码等能力，原生APP可以调用H5中定义的方法。它更多的是一种称呼，实现方法并不是固定的。

APP与H5通信

p.s. 以下客户端代码仅供理解大概原理，写法上并不一定完全正确。

安卓

安卓调用H5中的方法

这里要区分版本号，在4.4版本之前：

// 获得当前的WebView对象
mWebView = new WebView(this);
// 调用H5中的方法
mWebView.loadUrl("javascript:方法名('参数1, 参数2...')");
1
2
3
4

如果是4.4版本之后：

mWebView = new WebView(this);
mWebView.evaluateJavascript("javascript:方法名('参数1, 参数2...')", new ValueCallback(){
  @Override
  // 当H5的方法触发完毕之后，就会调用这个方法，value即H5方法的返回值
  public void onReceiveValue(String value) {
  
  }
})

1
2
3
4
5
6
7
8
9

从上面不能看出4.4版本之后的调用多了个回调函数结果的返回~

H5调用安卓中的方法

首先需要先在安卓中定义一些方法供H5使用：

private Object getJSBridge(){
  Object insertObj = new Object(){
    // @JavascriptInterface
    public String foo(){
      return 'foo';
    }
    
    // @JavascriptInterface
    public String foo2(final String param){
      return 'foo2:' + param;
    }
  }
   
  // 定义了一个实例化对象，内含两个方法
  return insertObj;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 获取WebView的设置对象
WebSettings webSettings = mWebView.getSettings();
// 设置Android运行JS脚本
webSettings.setJavaScriptEnabled(true);
// 暴露一个叫做JS的对象到WebView的全局环境
mWebView.addJavascriptInterface(getJSBridge(), 'JSBridge');
1
2
3
4
5
6

接下来在H5中调用：

window.JSBridge.foo();
window.JSBridge.foo2('test');

1
2
3

IOS

IOS调用H5中的方法

先在H5中定义函数：

function changeBgColor(){
  document.body.style.backgroundColor = 'pink';
}
1
2
3

然后在IOS中调用：

class ViewController: UIViewController, WKNavigationDelegate {

  override func viewDidLoad(){
    super.viewDidLoad();
    
    // 让当前页面加载一个webview
    let webView = WKWebView(frame: self.view.bounds);
    webView.navigationDelegate = self;
    self.view.addSubview(webView);
    
    // 让webview加载我们指定的html
    let url = URL(string: "http://xxxx.com/index.html");
    let request = URLRequest(url: url!);
    webView.load(request);
  }
  
  
  // 当webview加载完成后触发
  func webView(_webView: WKWebView, didFinish navigation: WKNavigation!){
    // 调用H5中的代码
    webView.evaluateJavascript("changeBgColor()");
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

H5调用IOS中的方法

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

  override func viewDidLoad(){
    // ...
    
    // 为webview添加方法名检测
    wbeView.configuration.userContentController.add(self as WKScriptMessageHandler , name: "useNative");
  }
  
  
  // ...
  
  // 监听H5
  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("传来的数据源：", message.body);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在H5中调用：

document.querySelector('input').onclick = function(){
  // window.webkit.messageHandlers.【在IOS中定义的方法名】.postMessage
  window.webkit.messageHandlers.useNative.postMessage('hello world')'
}
1
2
3
4

URL Scheme

上述APP调用H5方法的行为可以叫做API注入，其实还有另一一种方法，借助的是URL scheme。

URL Scheme是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，但是可以自定义。比如微信的 scheme 以 'weixin://' 开头。

我们可以在H5中跳转定义好的URL Scheme，然后在原生APP中拦截他们做出相应的反应。以IOS和H5为例子：

document.querySelector('input').onclick = function(){
  // 创建iframe
  const iframe = document.createElement('iframe');
  // 设置URL scheme
  iframe.src = "armouy://click";
  // 设置尺寸
  iframe.style.width = 0;
  iframe.style.height = 0;
  // 添加到页面上
  document.body.appendChild(iframe);
  // 移除
  iframe.parentNode.removeChild(iframe);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在IOS中进行拦截：

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

  override func viewDidLoad(){
    // ...
  }
  
  
  // ...
  
  // 监听H5
  func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, descisionHandler:  @escaping (WKNavigationActionPolicy) -> Void) {
    // 获取URL
    let url = navigationAction.request.url?.absoluteString;
    if(url === "armouy://click") {
      // 做一些拦截处理
      // do someting
      descisionHandler(.cancel);
    }else {
      descisionHandler(.allow);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这种方式是早期使用的，优点是支持IOS6，缺点也很明显

• frame的链接长度有限制（有些方案为了规避 url 长度隐患的缺陷，在 iOS 上采用了使用 Ajax 发送同域请求的方式，并将参数放到 head 或 body 里。这样，虽然规避了 url 长度的隐患，但是 WKWebView 并不支持这样的方式。）；
• 创建请求会有耗时

不使用locaiton.href代替iframe.src的原因是：如果通过 location.href 连续调用 Native，很容易丢失一些调用。

JSBridge简易封装

从上面的API注入方式来看，还是不太灵活，所以在实际开发中，我们会封装一些代码：

// 是否是APP
const isApp(){
  const agent = window.navigator.userAgent.toLowerCase();
  // 这里要根据实际项目写正则去判断
  return true;
}

// 是否是IOS
const isIos(){
  return /ios|iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase())
}

// 是否是安卓
const isAndroid(){
  return /android/.test(window.navigator.userAgent.toLowerCase())
}

// 判断客户端是否注册了该方法
function canInvoke(method){
  try {
      // 这里的window.JSBridge不是固定的，取决于公司项目，我们前面定义的就是JSBridge
      if (this.isAndroid) return !!window.JSBridge[method]
      if (this.isIos) return !!window.webkit.messageHandlers[method]
      return false
    } catch (error) {
      console.warn('canInvoke-客户端未初始化jsBridge', error)
      return false
    }
}

// H5给APP发送信息
function postMessageToApp(options){
  try {
      const { method, data = {} } = options
      if (this.isIos) {
          window.webkit.messageHandlers[method].postMessage(data)
        } else if (this.isAndroid) {
          // 这里的window.JSBridge不是固定的，取决于公司项目，我们前面定义的就是JSBridge
          window.JSBridge(JSON.stringify(data))
        }
    } catch (error) {
      console.warn('postMessageToApp', error, options.method)
    }
}

// H5调用APP方法
function invokeNative(options) {
  if (!this.isApp) return console.warn('invokeNative', '非app环境')
  // 如果客户端已经注册了这些方法，那么就直接调用
  if (this.canInvoke(options.method)) {
    postMessageToApp(options);
  }else {
    // ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

// 这里的场景是H5调用APP的方法，并希望APP调用方法之后，通知H5，执行H5的回调方法
(function(){
  let id = 0;
  const callbacks = {};
  
  window.JSBridge = {
    // 调用原生方法
    invoke: function(method, callback, data = {}) {
      // 唯一ID
      const thisId = id++;
      callbacks[thisId] = callback;
      // 通过原生提供的对象调用原生功能
      invokeNative({
         method,
         data,
         callbackId: thisId
      })
    },
    
    // 接收原生消息
    receiveMessage: function(msg){
      const method= msg.method;
      const data = msg.data || {};
      const callbackId = msg.callbackId;
      
      if(callbackId && callbacks[callbackId]) {
        callbacks[callbackId](data);
      }else {
        // ...
      }
    }
  }
  
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

总结

理解JSBridge的作用，并粗略地介绍了APP和H5之间通信机制，最后封装了一个简易的JSBridge。

参考链接

• 小白必看，JSBridge 初探
• JSBridge实战
• H5 配合原生开发 App

---

如果错误欢迎指出，感谢阅读~