使用WebViewJavascriptBridge实现Swift和vue.js交互

字数 97阅读 663

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

推荐阅读更多精彩内容

  • [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d...
  • Swift版本点击这里 About A curated list of iOS objective-C ecosy...
  • 我以为自己长大的时候,竟然是老了。热辣的太阳是老了,茂盛的草原是老了,只有通红的朝阳,带着露水的绿芽,才是新鲜的,...
  • 人不可能阻止指甲生长....同样的,人也不能压抑自己与生俱来的冲动! “我的名字叫吉良吉影,33岁。住在杜王町东北...
  • 厌倦了与雨兼程 风在夜里悄然离开 方向即黎明曙光所在 方向即辽阔的大海 穿过破裂的墙壁 徘徊于一处人迹 转瞬驰往青...