超全的OC與JS交互

一直以來啊,覺得我們iOS跟js交互,并沒有多難。前有三方橋接,后有大系統(tǒng)庫。so easy嘛,所以一直沒有深入研究過。

我以為要是交互簡(jiǎn)單就行,我就可以專心吃雞!
好好吃雞,天天向上.gif

你以為的總是你以為的,干活嘍!吃雞能咋的,并不能!

下面看看什么背景,需求,導(dǎo)致我得把這個(gè)交互,原原本本的又梳理了一次。

背景

項(xiàng)目要在11.11這個(gè)大節(jié)日前上線商城功能,東西較多,所以部分功能使用H5,這樣分擔(dān)部分移動(dòng)端任務(wù)。

需求
  • 完成網(wǎng)頁中某個(gè)活動(dòng)下的商品點(diǎn)擊進(jìn)入商品詳情
  • 完成單個(gè)網(wǎng)頁的動(dòng)態(tài)化分享內(nèi)容
  • 后臺(tái)最好寫一套內(nèi)容,完成安卓,iOS 兩端同時(shí)可交互
問題,以及解決
  1. 一個(gè)onclick的網(wǎng)頁交互沒問題,采用下面JS這個(gè)庫,沒問題,但是多參數(shù),安卓,iOS的方法格式不太一樣

---需要解決方法統(tǒng)一的問題

解決:iOS將方法分解成多參數(shù)的,下邊具體說了,就明白了。

1.有點(diǎn)擊事件的交互

單參數(shù)交互--//優(yōu)惠券獲取商品ID

  • H5寫法
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS與OC交互</h2>
<input type="button" value="喚醒本地方法(redirection)" onclick="yulinjs.redirection('123')">
</div>

</body>
</html>
  • iOS---在HYBJsObjCModel.h
@protocol JavaScriptObjectiveCDelegate <JSExport>

//優(yōu)惠券獲取商品ID
- (void)redirection:(NSString *)goods_commonid;
//秒殺活動(dòng)獲取商品ID

@end
  • iOS---在HYBJsObjCModel.m
- (void)redirection:(NSString *)goods_commonid{
    //獲取到商品ID,進(jìn)行相關(guān)跳轉(zhuǎn)事件即可
}

多參數(shù)交互--通過點(diǎn)擊通過點(diǎn)擊事件獲取多個(gè)參數(shù)值[分享內(nèi)容]

先看下iOS多個(gè)參數(shù)的方法,與安卓,JS是不同的
//獲取分享的內(nèi)容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url; 
  • H5---
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS與OC交互</h2>
<input type="button" value="喚醒本地方法(getShareTitleDescIconUrl)" onclick=“yulinjs.getShareTitleDescIconUrl(‘1’,’2’,’3’,’4’)”>
</div>


</body>
</html>
  • iOS----在HYBJsObjCModel.h
@protocol JavaScriptObjectiveCDelegate <JSExport>

//獲取分享的內(nèi)容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url; 

@end
  • iOS---在HYBJsObjCModel.m
//獲取分享的內(nèi)容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url {
    
}

2.點(diǎn)擊事件的交互無【獲取分享內(nèi)容為例】

==問題==:js不通過點(diǎn)擊方法,直接調(diào)用原生定義好的方法,安卓依然可以監(jiān)測(cè)到,iOS 不行

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS與OC交互</h2>

<body> <script type="text/javascript">setTimeout('yulinjs.redirection('123');',2000)</script></body>

</body>
</html>

==原因== :js調(diào)用方法時(shí),ios網(wǎng)頁還沒有加載完畢,所以沒有js對(duì)象,不能夠監(jiān)測(cè)到交互事件

++如果H5監(jiān)測(cè)不到加載完畢,可采用方法如下++

采用iOS 原生調(diào)用js的方法,js方法里邊,再次調(diào)用ios原生,在網(wǎng)頁加載完畢的時(shí)候,進(jìn)行js,ios交互

  • ios代碼如下
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"yulinjs"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"異常信息:%@", exceptionValue);
    };
    

    //靜態(tài)獲取該網(wǎng)頁的數(shù)據(jù)流程
    //1.網(wǎng)頁加載完畢,原生調(diào)用js的某個(gè)方法
    //2.js獲取通知,通過調(diào)用ios原生方法,傳值
    JSValue *Callback = self.jsContext[@"callJS"];
    //傳值給web端
    [Callback callWithArguments:@[@"喚起本地OC回調(diào)完成"]];
    
}
  • H5代碼如下
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS與OC交互</h2>

/*雙引號(hào)里邊加單引號(hào),單引號(hào)里邊加雙引號(hào)*/
<script>
    
var callJS = function(){
    alert("成功")
   yulinjs.getShareTitleDescIconUrl(‘1’,’2’,’3’,’4’);
}
</script>

</body>
</html>

下面demo,一看就懂[https://pan.baidu.com/s/1miN2qhi]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評(píng)論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,656評(píng)論 3 419
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,697評(píng)論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,098評(píng)論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,855評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,254評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評(píng)論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,473評(píng)論 0 289
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,014評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,833評(píng)論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,016評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,273評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評(píng)論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,730評(píng)論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,006評(píng)論 2 374

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,667評(píng)論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,154評(píng)論 4 61
  • 三月街是大理的紅燈區(qū),在古城邊上,一條石路,直通向蒼山。 三月街的兩邊是五光十色的KTV和隱蔽胡同,墻壁上印著話筒...
    一二三五四閱讀 470評(píng)論 1 4
  • 今天接著聊口才——《普通人快速崛起的10大狠招》之第五狠招。 昨天的簡(jiǎn)書里,我寫了自己曾經(jīng)做音樂老師、做教育培訓(xùn)老...
    楚歌兒閱讀 267評(píng)論 4 2
  • 也不知是誰起的頭,噴歷史,噴偉人,噴英雄,噴理想,噴民族,噴政府,噴人民......噴得自己一無是處。結(jié)果呢?人人...
    老牛321閱讀 202評(píng)論 1 2