php通过jsbridge,浅谈JSBridge

1 JSBridge在Hybrid开发中的作用

JSBridge是连接Native(客户端)和JavaScript前端的桥梁，通过JSBridge 两端的代码才可以通信。

简单的说，JSBridge 一方面给js提供了调用native的方法，而反过来，它也承接了native调用js事件队列的封装。JSBridge构建了js和native之间的通信，而且是双向的。

注：scheme协议：可以简单理解为自定义的url

形式如：[scheme:][//domain][path][?query][#fragment]

举个栗子：jsbridge://openPage?url=https://www.baidu.com/

2 js调用native的方法

2.1 native通过拦截约定好的scheme协议 去执行一些native的方法

约定固定格式的scheme协议，例如：[customscheme:][//methodName][?params={data, callback}]

customscheme：自定义需要拦截的scheme

methodName：需要调用的native的方法

params：传递给native的参数 和 回调函数名

复制代码

Native在监听到这种地址之后，就不会加载内容，而是执行相应的某段逻辑。

发起这样一个网络请求有两种方式：1. 通过localtion.href；2. 通过iframe方式； 通过location.href有个问题，就是如果我们连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。

所以更稳妥的方式是通过iframe, 简单的例子如下：

var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';

var iframe = document.createElement('iframe');

iframe.style.width = '1px';

iframe.style.height = '1px';

iframe.style.display = 'none';

iframe.src = url;

document.body.appendChild(iframe);

// 100毫秒后移除

setTimeout(function() {

iframe.remove();

}, 100);

复制代码

然后Webview就可以拦截这个请求，并且解析出相应的方法和参数。

2.2 通过在webview中挂载到全局对象上的对象方法来调用native的方法

举个栗子：window.JSBridge.openPage("https://www.baidu.com")

native注入到webview全局对象为JSBridge，通过全局对象JSBridge 可以调用挂载在其上的方法，来触发调用native的方法。

注：

也就是说，在native的开发中，开发者可以给webview注入全局变量并挂载在window对象上，这样前端js就可以通过window上全局对象方法 来调用一些native的方法。

前端需要去了解这个全局对象，是在webview初始化时候注入的，还是在页面加载完之后注入的，也就是同步注入还是异步注入的问题

如果是异步注入的，则需要前端的代码中，添加对象的ready监听机制

2.3 android webview还会拦截 js调用的alert、confirm、prompt方法

通过在js里使用这三个方法 也能进行js对native的通信,一般是prompt，前端不咋用

3 native调用js的方法

3.1 IOS

ios可以通过webview的evaluateJavaScript:completionHandler方法，该方法返回js脚本的执行结果。

// Swift

webview.stringByEvaluatingJavaScriptFromString("Math.random()")

可以看到它就是调用了window下的一个对象(执行了Math.random()方法)，所以如果我们要让native来调用js写的方法，就要让这个方法在window下能访问到。

复制代码

3.2 Android

android可以通过webview的loadUrl()去调用js代码，也可以使用evaluateJavascript()来调用js代码

android中evaluateJavascript的使用比loadUrl更高效 也更简洁，唯一不好的是 需要android 4.4以上的版本支持

4 JSBridge如何引用

4.1 由 Native 端进行注入

注入方式和 Native 调用 JavaScript 类似，直接执行桥的全部代码。

它的优点在于：桥的版本很容易与 Native 保持一致，Native 端不用对不同版本的 JSBridge 进行兼容；与此同时，它的缺点是：注入时机不确定，需要实现注入失败后重试的机制，保证注入的成功率，同时 JavaScript 端在调用接口时，需要优先判断 JSBridge 是否已经注入成功。

4.2 由 JavaScript 端引用

直接与 JavaScript 一起执行。

与由 Native 端注入正好相反，它的优点在于：JavaScript 端可以确定 JSBridge 的存在，直接调用即可；缺点是：如果桥的实现方式有更改，JSBridge 需要兼容多版本的 Native Bridge 或者 Native Bridge 兼容多版本的 JSBridge。

参考资料

JSBridge的原理

Hybrid开发中JSBridge的实现

本文使用 mdnice 排版