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内登录功能