淘先锋技术网

首页 1 2 3 4 5 6 7
JavaScript与iOS交互 在当前的移动互联网时代中,移动端开发已经成为了程序员们的主义方向之一。而对于iOS开发者来说,很多时候你需要将网页或者WebView中的JS代码与小程序及IOS系统进行交互。那么JavaScript与iOS交互的方法是什么呢?下面是一个详细的介绍。 WebView和iOS通信 在应用程序中,我们经常需要将网页或者WebView中的JS代码与小程序及IOS系统进行交互。在iOS中,我们可以通过UIWebView和WKWebView两种方式来实现和Web端的交互。我们主要来看一下UIWebView的例子。 例如,在UIWebView中通过JS来调用IOS的方法,我们可以通过如下代码:
- (void)webViewDidFinishLoad:(UIWebView)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"JSObject"] = self;
context.exceptionHandler = ^(JSContext *con, JSValue *exception){
NSLog(@“error:%@“, exception);
};
}
- (void)Print: (NSString)message{
NSLog(@“message:%@“, message);
}
在上面的代码中,JSObject变量名可以自己定义,但是需要和前端JS代码保持一致。在JS代码中,我们可以使用如下方式来调用OC中的方法:
function test(){
JSObject.Print("message from JS:");
}
test();
我们同样可以在WebView中使用JSBridge来实现和JS的通信,JSBridge是为了解决WebView在不同操作系统受限制而开发的一种解决方法。 如何使用iOS Native与JS互调? 当然,除了我们可以使用JS方式进行IOS Native和网页的交互,我们也可以通过一些原生的方法来实现和JS的交互。 例如,我们可以通过WebViewJavascriptBridge这个框架来实现Native和JS的交互。 WebViewJavascriptBridge是一个封装了OC和JS交互的框架,它可以让我们方便的在IOS原生页面的UIWebView和WKWebView中使用JS访问OC代码。 使用WebViewJavascriptBridge支持的WKWebView需要引入WebViewJavascriptBridge_swift.h,在程序中实例化后即可使用。 例如,我们在iOS原生页面中定义一个jsBridge对象,再让JS调用这个对象,利用jsBridge对象和IOS Native进行交互:
var btn = document.createElement('button');
btn.innerText = "点击调用APP方法";
btn.onclick = function (){
window.webkit.messageHandlers.bridge.postMessage({"question":"hello JSBridge"});
};
document.body.appendChild(btn);
如上代码,我们可以通过window.webkit.messageHandlers.bridge.postMessage()函数来向ios native中传递数据和方法。需要注意的是,传递的数据格式必须是JSON。 在iOS原生页面中我们需要初始化一个bridge对象,并在JS中调用这个对象: NSString *jsOcMethodName = @"yourMethod"; //js调用方法名字 NSString *jsData = @"{'data':'Hello,WKWebViewJavascriptBridge'}";//JS向OC传递的数据 //设置bridge的代理 [bridge setWebViewDelegate:wkWebView]; //JS调用OC.Alert方法 [bridge callHandler:@"alert" data:@{@"msg":@"Hello,World"} responseCallback:^(id response) { NSLog(@"调用完成!"); }]; //OC向JS发起方法调用 [bridge callHandler:jsOcMethodName data:jsData responseCallback:^(id responseData) { NSLog(@"Show received message: %@",responseData); }]; //处理JS发来的消息 [bridge registerHandler:@"sendMessage" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"JS发送的消息:%@",data); }];在上面的代码中,我们需要定义好jsOcMethodName的方法名称,在JS中通过window.webkit.messageHandlers.${jsOcMethodName}.postMessage()的方式来调用Native方法。 总结 JavaScript和iOS之间的交互在现代应用开发中已经越来越常见。在此过程中,WebViewJavascriptBridge、UIWebView和WKWebView是我们最常使用的工具。上面的介绍中,我们深入了解了这些工具并了解了它们如何在实际开发中使用。对于正在参与移动端开发的程序员而言,JS和iOS交互将是一个永远不会过时的技能。