WebViewJavascriptBridge

github地址：WebViewJavascriptBridge

使用實例

使用的WebViewJavascriptBridge版本為5.0.5。本文記錄UIWebView和JS交互的基本使用同衣，也算是對WebViewJavascriptBridge初步認(rèn)識穿挨。

ViewController頁面分析

初始化

創(chuàng)建WebViewJavascriptBridge

    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webViewjs];
    [_bridge setWebViewDelegate:self];   

初始化方法：bridgeForWebView實現(xiàn)如下

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
}
//調(diào)用如下方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}

內(nèi)部初始化了一個WebViewJavascriptBridgeBase對象粉臊，并對_webView和_base賦值槽唾。

注冊一個方法，用來響應(yīng)JS調(diào)用

- (void)registShareFunction {
    [_bridge registerHandler:@"ShareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"-----分享數(shù)據(jù):%@", data);
        //實現(xiàn)需要的操作
    }];
}

參數(shù)：ShareClick是handler的名字窖铡，與網(wǎng)頁中JS調(diào)用的handler名字相同（寫錯了就慢慢找吧琅豆，別問我是怎么知道的）。data是JS發(fā)送過來的數(shù)據(jù)允乐。responseCallback回調(diào)數(shù)據(jù)給JS矮嫉。

注冊一個方法，用來調(diào)用JS

  [_bridge callHandler:@"OCtoJS" data:@"一個字符串" responseCallback:^(id responseData) {
        NSLog(@"%@", responseData);
    }];

參數(shù)說明：OCtoJS是handler名字牍疏。data發(fā)送給JS的數(shù)據(jù)蠢笋。responseCallback響應(yīng)JS的回調(diào)。

下面是ViewController完整代碼

#import "ViewController.h"
#import <WebViewJavascriptBridge.h>
#import "SecondViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webViewjs;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(right)];
    [WebViewJavascriptBridge enableLogging];
    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webViewjs];
    [_bridge setWebViewDelegate:self];
    [self loadExamplePage:_webViewjs];
    [self registShareFunction];
}
- (void)right{
    [_bridge callHandler:@"OCtoJS" data:@"一個字符串" responseCallback:^(id responseData) {
        NSLog(@"%@", responseData);
    }];
}
- (void)loadExamplePage:(UIWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"jsDemo" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}
- (void)registShareFunction {
    [_bridge registerHandler:@"ShareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"-----分享數(shù)據(jù):%@", data);
        //實現(xiàn)需要的操作
        SecondViewController *secondVC = [[SecondViewController alloc] init];
        UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:secondVC];
        [self presentViewController:nav animated:YES completion:^{
            responseCallback(@"分享成功");
        }];
    }];
}
@end

index.html頁面分析

配置index.html

WebViewJavascriptBridge是通過攔截URL來實現(xiàn)調(diào)用原生功能鳞陨。下面是html中必須配置的JS方法昨寞。

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)
}

具體如何實現(xiàn)的這里不多分析，請自行Google厦滤。

注冊方法援岩，用來OC響應(yīng)調(diào)用。

setupWebViewJavascriptBridge(function(bridge) {
        bridge.registerHandler('OCtoJS', function(data, responseCallback) {
                alert('JS方法被調(diào)用' + data);
                responseCallback('JS執(zhí)行過了');
        })
    })

只有在setupWebViewJavascriptBridge中注冊的方法才能被OC調(diào)用掏导∠砘常可以在其中定義多個方法用來響應(yīng)OC。注意OCtoJS和前面handler名稱是對應(yīng)的碘菜。

JS調(diào)用OC方法

function ShareClick(){
    var item = '我是JS發(fā)送來的數(shù)據(jù)';
    WebViewJavascriptBridge.callHandler('ShareClick',item, function(response){
        alert('response');
    })
}

index.html完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>測試</title>
</head>
<body>
    <script type="text/javascript">
       
        function ShareClick(){

 //監(jiān)聽程序
        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) {
            bridge.registerHandler('OCtoJS', function(data, responseCallback) {
                    alert('JS方法被調(diào)用' + data);
                    responseCallback('JS執(zhí)行過了');
            })
        })


            var item = '我是JS發(fā)送來的數(shù)據(jù)';
            WebViewJavascriptBridge.callHandler('ShareClick',item, function(response){

            })
        }
    </script>
    <button id="button" onclick="ShareClick()">點擊調(diào)用支付寶</button>
</body>
</html>

小結(jié)

使用WebViewJavascriptBridge可以很方便的實現(xiàn)OC與JS之間交互凹蜈。
另外使用在交互限寞，獲取參數(shù)方面都比較簡潔。