快速學(xué)會Hybrid開發(fā)

初次聽到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é)議JSExportJSClassDelegate中定義了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)載請注明原文地址卷雕,謝謝~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市票从,隨后出現(xiàn)的幾起案子漫雕,更是在濱河造成了極大的恐慌,老刑警劉巖峰鄙,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浸间,死亡現(xiàn)場離奇詭異,居然都是意外死亡吟榴,警方通過查閱死者的電腦和手機魁蒜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吩翻,“玉大人兜看,你說我怎么就攤上這事∠料梗” “怎么了细移?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長熊锭。 經(jīng)常有香客問我弧轧,道長,這世上最難降的妖魔是什么碗殷? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任精绎,我火速辦了婚禮,結(jié)果婚禮上锌妻,老公的妹妹穿的比我還像新娘代乃。我一直安慰自己,他們只是感情好仿粹,可當(dāng)我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布襟己。 她就那樣靜靜地躺著引谜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪擎浴。 梳的紋絲不亂的頭發(fā)上员咽,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天,我揣著相機與錄音贮预,去河邊找鬼贝室。 笑死,一個胖子當(dāng)著我的面吹牛仿吞,可吹牛的內(nèi)容都是我干的滑频。 我是一名探鬼主播,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼唤冈,長吁一口氣:“原來是場噩夢啊……” “哼峡迷!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起你虹,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤绘搞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后傅物,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夯辖,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年董饰,在試婚紗的時候發(fā)現(xiàn)自己被綠了蒿褂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡卒暂,死狀恐怖啄栓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情也祠,我是刑警寧澤谴供,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站齿坷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏数焊。R本人自食惡果不足惜永淌,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望佩耳。 院中可真熱鬧遂蛀,春花似錦、人聲如沸干厚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至所坯,卻和暖如春谆扎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背芹助。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工堂湖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人状土。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓无蜂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蒙谓。 傳聞我的和親對象是個殘疾皇子斥季,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容