php通过jsbridge,简易理解JSBridge实现原理

一、JSBridge介绍

1.1、定义

JSBridge是什么？JSBridge是一种桥接器，通过JS引擎或Webview容器为媒介 ，约定协议进行通信，实现Native端和Web端双向通信的一种机制。

JSBridge原理.png

顾名思义，JSBridge的作用就是让native可以调用web的js代码，让web可以调用原生的代码，实现数据通信，它在做native代码和js代码相互转换的事情。

实现数据间的通讯关键是以下两点：

将Native端的接口封装成js接口

将Web端js接口封装成原生接口

1.2、为什么是‘JS’Bridge

因为Web端支持JavaScript，而Native(iOS/Android)端的Webview控件对JavaScript也有所支持，页面加载完成后调用页面的JavaScript代码。

1.3、应用场景

它有什么用？我们在使用混合开发模式(Hybrid App)混合使用Native和Web技术用到。例如目前的使用此技术的主流框架React Native、Weex、微信小程序等

二、JSBridge实现 —— Native端调用Web端代码

WebView是Native中加载网页的一个控件，该组件提供一个evaluateJavascript()方法运行JS代码。我们要做的是在Native端执行一个js方法，在Web端进行监听。

2.1、执行一段JS代码

webView.evaluateJavascript("window.showWebDialog('123')",null);

2.2、Web端进行监听

window.showWebDialog = text => window.alert(text);

三、JSBridge实现 —— Web端调用Native端代码(拦截URL Schema)

当Web端要请求Native端的方法时，我们首先要自定义一个URL Schema，向Native端发起一个请求，最后在Native端的WebView进行监听，下面我们看看具体实现：

方式1.png

3.1、URL schema介绍

URL schema 是类URL的请求格式，如：

:///?

接下来可以自定义通信的URL schema，如：

jsbridge://?

jsbridge://showToast?text=hello&a=b

3.2、发送URL schema请求

向Native端发起请求：

function showNativeDialog(text) {

window.alert('jsbridge://showToast?text=' + text);

}

3.3、Native端实现监听：

webView.setWebChromeClient(new WebChromeClient() {

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

if (!message.startsWith("jsbridge://")) {

return super.onJsAlert(view, url, message, result);

}

UrlSchema urlschema = new UrlSchema(message);

if ("showToast".equals(urlchema.getMethodName())) {

String text = urlschema.getParams("text");

Toast.makeText(mContext, text, Toast.LENGTH_LONG).show();

}

result.confirm();

return true;

}

}

四、JSBridge实现 —— Web端调用Native端代码(注入api)

注入API 方式的是Native端通过 WebView 提供的接口，向 JavaScript 的 Context(window)中注入对象。在Web中通过注入的对象调用Native方法。

注入api.png

4.1、向WebView注入JS对象

创建一个JS对象，并实现监听的方法

class NativeBridge{

private Context context;

NativeBridge(Context context){

this.context = context;

}

@JavascriptInterface

public void showNativeDialog(String text){

Toast.makeText(context,text,Toast.LENGTH_LONG).show();

}

}

Native端通过WebView的接口注入JS对象

webView.addJavascriptInterface(new NativeBridge(mContext),"NativeBridge");

4.2、通过注入的JS对象调用Native代码

Web中获取JS对象，调用Native代码：

function showNativeDialog(text) {

//window.alert('jsbridge://showToast?text=' + text);

window.NativeBridge.showNativeDialog(text);

}

五、总结

拦截URL 方式本质是传递一个字符串，所以会有长度限制，而注入Api的方式显得更直观。本文章只是列举核心方法进行简单介绍，从而明白轮子是怎么造的。因为实际开发中过程是更复杂的，可以使用成熟的框架。