初次聽到oc與js交互時,你可能會覺得這是一種高深的技術(shù)珊蟀,其實不然左痢,它并不高深,也很好學(xué)系洛,oc與js交互還有另外一個很高大上的名字叫 Hybrid開發(fā)。
蘋果提供了一個JavaScriptCore框架略步,用于oc與js交互描扯,里面主要有這幾個類
- JSContext:給JavaScript提供運行的上下文環(huán)境
- JSValue:JavaScript和Objective-C數(shù)據(jù)和方法的橋梁
- JSManagedValue:管理數(shù)據(jù)和方法的類
- JSVirtualMachine:處理線程相關(guān),使用較少
- JSExport:這是一個協(xié)議趟薄,如果采用協(xié)議的方法交互绽诚,自己定義的協(xié)議必須遵守此協(xié)議
下面我用最少的代碼來實現(xiàn)js交互,為的就是讓小白快速學(xué)會js交互杭煎,大神可以略過恩够。。羡铲。這幾個類不會全部用到蜂桶,如果你感興趣,可以看一下官方文檔也切,深入學(xué)習(xí)扑媚。
js與oc交互腰湾,就是網(wǎng)頁與原生代碼互相調(diào)用,首先我們創(chuàng)建一個含有js代碼的網(wǎng)頁js.html
,里面有三個按鈕疆股,當(dāng)點擊按鈕的時調(diào)用原生方法费坊。
js.html
源碼如下
function buttonClick1(){
ocObject.buttonClick();
}
function buttonClick2(){
ocObject.buttonClick2("給我打印這個字符串");
}
function buttonClick3(){
ocObject.buttonClick3("參數(shù)1","參數(shù)2","參數(shù)3");
}
</script>
<button onclick="buttonClick1()">調(diào)無參方法</button>
<br /><br />
<button onclick="buttonClick2()">調(diào)1個參方法</button>
<br /><br />
<button onclick="buttonClick3()">調(diào)3個參方法</button>
創(chuàng)建一個與js交互的原生類JSClass
, 定義一個協(xié)議JSClassDelegate
繼承自協(xié)議JSExport
,JSClassDelegate
中定義了js調(diào)用的方法旬痹,JSClass
需遵守該協(xié)議才能與js交互附井。
JSClass.h
源碼如下
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSClassDelegate <JSExport>
- (void)buttonClick;
- (void)buttonClick2:(NSString *)arg;
- (void)buttonClick3:(NSString *)arg1 :(NSString*)arg2 :(NSString*)arg3;
@end
@interface JSClass : NSObject<JSClassDelegate>
@end
JSClass.m
源碼如下
#import "JSClass.h"
@implementation JSClass
- (void)buttonClick{
NSLog(@"點擊了按鈕");
}
- (void)buttonClick2:(NSString *)arg{
NSLog(@"%@",arg);
}
- (void)buttonClick3:(NSString *)arg1 :(NSString *)arg2 :(NSString *)arg3{
NSLog(@"%@",arg1);
NSLog(@"%@",arg2);
NSLog(@"%@",arg3);
}
@end
有了html頁面和JSClass,下面就可以將它們綁定起來了两残。
直接上代碼
#import "ViewController.h"
#import "JSClass.h"
@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic,weak) UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSString *path = [[NSBundle mainBundle] pathForResource:@"js" ofType:@"html"];
NSString *content = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
if (content.length == 0) return;
UIWebView *webView = [[UIWebView alloc] init];
webView.delegate = self;
[self.view addSubview:webView];
self.webView = webView;
[webView loadHTMLString:content baseURL:nil];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//獲取js上下文對象
JSContext *context =[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//創(chuàng)建與js綁定的原生對象
JSClass *jsObject = [JSClass new];
//原生對象傳給js
context[@"ocObject"] = jsObject;
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.webView.frame = self.view.bounds;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
我們來運行一下
[站外圖片上傳中...(image-d3a467-1533198469914)]
有點丑永毅,但是不影響我們調(diào)試功能
依次點擊三個按鈕后打印信息如下
2018-08-02 16:06:03.116370+0800 Hybrid_demo[31435:3830397] 調(diào)用了oc的無參方法
2018-08-02 16:06:04.581703+0800 Hybrid_demo[31435:3830397] 給我打印這個字符串
2018-08-02 16:06:05.485736+0800 Hybrid_demo[31435:3830397] 參數(shù)1
2018-08-02 16:06:05.486490+0800 Hybrid_demo[31435:3830397] 參數(shù)2
2018-08-02 16:06:05.487110+0800 Hybrid_demo[31435:3830397] 參數(shù)3
說明js已經(jīng)成功調(diào)用了原生方法,是不是so easy
源碼地址:https://github.com/delims/Hybrid_demo.git
歡迎轉(zhuǎn)載磕昼,轉(zhuǎn)載請注明原文地址卷雕,謝謝~