H5頁(yè)面調(diào)原生方法

H5與原生頁(yè)面交互是一個(gè)很常見(jiàn)的需求。
app頁(yè)面調(diào)用h5方法很簡(jiǎn)單webView就有方法直接就可以調(diào)用JS方法這里不說(shuō)姻几。
我們今天說(shuō)說(shuō)h5頁(yè)面調(diào)用APP內(nèi)方法宜狐。

一. 實(shí)現(xiàn)方式有很多種,我知道有:

1.攔截跳轉(zhuǎn)地址蛇捌,這個(gè)方法很古老抚恒,做法是在webVIew將要跳轉(zhuǎn)網(wǎng)站時(shí)利用監(jiān)聽(tīng)使其不跳轉(zhuǎn),此時(shí)可以獲取到將要跳轉(zhuǎn)的地址络拌。讓h5吧數(shù)據(jù)放在一個(gè)地址中俭驮,然后app用上面方法就可以攔截。
2.一個(gè)三方的東西春贸,叫WebViewJavascriptBridge混萝,有興趣的可以看看,這個(gè)我用了好一段時(shí)間萍恕。
3.JSContext這個(gè)是iOS7以后出的今天就是要簡(jiǎn)單介紹一下這個(gè)逸嘀。
ps:上面這些都是對(duì)應(yīng)UIWebView,對(duì)于使用WKWebView的同學(xué)也有一個(gè)交互的方法下面說(shuō)允粤。

二. JSContext

1.簡(jiǎn)介:

JSContext實(shí)現(xiàn)的方法是--把H5中js方法里的一個(gè)對(duì)象指定為APP原生的對(duì)象崭倘,這樣js中就可以用這個(gè)對(duì)象調(diào)用到APP原生中的方法了。

2.用法

UIWebView * webView = [[UIWebView alloc]initWithFrame:self.view.bounds];
webView.delegate = self;
NSString* path = [[NSBundle mainBundle] pathForResource:@"HelloWorld" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[webView loadRequest:request];

//上面都是創(chuàng)建webView类垫,咱們不說(shuō)司光。下面是“把H5中js方法里的一個(gè)對(duì)象指定為APP原生的對(duì)象”這個(gè)操作,這里可改變的就是JSContextTest這個(gè)是js中對(duì)象的名字是由app與h5約定好的悉患。這樣js中JSContextTest這個(gè)對(duì)象就是你當(dāng)前的對(duì)象了残家。
JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"JSContextTest"] = self;
context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
     context.exception = exceptionValue;
    NSLog(@"異常信息:%@", exceptionValue);
};

對(duì)于上面說(shuō)的第二步j(luò)s用對(duì)像調(diào)用方法,這里面方法也是有規(guī)定的不是直接寫(xiě)一個(gè)方法就可以的售躁。這些方法必須是要放在一個(gè)繼承JSExport協(xié)議的協(xié)議里面跪削。例如:

//創(chuàng)建協(xié)議
@protocol JSObjcDelegate <JSExport>
- (void)call;
@end

//在上面指定的類(lèi)中實(shí)現(xiàn)協(xié)議
- (void)call{
    NSLog(@"收到");
}

經(jīng)過(guò)上面的兩步操作js里面用JSContextTest調(diào)用call方法谴仙,APP原生就可以收到了迂求。

三.WKWebView 交互

1.簡(jiǎn)介:

原理和上面的是一個(gè)意思都是在js中指定一個(gè)對(duì)象碾盐,在這個(gè)對(duì)象調(diào)用方法時(shí),APP得到通知揩局。

2.用法

//設(shè)置Configuration毫玖,像js中注入一個(gè)對(duì)象叫jsCallOC這個(gè)對(duì)象指定為self
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addScriptMessageHandler:self name:@"jsCallOC"];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
  
//使用帶有配置的init方法指定Configuration
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectOffset(self.view.bounds, 0, 30)configuration:wkWebConfig];

這樣配置就可以了在具體使用上和JSContext有點(diǎn)區(qū)別,首先js調(diào)用的時(shí)候有特定的方法凌盯。ps:下面是js代碼

//js用這段代碼給app發(fā)送信息付枫,其中jsCallOC是和app約定好的對(duì)象名稱(chēng)
window.webkit.messageHandlers.jsCallOC.postMessage(要發(fā)送的JSON對(duì)象);

在app接受發(fā)來(lái)的信息驰怎,也是一個(gè)特定的方法阐滩,這個(gè)方法在協(xié)議WKScriptMessageHandler中掂榔,要指定當(dāng)前類(lèi)實(shí)現(xiàn)這個(gè)協(xié)議装获,然后在js發(fā)送信息是就會(huì)在這個(gè)協(xié)議里唯一的方法中接受到發(fā)送的信息厉颤。

//WKScriptMessageHandler協(xié)議中就這一個(gè)方法逼友,方法中message.body就是h5頁(yè)面發(fā)送的JSON數(shù)據(jù)
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"%@", message.body);
}

以上就是webVIew和js交互的簡(jiǎn)單用法帜乞。都沒(méi)有深究大家感興趣的可以一起研究。有什么事都可以直接找我状植。我無(wú)處不在哇哈哈~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末津畸,一起剝皮案震驚了整個(gè)濱河市必怜,隨后出現(xiàn)的幾起案子梳庆,更是在濱河造成了極大的恐慌卑惜,老刑警劉巖露久,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件毫痕,死亡現(xiàn)場(chǎng)離奇詭異消请,居然都是意外死亡类腮,警方通過(guò)查閱死者的電腦和手機(jī)蚜枢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)祟偷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)修肠,“玉大人,你說(shuō)我怎么就攤上這事饲化〕钥浚” “怎么了足淆?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵族奢,是天一觀的道長(zhǎng)丹鸿。 經(jīng)常有香客問(wèn)我,道長(zhǎng)廊敌,這世上最難降的妖魔是什么骡澈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任秧廉,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蔽豺。我一直安慰自己拧粪,他們只是感情好可霎,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布癣朗。 她就那樣靜靜地躺著旷余,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蠢熄。 梳的紋絲不亂的頭發(fā)上签孔,一...
    開(kāi)封第一講書(shū)人閱讀 51,562評(píng)論 1 305
  • 那天饥追,我揣著相機(jī)與錄音判耕,去河邊找鬼翘骂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛狸臣,可吹牛的內(nèi)容都是我干的烛亦。 我是一名探鬼主播懂拾,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼檬果,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼选脊!你這毒婦竟也來(lái)了恳啥?” 一聲冷哼從身側(cè)響起丹诀,我...
    開(kāi)封第一講書(shū)人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤扁藕,失蹤者是張志新(化名)和其女友劉穎亿柑,沒(méi)想到半個(gè)月后望薄,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體呼畸,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡卧须,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年花嘶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了椭员。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隘击。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡州叠,死狀恐怖莺禁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情忆绰,我是刑警寧澤错敢,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布纸淮,位于F島的核電站咽块,受9級(jí)特大地震影響侈沪,放射性物質(zhì)發(fā)生泄漏亭罪。R本人自食惡果不足惜应役,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望亚脆。 院中可真熱鬧濒持,春花似錦柑营、人聲如沸官套。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至因悲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝎土,已是汗流浹背誊涯。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留耗绿,地道東北人误阻。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓儒洛,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親琅锻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子卦停,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,139評(píng)論 25 707
  • 跟原生開(kāi)發(fā)相比,H5的開(kāi)發(fā)相對(duì)來(lái)一個(gè)成熟的框架和團(tuán)隊(duì)來(lái)講在開(kāi)發(fā)速度和開(kāi)發(fā)效率上有著比原生很大的優(yōu)勢(shì)恼蓬,至少不用等待審...
    大沖哥閱讀 1,846評(píng)論 0 7
  • 我是個(gè)北方妞,現(xiàn)居與吳儂軟語(yǔ)的江南水鄉(xiāng)郁油,跟別人聊天的時(shí)候總會(huì)問(wèn)道還吃的習(xí)慣嗎?這邊菜口味偏甜攀痊,像極了這邊...
    miss芍藥閱讀 427評(píng)論 2 2
  • 有時(shí)候不得不承認(rèn)桐腌,你生活的環(huán)境決定了你成為了什么樣的人。而如果你想跳出這樣的環(huán)境苟径,除非你有著強(qiáng)大的內(nèi)心和異常堅(jiān)定的...
    暁猴紙閱讀 161評(píng)論 0 0
  • 追蹤 Netty 異常占用堆外內(nèi)存的經(jīng)驗(yàn)分享LeanCloud團(tuán)隊(duì)關(guān)于Netty堆外內(nèi)存泄漏的調(diào)查 MongoDB...
    Jeff閱讀 251評(píng)論 0 1