iOS中实现JS和OC的交互(Hybrid App)

作者: zhangferry | 来源:发表于2016-08-18 20:45 被阅读2247次

Hybrid.png

在项目开发中，我们常常遇到这种情况，一个功能性界面需要分享到其他平台，或者是一个较复杂，原生框架不易实现，需要经常变动的界面，处理这种功能，最优的处理办法就是交给H5来完成了。像这种介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”的应用就被成为Hybrid App。
在iOS端涉及的知识就是JS和OC之间的交互，下面我们逐步学习如何处理这两者交互的问题。

使用JavaScriptCore与JS交互

JavaScriptCore了解

JavaScript和OC交互常用的框架就是这个了，首先我们了解几个概念：

JSValue: 代表一个JavaScript实体，一个JSValue可以表示很多JavaScript原始类型例如boolean, integers, doubles，甚至包括对象和函数。
JSContext: 代表JavaScript的运行环境，你需要用JSContext来执行JavaScript代码。所有的JSValue都是捆绑在一个JSContext上的。
JSExport: 这是一个协议，可以用这个协议来将原生对象导出给JavaScript，这样原生对象的属性或方法就成为了JavaScript的属性或方法，非常神奇。
JavaScriptCore了解

网页内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2>JavaSript与OC交互</h2>
<input type="button" value="Native传值" onclick="Native.call('Native调用')">
</div>
<div>
<input type="button" value="传值测试" onclick="passValue('test')">
</div>
<script>
var alertShow = function(str)
{
    alert(str);
}
</script>
</body>
</html>

HTML运行结果：

screen shot.png

获取JS点击事件

我们目的是获取点击方法

第一步
导入JavaScriptCore

#import <JavaScriptCore/JavaScriptCore.h>

第二步
加载HTML文件

NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[self.webView loadRequest:request];

第三步
获取当前页面JSContxt对象

- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//捕捉异常回调
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
    context.exception = exceptionValue;
    NSLog(@"异常信息：%@", exceptionValue);
};
}

第四步
获取点击事件
有两种添加点击事件的方式

直接调用的函数

 <input type="button" value="传值测试" onclick="passValue('test')">

如果是第一种情况，比较简单。在代理- (void)webViewDidFinishLoad:(UIWebView *)webView 中加上

    self.context[@"passValue"] = ^(NSString *str){
        NSLog(@"%@",str);
    };

如果点击传值按钮，就会调用此block，输出test

第二种：通过native调用的方式

  <input type="button" value="Native传值" onclick="Native.call('Native调用')">

这种方式需要声明一个JSExport的协议，协议中声明供JS使用的方法：

  #import <UIKit/UIKit.h>
  #import <JavaScriptCore/JavaScriptCore.h>

  @protocol JSObjcDelegate <JSExport>
   - (void)call:(NSString *)str;

  @end

然后还要以JSExport协议关联Native方法，

    self.content[@"Native"] = self;

在实现文件中实现这个方法

    - (void)call:(NSString *)str{
        NSLog(@"call");
    }

此时点击一下Native传值，就会输出Native调用
还有一个需要注意的地方是，在JS调用的方法里实现页面跳转时，要回到主线程执行。可以使用GCD方法

 dispatch_async(dispatch_get_main_queue(), ^{
    [self.navigationController pushViewController:vc animated:YES];
});

至此，获取JS点击事件的功能就完成了。

OC调用JS方法

在上面那段HTML里有一个函数alertShow()，是调用弹框并将str值显示出来。那么我们如何调用这个方法呢？
第一步、获取这个函数，有两种方法

JSValue *Callback = self.context[@"alertShow"];//第一种方式
JSValue *Callback = [self.context objectForKeyedSubscript:@"alertShow"];//第二种方式

第二步、向JS传参

[Callback callWithArguments:@[@"OC调用JS方法"]];//出现一个弹框，`OC调用JS方法`

如果想直接使用JS的方法可以

NSString *str = @"alert('OC添加JS提示成功')";
[self.context evaluateScript:str];

加载新的URL

WebView有一个代理方法，每当需要去加载一个request，就会回调这个方法，让上层决定是否加载。常常一个H5页面会进行不同url之间的跳转，这里截获，进行本地处理。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

NSString *url = request.URL.absoluteString;
NSLog(@"____%@",url);

if(![self isNetwork]){
 //无网情况的一个处理
}else if([url hasSuffix:@"ios/test"]){
    
    //do something you want return NO;
}
return YES;
}

使用WebViewJavascriptBridge与JS交互

WebViewJavascriptBridge是一个轻量的用于OC与JS交互的第三方库，使用它可以用CocoaPods导入：
pod 'WebViewJavascriptBridge', '~> 5.0'
也可以在Github上下载示例工程，将工程文件WebViewJavascriptBridge拖入自己项目中。本节主要介绍使用方法，关于实现原理网上介绍也比较多，感兴趣的同学可以自行了解。

引入WebViewJavascriptBridge

 //设置能够进行桥接
[WebViewJavascriptBridge enableLogging];
//注册handler在Object-C，如果有self.webView.delegate = self。应注释掉，否则注册方法不执行
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];

//如果想执行UIWebView的代理方法，需设置
[self.bridge setWebViewDelegate:self];

JS调用OC
JS调用原生方法getUsername，可以使用如下方式注册。JS需要返回值的可以用responseCallback将返回值传过去

[self.bridge registerHandler:@"getUsername" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"%@",data);
    responseCallback([self getUsername]);
}];

OC调用JS
OC调用JS可以使用如下方法实现，如果需要传参，可以写到参数data:里，如果没有参数就传nil

//OC调JS的方法
[self.bridge callHandler:@"testJavascriptHandler" data:nil responseCallback:^(id responseData) {

    NSLog(@"ObjC received response: %@", responseData);
}];

常见的处理JS与OC之间交互的问题，基本就这些了。希望对大家有所帮助，Demo在这里传送门

网友评论

路漫漫其修远兮Wzt:简单易懂很实用...谢谢分享
什么的黑夜:你好，请问下面这个block是如何创建的，麻烦告知

self.context[@"passValue"] = ^(NSString *str){
NSLog(@"%@",str);
};
什么的黑夜:@勇闯天涯茉莉花茶不好意思我的失误，少敲了一个path
什么的黑夜:@勇闯天涯茉莉花茶如果我没有传参数或者传多个参数应该怎么写这个block，而且我写self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame. javaScriptContext"];提示没有定义
zhangferry:@什么的黑夜直接拼写就行啦，输出的str就是passValue函数传的参数

本文标题：iOS中实现JS和OC的交互(Hybrid App)

本文链接：https://www.haomeiwen.com/subject/ouovsttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

iOS中实现JS和OC的交互(Hybrid App)

目录

使用JavaScriptCore与JS交互

JavaScriptCore了解

网页内容

获取JS点击事件

OC调用JS方法

加载新的URL

使用WebViewJavascriptBridge与JS交互

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS 开发笔记

杏仁丶的iOS学习专题

混合开发

首页投稿（暂停使用，暂停投稿）

我爱编程