简易理解JSBridge实现原理

一、JSBridge介绍

1.1、定义

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

简易理解JSBridge实现原理_第1张图片
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端进行监听

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

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

简易理解JSBridge实现原理_第2张图片
方式1.png
3.1、URL schema介绍

URL schema 是类URL的请求格式,如:
:///?

接下来可以自定义通信的URL schema,如:
jsbridge://?
jsbridge://showToast?text=hello&a=b

3.2、发送URL schema请求

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

向Native端发起请求:


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方法。

简易理解JSBridge实现原理_第3张图片
注入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代码:


五、总结

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

你可能感兴趣的