WebViewJavaScript iOS 与 js 交互

2018-02-08 10:26:54来源:https://www.jianshu.com/p/eb87decc94fa作者:DeepChafferer人点击

分享


WebViewJavaScriptBridge简介
GitHub上10K+的iOS与JavaScript交互框架
适用于WKWebView、 UIWebView以及WebView
优雅的实现OC与JS的交互,方便简洁
WebViewJavaScriptBridge原理简介


WebViewJavaScriptBridge交互原理

在iOS环境和JavaScript环境中都保存一个bridge对象,里面维持着requestId,callbackId,以及每个id对应的具体实现(JavaScript中的bridge对象由iOS原生传入)
JavaScript通过url重定向,让iOS原生端主动拉取JavaScript的请求数据进行函数调用,然后iOS原生端再主动调用JavaScript代码,调用回调函数
iOS原生端通过主动调用JavaScript的代码去进行函数调用,然后JavaScript再通过url重定向,调用回调函数

详细可以参考WebViewJavascriptBridge解析


iOS原生端集成WebViewJavaScriptBridge
使用CocoaPods
在Podfile中加入pod 'WebViewJavascriptBridge', '~> 6.0'后indtall

手动导入
下载下来后直接将WebViewJavascriptBridge文件夹拖入工程文件即可

使用

#import "WebViewJavascriptBridge.h" 导入头文件
@property WebViewJavascriptBridge* bridge; 添加属性bridge
[WebViewJavascriptBridge enableLogging]; 可选,是否打开调试
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView]; 初始化bridge对象
[self.bridge setWebViewDelegate:self]; 设置代理

iOS原生与JavaScript交互
Web端需要做的操作
创建一个组件,用于存储原生传来的bridge对象(要在其他文件中使用)
具体代码

   var Bridge = {}
Bridge.install = function (Vue, options) {
setupWebViewJavascriptBridge((bridge)=>{
console.log(bridge.toString())
Vue.prototype.$bridge = bridge
// 需要将原生调js的方法在这里进行注册
/**
原生调用js的方法 名称 callJavaScript
@param data 原生传来的参数
@param responseCallback 回调函数
*/

bridge.registerHandler('callJavaScript', data, function(data, responseCallback) {
console.log("callJavaScript called with:", data)
responseCallback(data)
})
})
function setupWebViewJavascriptBridge(callback) {
console.log('setBridge')
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
}
module.exports = Bridge;

在app.js中引入组件
在需要调用原生方法的文件中
    // 判断是不是iOS端

/**
js调用原生的方法 名称 jsCallNative
@param data 传给原生的参数
@param responseCallback 回调函数
*/
var vm = this
if (vm.$bridge) {
vm.$bridge.callHandler('jsCallNative', data, function(responceData){
consol.log(responceData)
})
}

iOS原生端需要做的操作
js调用原生
  /**
注册js调用原生的方法 名称 jsCallNative
@param data js传来的参数
@param responseCallback 回调函数
*/
[self.bridge registerHandler:@"jsCallNative" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"%@---%@", data, responseCallback);
[self saveUserInfo:data];
}];

原生调用js
  /**
原生调用js的方法 名称 callJavaScript
@param data 传给js的参数
@param responseCallback 回调函数
*/
[self.bridge callHandler:@"callJavaScript" data:@{@"testKey":@"testValue"} responseCallback:^(id responseData) {
NSLog(@"responseData is: %@", responseData);
}];

小结
js调用原生需要在原生端注册相应方法,原生端调用js需要在js端注册相应方法
在方法中方法名是必须的参数,其余参数可传可不传







最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台