//
//  WKWebViewBridgeController.m
//  XGDevelopDemo
//
//  Created by 小廣 on 2016/11/4.
//  Copyright © 2016年 小廣. All rights reserved.
//  WebViewJavascriptBridge 第三方使用WKWebView
// WebViewJavascriptBridge地址 https://github.com/marcuswestin/WebViewJavascriptBridge
// WebViewJavascriptBridge iOS使用地址 http://www.jianshu.com/p/e951af9e5e74
// WebViewJavascriptBridge Java使用地址 http://blog.csdn.net/sk719887916/article/details/47189607

#import "WKWebViewBridgeController.h"
#import "WKWebViewJavascriptBridge.h"
#import <WebKit/WebKit.h>

@interface WKWebViewBridgeController ()<WKNavigationDelegate, WKUIDelegate>

@property WKWebViewJavascriptBridge* bridge;
@property (nonatomic, strong) WKWebView *wkWebView;           // webview

@end

@implementation WKWebViewBridgeController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self setUpWKWebView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

// viewWillAppear和viewWillDisappear對setWebViewDelegate處理，不處理會導致記憶體洩漏
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    if (self.bridge) {
        [self.bridge setWebViewDelegate:self];
    }
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    [self.bridge setWebViewDelegate:nil];
}

- (void)dealloc
{
    NSLog(@"dealloc==dealloc==");
}

- (void)setUpWKWebView {
    self.wkWebView =  [[WKWebView alloc] initWithFrame:self.view.bounds];
    self.wkWebView.navigationDelegate = self;
    self.wkWebView.UIDelegate = self;
    [self.view addSubview:self.wkWebView];
    [WKWebViewJavascriptBridge enableLogging];
    _bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.wkWebView];
    [_bridge setWebViewDelegate:self];
    
    // 註冊一下
    
    __weak __typeof(self)weakSelf = self;
    // js呼叫oc
    [_bridge registerHandler:@"_app_setTitle" handler:^(id data, WVJBResponseCallback responseCallback) {
        responseCallback(@"this is callback data to JS");
        if ([data isKindOfClass:[NSString class]]) {
            weakSelf.title = (NSString *)data;
            return ;
        }
        if (data) {
            weakSelf.title = [NSString stringWithFormat:@"%@",data];
        }
    }];
    
    // oc呼叫js
//    [_bridge callHandler:@"getCodeScan" data:@"oc呼叫js端方法" responseCallback:^(id responseData) {
//        //
//        NSLog(@"responseData===%@==",responseData);
//    }];
    
    [self loadExamplePage:self.wkWebView];
}

// 載入h5
- (void)loadExamplePage:(WKWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"xg_test" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}

// 頁面開始載入時呼叫
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    self.title = NSLocalizedString(@"Loading...", @"");
}

// 處理撥打電話
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *URL = navigationAction.request.URL;
    NSString *scheme = [URL scheme];
    if ([scheme isEqualToString:@"tel"]) {
        NSString *resourceSpecifier = [URL resourceSpecifier];
        // 這種撥打電話的寫法，真機可顯示效果，模擬器不顯示
        NSString *callPhone = [NSString stringWithFormat:@"telprompt://%@", resourceSpecifier];
        [[UIApplication sharedApplication] openURL:[NSURL URLWithString:callPhone]];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

/// alert的處理
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
    
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    
    [self presentViewController:alert animated:YES completion:nil];
}


@end
 

下面的html上綜合oc裡js和Java裡js，已經驗證，都可以呼叫，若有更好的寫法，請大家指出，共同進步。謝謝。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>測試</title>
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta name="description" content="">
                <meta name="keywords" content="">
                    <meta name="apple-mobile-web-app-capable" content="yes" />
                    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
                    <meta name="format-detection" content="telephone=no" />
                    <meta name="format-detection" content="email=no" />
                    <meta name="viewport"
                    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
                    <script src="js/jquery.min.js"></script>
                    <script>

                        // 固定寫法 函式名字可變
                        function setupWebViewJavascriptBridge(callback) {
                            if (window.WebViewJavascriptBridge) {
                                callback(WebViewJavascriptBridge)
                            } else {
                                document.addEventListener('WebViewJavascriptBridgeReady' , function() {
                                                          callback(WebViewJavascriptBridge)
                                                          }, false );
                            }

                            // =====以下是iOS必須的特殊處理========
                            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);
                            // =====以上是iOS必須的特殊處理========
                        }

                        // 固定寫法2 函式名字與1保持一致
                        setupWebViewJavascriptBridge(function(bridge) {
                            // Java 註冊回撥函式，第一次連線時呼叫 初始化函式
                             bridge.init();
                        });

                        // 每個方法的特殊處理
                        function setTitle() {
                          WebViewJavascriptBridge.callHandler('_app_setTitle',
                          '這是一個nav標題',
                          function (response) {
                            // 移動端回傳的資料
                            alert('移動端回傳的資料:' + response);
                          });
                        }
                    
                    </script>

                    <style>
                        html {
                            font-family: Helvetica;
                            color: #222;
                        }

                    h1 {
                        color: steelblue;
                        font-size: 24px;
                        margin-top: 24px;
                    }

                    button {
                        margin: 0 3px 10px;
                        font-size: 12px;
                    }

                    .logLine {
                        border-bottom: 1px solid #ccc;
                        padding: 4px 2px;
                        font-family: courier;
                        font-size: 11px;
                    }

                    input {
                        height: 32px;
                        margin: 30px;
                    }
                    </style>
    </head>
    <body>

        <div id='buttons'></div>
        <div id='log'></div>
        <div class="pointexchange">
            <div>
                <img src="points4.png" width="47px" height="47px" title="points4.png" /><br />
                <label>積分兌換實物</label>
            </div>
            <div>
                <img src="points1.png" width="47px" height="47px" title="points1.png" /><br />
                <label>積分兌換紅包</label>
            </div>
            <div>
                <img src="points2.png" width="47px" height="47px" title="points2.png" /><br />
                <label>積分參與活動</label>
            </div>
        </div>
        <br />
        <input id="test" type="button" onclick="setTitle()" value="設定標題" />
        <br />
        <br />
        <a href="tel:13112345678">移動WEB頁面JS一鍵撥打號碼諮詢功能</a>
        <br />
    </body>
</html>