简易理解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端进行监听

<script>
    window.showWebDialog = text => window.alert(text);
</script>

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

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

方式1.png

3.1、URL schema介绍

URL schema 是类URL的请求格式，如：
<protocol>://<domain>/<path>?<query>

接下来可以自定义通信的URL schema，如：
jsbridge://<method>?<params>
jsbridge://showToast?text=hello&a=b

3.2、发送URL schema请求

请求自定义URL Schema方法：
jsbridge://showToast?text=

向Native端发起请求：

<script>
    function showNativeDialog(text) {
        window.alert('jsbridge://showToast?text=' + text);
    }
</script>

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代码：

<script>
    function showNativeDialog(text) {
        //window.alert('jsbridge://showToast?text=' + text);
        window.NativeBridge.showNativeDialog(text);
    }
</script>

五、总结

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

最后编辑于：2020.05.15 14:10:13