WebViewJavascriptBridge
鏈接:https://github.com/marcuswestin/WebViewJavascriptBridge
iOS端的實現(xiàn)
1.通過pod安裝
pod 'WebViewJavascriptBridge'
2.注冊和調(diào)用(雖然庫是OC寫的蚪黑,但是Swift可以直接用)
//注冊方法甩十,js可以調(diào)用注冊過后的方法
self.bridge = WebViewJavascriptBridge.init(forWebView: self.webView)
self.bridge.registerHandler("getScreenHeight") { data, responseCallback in
responseCallback!(UIScreen.main.bounds.size.height)
let str : String = data as! String
print("獲得js傳遞的字符串:"+str)
}
//通過bridge調(diào)用js方法
self.bridge.callHandler("showAlert", data: "這是Swift傳向js的字符串!")
self.bridge.callHandler("getCurrentPageUrl", data: nil) { responseData in
let str : String = responseData as! String
print("獲得js返回的地址:"+str)
}
vue.js的實現(xiàn)
1.參考文章
vue項目使用WebViewJavascriptBridge
2.注冊和調(diào)用
this.$bridge.registerhandler('showAlert', (data, responseCallback) => {
this.$vux.toast.show({
text: data,
type: 'text'
});
})
this.$bridge.registerhandler('getCurrentPageUrl', (data, responseCallback) => {
responseCallback("https://www.baidu.com")
})
//調(diào)用原生注冊過的方法
this.$bridge.callhandler('getScreenHeight', "調(diào)用getScreenHeight方法", (data) => {
// 處理返回數(shù)據(jù)
this.height = data
})
效果圖
1111.png
2222.png
Demo地址
1.iOS項目地址:https://github.com/DalyLong/WebViewBridgeDemo
2.vue項目地址:https://github.com/DalyLong/VueAndBridgeDemo