html 调用oc方法,JS调用Native方法（OC）

最近用到js调用原生方法，在这里做个总结记录。

调用原生时会用到JSContext，官方文档解释如下：

/*!

@interface

@discussion A JSContext is a JavaScript execution environment. All

JavaScript execution takes place within a context, and all JavaScript values

are tied to a context.

*/

JSContext是一个JS运行环境，也就是上下文的意思吧，也就相当于拿到了这个JSContext拿到了JS运行环境，可以利用JSContext直接进行操作JS。

使用：

1.声明一个协议MyJSExport，这个协议必须遵循 JSExport，给协议添加协议方法，协议方法必须是required

2.创建一个对象这个对象必须遵循MyJSExport协议，或者为一个对象添加MyJSExport协议

3.实例化一个JSContext对象，jsContext

4.给新创建的JSContext对象赋值，并调用对应的方法

- (void)webViewDidFinishLoad:(UIWebView *)webView {

self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

//这种方法不需要构建对象模型，也就是上面的1、2步都不需要 但是添加一个方法都需要写一个block

self.jsContext[@"test1"] = ^(){

};

//方法二 模型注入 在JS中直接调用NAtiveObject.方法名 就可以了(方法必须在MyJSExport协议中声明)

self.jsContext[@"NativeObject"] = self;

}

代码部分：

WebViewViewController.m

#import "WebViewViewController.h"

#import

@protocol MyJSExport

- (void)test1;

- (void)test2;

@end

@interface WebViewViewController ()

@property (nonatomic,strong) JSContext *jsContext;

@property (nonatomic,strong) UIWebView *webView;

@end

@implementation WebViewViewController

- (void)viewDidLoad {

self.webView = [[UIWebView alloc] init];

self.webView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

self.webView.delegate = self;

[self.view addSubview:self.webView];

NSURL *url = [[NSBundle mainBundle] URLForResource:@"a" withExtension:@"html"];

[self.webView loadRequest:[NSURLRequest requestWithURL:url]];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *ex){

context.exception = ex;

NSLog(@"异常信息%@",ex);

};

self.jsContext[@"NativeObject"] = self;

self.jsContext[@"test1"] = ^(){

NSLog(@"test1调用了");

};

}

- (void)test2{

NSLog(@"方法2调用了");

}

a.html

JSAndNative

.main-wrap ul {

width: 100%;

display: inline-block;

padding-top: 20px;

}

.main-wrap ul li {

float: left;

width: 100%;

height: 40px;

line-height: 40px;

font-size: 14px;

margin-bottom: 20px;

background-color: #00D000;

color: #fff;

text-align: center;

}

.main-wrap ul li:active {

opacity: 0.8;

}

• fun1
• fun2

function JS_Native1() {

test1();

}

function JS_Native2() {

NativeObject.test2();

}