WKWebView与WebViewJavascriptBridg
WKWebView基本使用请看：http://www.jianshu.com/p/d1841e5581bb
上半部分：WebViewJavascriptBridge的安装及配置
1、pod 'WebViewJavascriptBridge', '~> 5.0'，swift和OC中有一点不同，在swift中配置Podfile文件时要加上 use_framework! ，作用是把三方库打包成静态库在swift中调用三方库：
屏幕快照 2017-06-19 下午7.43.21.png
2、选中target -> General中的Linked Frameworks and Libraries ，点击+添加
屏幕快照 2017-06-16 下午3.47.57.png
3、导入：import WebViewJavascriptBridge
4、简介：
顾名思义，bridge本就是桥梁，桥接器的意思，我们也正是用WKWebViewJavascriptBridge的实例，实现JS与native的互相调用
总结，不管是web还是native, "调" 就用callHandler，" 被调 " 就用registerHandler
关键方法：
/* 直接调用，没有参数*/
- (void)callHandler:(NSString*)handlerName;
/* 调用 传参数 */
- (void)callHandler:(NSString*)handlerName data:(id)data;
/* 调用 传参数 传回调函数 (带回数据) */
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
/ * 注册被调用的方法名 ，传入的 参数 和 回调函数*/
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
下半部分：WebViewJavascriptBridge实现JS与native交互
首先声明，使用WebViewJavascriptBridge实现交互，必须web和native都遵循一些规则
1、html的相关配置和书写规则
<script type="text/javascript">
//这是必须要写的，用来初始化一些设置, 照抄就可以
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)
}
//这也是固定的， OC 调JS ， 需要给OC调用的函数必须写在这个函数里面
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被调用,传入参数:'+data);
responseCallback('js执行过了');
})
//无参数和回调
bridge.registerHandler('OCCallJSFunction', function( ){
alert('OCCallJSFunction')
})
})
//这个 shareClick 就是 原生那边 注入的函数 ， 通过这个方法来调用原生 和传值
//parmas 是JS 给OC的数据 ， response 是 OC函数被调用之后 再 告诉JS 我被调用了
//比如微信分享，传Dic给原生 ， 原生分享成功后再把结果回调给JS 进行处理
function shareClick() {
var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
alert(response);
});
}
function changeColor(){ WebViewJavascriptBridge.callHandler('changeColor',function(resposne){
document.getElementById("changeColorBtn").style.background = resposne;
});
}
</script>
2、WKWebView及native如何被调和调用
var webBridge:WKWebViewJavascriptBridge!，初始化要放在webView loadRequest之前，关键点：
因为要设置
self.webBridge.setWebViewDelegate(self)//webView.navigationDelegate = self // 不能设置webView的WKNavigationDelegate了，设置后影响JS与OC交互，而要改为设置webBridge的WKNavigationDelegate为self
self.webBridge = WKWebViewJavascriptBridge.init(for: self.webView)
self.webBridge.setWebViewDelegate(self) // webView.navigationDelegate = self //设置后影响JS与OC交互
//JS 分享 调 native的分享， 分享后，将分享结果(取消，失败，还是成功)等回调给JS
self.webBridge.registerHandler("shareClick") { (data, callBack) in
// data: {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
let param:[String:String] = data as! Dictionary
//分享
let alertController = UIAlertController(title: param["title"], message: (param["content"]! + param["url"]!), preferredStyle:.alert)
let okAction = UIAlertAction(title:"确定分享" , style: .default) { (UIAlertAction) in
callBack!("分享成功")
}
alertController.addAction(okAction)
// 弹出
self.present(alertController, animated: true, completion: nil)
}
//JS调native，没有传入参数，要求传回一个颜色的参数
self.webBridge.registerHandler("changeColor") { (nil, callBack) in
let colorValue = arc4random_uniform(600)
let color = "#\(colorValue)"
callBack!(color)
}
//native 调 JS， 传入参数“533”
self.webBridge.callHandler("testJSFunction", data: "533") { (responseData) in
AppStatusPop.showInfoWithStatus(status: "回调回来的数据:\(responseData as! String)")
}
// //OC 调 JS 无参无回调
// self.webBridge.callHandler("OCCallJSFunction")
本篇只涉及基本使用，注意点也在文中有所提及，如使用中发现问题，可先查找是否有文中所提注意点
