使用WebViewJavascriptBridge实现Swift

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