一、框架导入
在Podfile中导入pod 'WKWebViewJavascriptBridge'
二、如何使用
前端使用：
<!doctype html>
<html><head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:#FE8FBD; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:14px; border: 2px solid #000000; }
.logLine_Native { border-bottom:1px solid #FFA67C; padding:4px 2px; font-family:courier; font-size:12px; }
.logLine_JS { border-bottom:1px solid #D867D8; padding:4px 2px; font-family:courier; font-size:12px; }
</style>
</head><body>
<h1>Demo</h1>
<input type = "button" onclick = "btn_click()" value = "测试" ></input>
<script>
// 点击事件
function btn_click() {
// 方法调用
setupWKWebViewJavascriptBridge(function(bridge) {
// h5调用app方法
bridge.callHandler('login', {}, function(response) {
// app登录成功的回调（登录信息）
})
})
}
// js加载调用
setupWKWebViewJavascriptBridge(function(bridge) {
// app调用h5保存登录信息的方法
bridge.registerHandler('setLogin', function(data, responseCallback) {
// 回调app
responseCallback(responseData)
})
// h5调用app方法
bridge.callHandler('navConfigs', {"navHidden":true,"navColor":"#ffffff"}, function(response) {
})
})
// 必要方法
function setupWKWebViewJavascriptBridge(callback) {
if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }
if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }
window.WKWVJBCallbacks = [callback];
window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
}
</script>
</body></html>
APP使用：
// webView关联
bridge = WKWebViewJavascriptBridge(webView: webView)
bridge.isLogEnable = true
// js调用登录方法
bridge.register(handlerName: "login") { (paramters, callback) in
// 跳转登录,登录成功回调给h5，或者主动调用js方法setLogin
callback?(["token": "用户token","userId":"用户id"])
// bridge.call(handlerName: "setLogin", data: ["token": "用户token","userId":"用户id"], callback: nil)
}
// js调用导航栏配置方法
bridge.register(handlerName: "navConfigs") { (paramters, callback) in
// paramters导航栏配置信息
}
// 调用js方法保存登录信息
bridge.call(handlerName: "setLogin", data: ["token": "用户token","userId":"用户id"]) { (response) in
}
网友评论