原生App与js（web）交互

iOS与JS交互的方法：

1、拦截URL（适用于UIWebView和WKWebView）
2、JavaScriptCore（仅适用于UIWebView，iOS7+）
3、WKScriptMessageHandler（仅适用于WKWebView，iOS8+）
4、WebViewJavascriptBridge（适用于UIWebView和WKWebView），属于第三方框架

方法一：拦截URL

首先需要与web端同事协定好协议。
如：webAction://scan表示启动二维码扫描；webAction://location表示获取定位；scanResult方法名等

情况一：使用UIWebView
web调用原生：需要用webView: shouldStartLoadWithRequest:navigationType:方法。
原生调用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(@"调用原生扫描二维码");
        
        //把拿到的数据给Web端
        [self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('%@','%@','%@')",@"数据1",@"数据2",@"数据3"];
        return NO;
    }
    return YES;
}

情况二：使用WKWebView
实现一：

//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(@"调用原生扫描二维码");
        
        //把拿到的数据给Web端
        NSString *jsStr = [NSString stringWithFormat:@"scanResult('%@','%@','%@')",@"数据1",@"数据2",@"数据3"];
        [self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
            NSLog(@"%@ - 错误：%@", data, error);
        }];
        decisionHandler(WKNavigationActionPolicyCancel);
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

实现二：

function jsToOCClick() {
    window.location.href="http://www.dongzhuoqiong.com?uuid=1233546769978";
}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSLog(@"是否使用导航  %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);    // 取消加载，不让原有事件响应。
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);     // 加载
    }
}

方法二：JavaScriptCore

  • 通过方法一web调用原生只适合简单的调用，如果要传递参数，虽然也可以拼接在url上，如webAction://scan?method=aaa，但是需要我们自行对字符串进行分割解析，并且特殊字符需要编码。
  • 在iOS7系统提供了JavaScriptCore.framework，可以更优雅地实现js与原生的交互。
  • 首先需要与web端同事协定好协议。
    如：conversion_js、PeopleResult方法名等

Block形式：（重点代码block块）
一、对象转化
OC to js（传输的对象必须遵守JSExport协议）

//原生代码
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"conversion_js"] = ^() {
    NSLog(@"oc_js 对象转化");

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

js to OC （传输的对象必须遵守JSExport协议）

__weak typeof(self) weakSelf = self;
context[@"conversion_oc"] = ^() {
    NSLog(@"js_oc对象转化");
    [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);
};

对象转化js代码

//js代码
<script type="text/javascript">
    //构造函数
    function People(name, description) {
        this.name = name;
        this.desc = description;
    }

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

二、数据交互

数据返回给js

//OC代码
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"scan"] = ^() {
    NSLog(@"扫一扫");
    
    // 将结果返回给js scanResult Js函数名
    NSString *jsStr = [NSString stringWithFormat:@"scanResult('%@','%@','%@')",@"数据1",@"数据2",@"数据3"];
    [[JSContext currentContext] evaluateScript:jsStr];
};
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    NSLog(@"扫一扫JS Error: %@", exception);
};

 function scanClick() {    //onclick点击事件
     scan();
 }
 function scanResult(result) {
    document.getElementById("returnValue").value = result;
 }

OC对象返回给js（传输的对象必须遵守JSExport协议）

//OC代码
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"conversion_js"] = ^() {
    NSLog(@"oc_js 对象转化");
    // 将_people返回给js
    JSValue *value = [JSContext currentContext][@"PeopleResult"];
    [value callWithArguments:@[_people]];
};

//js代码
//构造函数
function People(name, description) {
    this.name = name;
    this.desc = description;
}
function People_js_Action() {   //onclick点击事件
    conversion_js();
}
function PeopleResult(People) {
    var peopleInfo = "姓名:" + People.name + "，他"+ People.desc;
    alert(peopleInfo);
}

js对象传给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(@"订单号:%@---channel:%@---总价:%lld---subject:%@",orderNo,channel,amount,subject);
        
//        //1、将支付结果返回给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('%@','%@','%@')",@"数据1",@"数据2",@"数据3"];
        [self.wkWebView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"结果 %@   ---   错误 %@",result, error);
        }];
    }
}

方法四： WebViewJavascriptBridge（第三方）

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342