WebViewJavascriptBridge

鏈接:https://github.com/marcuswestin/WebViewJavascriptBridge

iOS端的實現

1.通過pod安裝

pod 'WebViewJavascriptBridge'

2.注冊和調用（雖然庫是OC寫的，但是Swift可以直接用）

//注冊方法，js可以調用注冊過后的方法
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調用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的實現

1.參考文章
vue項目使用WebViewJavascriptBridge
2.注冊和調用

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

//調用原生注冊過的方法
this.$bridge.callhandler('getScreenHeight', "調用getScreenHeight方法", (data) => {
  // 處理返回數據
  this.height = data
})

效果圖

1111.png

2222.png

Demo地址

1.iOS項目地址:https://github.com/DalyLong/WebViewBridgeDemo
2.vue項目地址:https://github.com/DalyLong/VueAndBridgeDemo