HybridApp之WebViewJavaScriptBridge

前言：为什么HTML5混合开发这么火

1. 在网页中可以看到三维立体特效，技术可以跨平台，适配多终端。成为企业的“宠儿”互联网的风向标，数据显示2016年使用HTML5技术游戏开发达到56.65%,企业级网页应用达到37.64%，营销推广达到77.95%。
2. 从开发成本上来说，开发一个HTML5移动站点要比开发一个原生APP的成本低出很多（你除了要开发一个Android应用之外，还需要开发一个iOS应用。）
3. HTML5最大的优势跨屏适配。从跨屏的角度来对比的话，原生应用包括Android、iOS等众多不同的手机系统应用，当手机用户需要使用该应用的时候，就需要下载与手机系统相对应的移动应用，但是如果是HTML5应用，用户只需要通过浏览器或者微信公众号等众多入口就能轻松访问。不仅仅只是手机，即便是在平板等其他智能硬件上，HTML5都能很好地自动适应每一个不同的屏幕，轻松实现跨屏。同时，这对企业运营来说也更加方便。

现有混合方案

Hybrid App，俗称混合应用，即混合了 Native技术 与 Web技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在UI渲染机制上的不同：

• 基于 WebView UI 的基础方案，市面上大部分主流 App 都有采用，例如微信JS-SDK，通过 JSBridge 完成 H5 与 Native 的双向通讯，从而赋予H5一定程度的原生能力。
• 基于 Native UI 的方案，例如 React-Native、Weex。在赋予 H5 原生API能力的基础上，进一步通过 JSBridge 将js解析成的虚拟节点树(Virtual DOM)传递到 Native 并使用原生渲染。
• 另外还有近期比较流行的小程序方案，也是通过更加定制化的 JSBridge，并使用双 WebView 双线程的模式隔离了JS逻辑与UI渲染，形成了特殊的开发模式，加强了 H5 与 Native 混合程度，提高了页面性能及开发体验。

以上的三种方案，其实同样都是基于 JSBridge 完成的通讯层，第二三种方案，其实可以看做是在方案一的基础上，继续通过不同的新技术进一步提高了应用的混合程度。因此，JSBridge 也是整个混合应用最关键的部分。

WebViewJavaScriptBridge

IOS

// IOS
// 互相调用都要加这个方法
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
 
    //注册一个方法（方法名是“registerJSmethod”），客户端进行调用（方法名也是“registerJSmethod”），responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log(data)
        responseCallback(data)
    })
 
    //客户端已经注册好一个名为“registerOCmethod”的方法，H5直接进行调用（方法名也为“registerOCmethod”）就行，调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})

Android

function connectWebViewJavascriptBridge (callback) { 
     if (window.WebViewJavascriptBridge) {
           callback(WebViewJavascriptBridge)
     } else {
           document.addEventListener(
               'WebViewJavascriptBridgeReady'
                , function() {
                     callback(WebViewJavascriptBridge)
                },
                false
           );
     }
}

//执行相互调用：
connectWebViewJavascriptBridge (function(bridge) {
 
    //注册一个方法（方法名是“registerJSmethod”），客户端进行调用（方法名也是“registerJSmethod”），responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log("registerJSmethod:", data)
        responseCallback(data)
    })
 
    //客户端已经注册好一个名为“registerOCmethod”的方法，H5直接进行调用（方法名也为“registerOCmethod”）就行，调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})