WebviewJavascriptBridge 詳解

WebviewJavascriptBridge是一款針對移動端Webview（Hybrid App）開發的JS框架，它可以去除Webview內部和原生之間相互調用的障礙，使得JS可以操作原生代碼，同時也可允許原生代碼操作JS。在運用WebviewJavascriptBridge後，可以使得Webview應用在某些系統接口或者功能上有更多的發揮空間，開發出更加卓越的網頁應用。

一、WebviewJavascriptBridge 的特點及優勢

1、提供雙向調用API

WebviewJavascriptBridge框架可以一方面提供JS調用原生代碼的功能，同時也可實現原生代碼調用JS代碼。這對於移動端Web應用而言是至關重要的，它可以大大提高界面的交互能力，且能夠更方便地使用原生API。

2、解決H5與Native交互的困難

WebviewJavascriptBridge能夠幫助解決原生與H5交互的問題。以傳統的方式，原生開發需手動拼接JS代碼，並監聽WebView的HTML事件去執行原生的代碼。但WebviewJavascriptBridge框架已經為開發者搭建好通信橋樑，不需要開發者自己動手去拼接，可以直接編寫自己的業務邏輯，這樣可以顯著減少開發時間和複雜度。

3、完全的自定義化和擴展性

WebviewJavascriptBridge框架可以根據開發者的需求完全自定義，也可開發者自己擴展API接口。這樣可以高度符合項目需求，在業務開發上更有靈活性。

二、如何使用WebviewJavascriptBridge

1、在WebView頁面添加JS代碼



    bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': '測試中文!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });

2、在原生代碼中添加接口

原生代碼中：WebviewJavascriptBridge提供了多個接口供使用，需要在需要添加接口的地方進行初始化。具體的代碼如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [webView stringByEvaluatingJavaScriptFromString:
     @"var newscript = document.createElement('script');"
     "newscript.src = 'webviewjavascriptbridge.js';"
     "document.scripts[0].parentNode.insertBefore(newscript, document.scripts[0]);"
     ];
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    // 註冊原生API
    [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"測試中文!");
    }];
}

3、在JS代碼中調用原生API

JS代碼中獲取原生的實例方法，並調用具體的API代碼：


    bridge.callHandler('testJavascriptHandler', {'param': '中文'}, function(response) {
        console.log('JS got response', response);
    });

三、WebviewJavascriptBridge 的使用案例

1、通過WebviewJavascriptBridge打開相冊並上傳圖片

前端代碼實現：


    document.getElementById('uploadImage').onclick = function() {
        bridge.callHandler('openGallery', {}, function(response) {
            console.log('JS got response', response);
        });
    }

原生代碼實現：

[bridge registerHandler:@"openGallery" handler:^(id data, WVJBResponseCallback responseCallback) {
    [self openGallery];
}];

完整實現代碼示例：




    
    WebviewJavascriptBridge案例 - 打開相冊上傳圖片
    
        .upload-image {
            display: block;
            width: 100%;
            text-align: center;
        }
    


    
    上傳圖片
    
    
        bridge.init(function(message, responseCallback) {
            console.log('JS got a message', message);
            var data = {
                'Javascript Responds': '測試成功!'
            };
            console.log('JS responding with', data);
            responseCallback(data);
        });
        
        // 打開相冊
        function openGallery() {
            var fileInput = document.getElementById('uploadFile');
            fileInput.onchange = function () {
                var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    console.log(e.target.result);
                    var res = {image: e.target.result}
                    bridge.callHandler('uploadImageToNative', res, function(response) {
                        console.log('JS got response', response);
                    });
                }
            }
            fileInput.click();
        }
    
    
        var bridge = window.WebViewJavascriptBridge;
        document.getElementById('uploadImage').onclick = function() {
            bridge.callHandler('openGallery', {}, function(response) {
                console.log('JS got response', response);
            });
        };
    
    
    
        var bridge = window.WebViewJavascriptBridge;
        bridge.registerHandler('uploadImageToNative', function(res) {
            console.log('JS got response', res);
            alert('uploadImageToNative received data with url = ' + res.image);
        });

2、通過WebviewJavascriptBridge實現App內登錄功能