iOS交互h5— JavaScriptCore ---UIWebview

JavaScriptCore这个框架，从而让web页面和本地原生应用交互起来非常方便，而且使用此框架可以做到Android那边和iOS相对统一， web前端

在三端交互中，web前端开发人员来定义，让另外两端去做适配。在这里以调用摄像头和分享为例来详细讲解，测试网页代码取名为test.html，其代码内容如下：

 

js端

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
    <div style="margin-top: 100px">
        <h1>Objective-C和JavaScript交互的那些事</h1>
        <input type="button" value="CallCamera" onclick="Toyun.callCamera()">
    </div>       

    <div>
        <input type="button" value="Share" onclick="callShare()">
    </div>

<script>
    var callShare = function() {
        var shareInfo = JSON.stringify({"title": "标题", "desc": "内容", "shareUrl": "http://www.jianshu.com/p/f896d73c670a",
        "shareIco":"//upload-images.jianshu.io/upload_images/1192353-fd26211d54aea8a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"});
        Toyun.share(shareInfo);
    }

    var picCallback = function(photos) {
        alert(photos);
    }

    var shareCallback = function(){
        alert('success');
    }
</script>
</body>
</html>
Toyun.方法名------表示js端调用iOS端方法
--------------------------------------------------------------------------------------

iOS

web前端会让我们定义，但是我们定义好之后他又要修改，这时候就会很烦啊。所以碰到三端交互的时候最好就是让iOS和web前端定义好的去写代码。web页面调用原生应用的方法可以用Block两种方法，此文以按 JavaScriptCore中类及协议：

  • JSContext：给JavaScript和ViewController中的代码
#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSObjcDelegate <JSExport>

- (void)callCamera;
- (void)share:(NSString *)shareString;

@end

@interface ViewController () <UIWebViewDelegate, JSObjcDelegate>

@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

#pragma mark - Life Circle

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
    [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];

}

#pragma mark - UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"Toyun"] = self;//此处的self最好更换为一个单例类（这个单列类遵循AppJSProtocol，这样可以避免self被js持有无法释放的问题）
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
}

#pragma mark - JSObjcDelegate

- (void)callCamera {
    NSLog(@"callCamera");
    // 获取到照片之后在回调js的方法picCallback把图片传出去
    JSValue *picCallback = self.jsContext[@"picCallback"];
    [picCallback callWithArguments:@[@"photos"]];
}

- (void)share:(NSString *)shareString {
    NSLog(@"share:%@", shareString);
    // 分享成功回调js的方法shareCallback
    JSValue *shareCallback = self.jsContext[@"shareCallback"];
    [shareCallback callWithArguments:nil];
}

@end
ViewController中的代码解释

自定义JSExport这个协议，自定义协议中的方法就是暴露给webView加载完毕的时候获取JavaScript运行的上下文环境，然后再注入桥梁对象名为self即为此控制器，控制器遵守此自定义协议实现协议中对应的方法。在JavaStript中对应的方法，从而实现了本地应用之间的通讯。

JavaScriptCore使用注意

JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段 使用时两个注意点：

1. ViewController中 

JSObjcDelegate 名下的方法不能加 optional ；  

2. JSObjcDelegate 中的方法不但名称要和 js 中声明的一致，参数类型也要一致 

----------------------------------------------------------------------------------------------

参考文档：http://blog.csdn.net/longzs/article/details/50595709

posted @ 2017-03-16 14:40  有棱角的圆  阅读(1159)  评论(0)  编辑  收藏  举报