JsBridge基本用法

前言

现在流行Hybrid App，即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),但是相比原生APP，性能仍然有较大的损耗，不适合交互性强或者性能要求较高的APP（比如动画较多的），JSBridge是H5与Native通信的桥梁

现有的库：https://github.com/marcuswestin/WebViewJavascriptBridge

流程：

 

1. 上图的 url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的

2.  具体为可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),然后系统会进行判断,如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app，需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)

3.  而本文JSBridge中的url scheme则是仿照上述的形式的一种方式

4.  具体为,app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等

现在简单介绍JsBridge基本用法，把下面的代码copy到你的js中就可以了：

function setupWebViewJavascriptBridge(callback) { 
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } 

    //和ios通信的方法
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } 
    window.WVJBCallbacks = [callback]; 
    var WVJBIframe = document.createElement('iframe'); 
    WVJBIframe.style.display = 'none'; 
    WVJBIframe.src = 'https://__bridge_loaded__'; // 自定义url
    document.documentElement.appendChild(WVJBIframe); 
    setTimeout(function() { 
        document.documentElement.removeChild(WVJBIframe)； 
    }, 0) 

    //和Android通信的方法
    if (window.WebViewJavascriptBridge) { 
        callback(WebViewJavascriptBridge) 
    } else { 
        document.addEventListener( 'WebViewJavascriptBridgeReady' , function() {     
            callback(WebViewJavascriptBridge) }, false ); 
        });
    }

}

setupWebViewJavascriptBridge(function(bridge) { 
    //注册一个方法（方法名是“a”），客户端进行调用（方法名也是“a”），responseCallback是回调函数         
    bridge.registerHandler('a', function(data, responseCallback) { 
        console.log("a called with:", data); 
        responseCallback(data);
        //可以写自己想要的代码 。。。。。
    }) 
    //客户端已经注册好一个名为“b”的方法，H5直接进行调用（方法名也为“b”）就行，调用的时候可以传客户端需要的参数 
 
    bridge.callHandler('b', {'key':'value'}, function responseCallback(responseData) { 
        console.log("JS received response:", responseData) }) 
})