? 后天就要去北京出差了谴麦,據(jù)說(shuō)那邊的項(xiàng)目主要是與網(wǎng)頁(yè)交互宇挫,所以就簡(jiǎn)單的研究了一下js與iOS的交互荧止。
其交互方式有很多種
一、native(app)通過(guò)UIWebView的代理方法攔截url scheme判斷是否是我們需要攔截處理的url及其所對(duì)應(yīng)的要處理的邏輯(可以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)的返回盟庞、前景吃沪、刷新),比較通用和簡(jiǎn)單茫经。
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
self.webView.delegate = self;
[self.webView setUserInteractionEnabled:YES];//是否支持交互
[self.webView setOpaque:NO];//opaque是不透明的意思
[self.webView setScalesPageToFit:YES];//自動(dòng)縮放以適應(yīng)屏幕
[self.view addSubview:self.webView];
if (sender.tag == 101) {
// 返回(點(diǎn)擊頁(yè)面才會(huì)有返回)
[self.mWebView goBack];
}else if (sender.tag == 102) {
// 前進(jìn)(點(diǎn)擊過(guò)的頁(yè)面)
[self.mWebView goForward];
}else {
// 刷新頁(yè)面
[self.mWebView reload];
}
二巷波、iOS7之后出了JavaScriptCore.framework用于與JS交互,通過(guò)JSContext調(diào)用JS代碼的方法:
1卸伞、直接調(diào)用JS代碼
2抹镊、在ObjC中通過(guò)JSContext注入模型,然后調(diào)用模型的方法
通過(guò)evaluateScript:方法就可以執(zhí)行JS代碼
三荤傲、React Native (不是很了解垮耳,只知道是Facebook的,能編譯很多的語(yǔ)音,兼容性很強(qiáng)终佛,可移植也很強(qiáng)俊嗽,有很多很好的原生控件,有興趣的朋友可以了解一下)
四铃彰、WebViewJavascriptBridge(第三方)是基于方式一封裝的(主要是兩個(gè)回調(diào)函數(shù))绍豁。
在iOS端:1.self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
鏈接iOS與js,self.webView就是展示你用來(lái)顯示需要交換頁(yè)面的UIWebView
2.[self.bridge registerHandler:@"testJavascriptHandler" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
// 反饋給JS
responseCallback(data);
}];
// 在JS中如果調(diào)用了bridge.send(),那么將觸發(fā)OC端_bridge初始化方法中的回調(diào)牙捉。
// 在JS中調(diào)用了bridge.callHandler('testJavascriptHandler')竹揍,它將觸發(fā)OC端注冊(cè)的同名方法
// oc 同理
// JS主動(dòng)調(diào)用OjbC的方法
// 這是JS會(huì)調(diào)用ObjC Echo方法,這是OC注冊(cè)給JS調(diào)用的
// JS需要回調(diào)邪铲,當(dāng)然JS也可以傳參數(shù)過(guò)來(lái)芬位。data就是JS所傳的參數(shù),不一定需要傳
// OC端通過(guò)responseCallback回調(diào)JS端带到,JS就可以得到所需要的數(shù)據(jù)
3.[self.bridge callHandler:@"sayHello" data:@{@"hello": @"你好"} responseCallback:^(id responseData) {
NSLog(@"回調(diào)結(jié)果: %@", responseData);
}];
直接調(diào)用JS端注冊(cè)的HandleName昧碉,一定注意此次的名字一定要與js端的相同。
js調(diào)用時(shí)也一樣
在JS端:
1.Copy and paste setupWebViewJavascriptBridge into your JS:
(此段代碼為固定格式揽惹,直接放在js端就行)
function setupWebViewJavascriptBridge(callback) {
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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
后面幾步與iOS端一樣
如有錯(cuò)誤被饿,望請(qǐng)指出。