原生App與js（web）交互

iOS與JS交互的方法：

1、攔截URL（適用于UIWebView和WKWebView）
2、JavaScriptCore（僅適用于UIWebView，iOS7+）
3、WKScriptMessageHandler（僅適用于WKWebView，iOS8+）
4、WebViewJavascriptBridge（適用于UIWebView和WKWebView），屬于第三方框架

方法一：攔截URL

首先需要與web端同事協(xié)定好協(xié)議。
如：webAction://scan表示啟動(dòng)二維碼掃描；webAction://location表示獲取定位；scanResult方法名等

情況一：使用UIWebView
web調(diào)用原生：需要用webView: shouldStartLoadWithRequest:navigationType:方法。
原生調(diào)用web：需要用stringByEvaluatingJavaScriptFromString:方法

//web端代碼
<a href="webAction://scan">掃一掃</a>

//原生代碼
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.absoluteString hasPrefix:@"webAction://scan"]) {
        NSLog(@"調(diào)用原生掃描二維碼");
        
        //把拿到的數(shù)據(jù)給Web端
        [self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('%@','%@','%@')",@"數(shù)據(jù)1",@"數(shù)據(jù)2",@"數(shù)據(jù)3"];
        return NO;
    }
    return YES;
}

情況二：使用WKWebView
實(shí)現(xiàn)一：

//web端代碼
<a href="webAction://scan">掃一掃</a>

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSString *urlStr = navigationAction.request.URL.absoluteString;
    if ([urlStr rangeOfString:@"webAction://scan"].location != NSNotFound) {
        NSLog(@"調(diào)用原生掃描二維碼");
        
        //把拿到的數(shù)據(jù)給Web端
        NSString *jsStr = [NSString stringWithFormat:@"scanResult('%@','%@','%@')",@"數(shù)據(jù)1",@"數(shù)據(jù)2",@"數(shù)據(jù)3"];
        [self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
            NSLog(@"%@ - 錯(cuò)誤：%@", data, error);
        }];
        decisionHandler(WKNavigationActionPolicyCancel);
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

實(shí)現(xiàn)二：

function jsToOCClick() {
    window.location.;
}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSLog(@"是否使用導(dǎo)航  %s",__func__);
    NSURL *URL = navigationAction.request.URL;
    NSString * urlStr = [[URL absoluteString] stringByRemovingPercentEncoding];
    
    if([urlStr rangeOfString:@"www.dongzhuoqiong.com"].location != NSNotFound){
        NSLog(@"yes");
        NSArray *arr = [urlStr componentsSeparatedByString:@"="];
        
        decisionHandler(WKNavigationActionPolicyCancel);    // 取消加載，不讓原有事件響應(yīng)。
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);     // 加載
    }
}

方法二：JavaScriptCore

  • 通過方法一web調(diào)用原生只適合簡單的調(diào)用，如果要傳遞參數(shù)，雖然也可以拼接在url上，如webAction://scan?method=aaa，但是需要我們自行對(duì)字符串進(jìn)行分割解析，并且特殊字符需要編碼。
  • 在iOS7系統(tǒng)提供了JavaScriptCore.framework，可以更優(yōu)雅地實(shí)現(xiàn)js與原生的交互。
  • 首先需要與web端同事協(xié)定好協(xié)議。
    如：conversion_js、PeopleResult方法名等

Block形式：（重點(diǎn)代碼block塊）
一、對(duì)象轉(zhuǎn)化
OC to js（傳輸?shù)膶?duì)象必須遵守JSExport協(xié)議）

//原生代碼
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"conversion_js"] = ^() {
    NSLog(@"oc_js 對(duì)象轉(zhuǎn)化");

    // 將_people對(duì)象返回給js
    JSValue *value = [JSContext currentContext][@"PeopleResult"];
    [value callWithArguments:@[_people]];
};
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    NSLog(@"Error: %@", exception);
};

js to OC （傳輸?shù)膶?duì)象必須遵守JSExport協(xié)議）

__weak typeof(self) weakSelf = self;
context[@"conversion_oc"] = ^() {
    NSLog(@"js_oc對(duì)象轉(zhuǎn)化");
    [weakSelf.context setObject:weakSelf.people forKeyedSubscript:@"People"];
        
    JSValue *value = [weakSelf.context objectForKeyedSubscript:@"People"];
    People *people = value.toObject;
    NSLog(@"%@",people);
    NSLog(@"名字:%@ - 詳情:%@",people.name,people.desc);
};
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    NSLog(@"Error: %@", exception);
};

對(duì)象轉(zhuǎn)化js代碼

//js代碼
<script type="text/javascript">
    //構(gòu)造函數(shù)
    function People(name, description) {
        this.name = name;
        this.desc = description;
    }

    function People_js_Action() {   //onclick點(diǎn)擊事件
        conversion_js();
    }
    function People_oc_Action() {   //onclick點(diǎn)擊事件
        conversion_oc();
    }
    function PeopleResult(People) {
        var peopleInfo = "姓名:" + People.name + "，他"+ People.desc;
        alert(peopleInfo);
    }
</script>

二、數(shù)據(jù)交互

數(shù)據(jù)返回給js

//OC代碼
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"scan"] = ^() {
    NSLog(@"掃一掃");
    
    // 將結(jié)果返回給js scanResult Js函數(shù)名
    NSString *jsStr = [NSString stringWithFormat:@"scanResult('%@','%@','%@')",@"數(shù)據(jù)1",@"數(shù)據(jù)2",@"數(shù)據(jù)3"];
    [[JSContext currentContext] evaluateScript:jsStr];
};
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    NSLog(@"掃一掃JS Error: %@", exception);
};

 function scanClick() {    //onclick點(diǎn)擊事件
     scan();
 }
 function scanResult(result) {
    document.getElementById("returnValue").value = result;
 }

OC對(duì)象返回給js（傳輸?shù)膶?duì)象必須遵守JSExport協(xié)議）

//OC代碼
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"conversion_js"] = ^() {
    NSLog(@"oc_js 對(duì)象轉(zhuǎn)化");
    // 將_people返回給js
    JSValue *value = [JSContext currentContext][@"PeopleResult"];
    [value callWithArguments:@[_people]];
};

//js代碼
//構(gòu)造函數(shù)
function People(name, description) {
    this.name = name;
    this.desc = description;
}
function People_js_Action() {   //onclick點(diǎn)擊事件
    conversion_js();
}
function PeopleResult(People) {
    var peopleInfo = "姓名:" + People.name + "，他"+ People.desc;
    alert(peopleInfo);
}

js對(duì)象傳給OC

//OC代碼
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"payAction"] = ^() {
    NSLog(@"支付");
    NSArray *args = [JSContext currentArguments];
    if (args.count < 4) {
        return ;
    }
        
    NSString *orderNo = [args[0] toString];
    NSString *channel = [args[1] toString];
    long long amount = [[args[2] toNumber] longLongValue];
    NSString *subject = [args[3] toString];
        
    // 支付操作
    NSLog(@"訂單號(hào):%@---channel:%@---總價(jià):%lld---subject:%@",orderNo,channel,amount,subject);
        
//        //1、將支付結(jié)果返回給js
//        NSString *jsStr = [NSString stringWithFormat:@"payResult('%@','%@')",@"支付成功",@"支付成功"];
//        [[JSContext currentContext] evaluateScript:jsStr];
    //2、
    JSValue *value = [JSContext currentContext][@"payResult"];
    [value callWithArguments:@[@"支付成功",@"支付成功"]];
 };
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"支付JS Error: %@", exception);
};

//js代碼
function payClick() {
    payAction('201904091234567','ApplePay',100,'夾克');
}
function payResult(str,str) {
    var content = str + "," + str;
    alert(content);
    document.getElementById("returnValue").value = content;
}

方法三：WKScriptMessageHandler

//js代碼
function jsToOCClick() {
    window.webkit.messageHandlers.color.postMessage([67,205,128,0.5]);
}

OC代碼
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
[configuration.userContentController addScriptMessageHandler:self name:@"color"];

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSArray *bodyArray = (NSArray *)message.body;
    NSLog(@"bodyArray -- %@",bodyArray);
    if ([message.name isEqualToString:@"color"]) {
        NSString *JSResult = [NSString stringWithFormat:@"scanResult('%@','%@','%@')",@"數(shù)據(jù)1",@"數(shù)據(jù)2",@"數(shù)據(jù)3"];
        [self.wkWebView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"結(jié)果 %@   ---   錯(cuò)誤 %@",result, error);
        }];
    }
}

方法四： WebViewJavascriptBridge（第三方）

Demo地址：https://pan.baidu.com/s/1eE_PeDNl1N_CQgxo6KYMGg
密碼:9y0b

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容