WKWebView填坑之----與H5相互交互

APP的很大一部分功能都是原生和前端交互的另凌,所以總結(jié)一下吧展懈!
最低支持iOS 8.0直砂,所以能用WebKit的地方就沒有用UIWebView史辙。
直接說交互吧汹买,我個人站在iOS的角度來理解的交互有兩種佩伤,一種正向交互,一種逆向交互晦毙。正向交互就是H5來調(diào)用原生生巡,逆向交互就是原生調(diào)用H5,純粹是個人見解见妒,不喜勿噴孤荣。
1、創(chuàng)建

//要用WKWebView肯定需要引入庫须揣,有兩種方式
  1> #import <WebKit/WebKit.h>
  2> @import WebKit;
// 一般常用的估計是第一種吧盐股,第二種比較少見,引入系統(tǒng)庫的時候可以采用這種方式

// 一般還是聲明的全局屬性
@property (nonatomic,strong) WKWebView *webView;

// 創(chuàng)建可以直接創(chuàng)建也可以采用懶加載
- (void)creatWebView{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]
    WKUserContentController *userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    // 根據(jù)需要去設(shè)置對應(yīng)的屬性
    WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
    webView.navigationDelegate = self;
    [self.view addSubview:webView]; 
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]];
    [self.webView loadRequest:request];
}

2耻卡、代理

@protocol WKNavigationDelegate <NSObject>

@optional
//請求之前疯汁,決定是否要跳轉(zhuǎn):用戶點擊網(wǎng)頁上的鏈接,需要打開新頁面時卵酪,將先調(diào)用這個方法幌蚊。
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
//接收到相應(yīng)數(shù)據(jù)后,決定是否跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
//頁面開始加載時調(diào)用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
// 主機地址被重定向時調(diào)用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
// 頁面加載失敗時調(diào)用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
// 當內(nèi)容開始返回時調(diào)用
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation;
// 頁面加載完畢時調(diào)用
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;
//跳轉(zhuǎn)失敗時調(diào)用
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
// 如果需要證書驗證凛澎,與使用AFN進行HTTPS證書驗證是一樣的
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *__nullable credential))completionHandler;
//9.0才能使用霹肝,web內(nèi)容處理中斷時會觸發(fā)
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0);

@end

3、交互

// 首先說正交互吧
// webView創(chuàng)建后調(diào)用addScriptMessageHandler:方法塑煎,上接creatWebView方法
// 此處的“goBack”為iOS端與前端約定好的
[_userContentController addScriptMessageHandler:delegateController name:@"goBack"];
// 然后
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"goBack"]) {
       // 如果監(jiān)控到前端調(diào)用了 'goBack' 方法代碼就會走進來沫换,在這里做處理就行了
    }
}

4、坑
以上代碼寫完后并不是萬事大吉了最铁,你會發(fā)現(xiàn)在當前控制器消失時并不會走dealloc方法
原因就在于調(diào)用了 'addScriptMessageHandler' 方法

// 點進頭文件后你會發(fā)現(xiàn)方法是成對出現(xiàn)的
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

- (void)removeScriptMessageHandlerForName:(NSString *)name;
// 既然有 'add' 那就有 'remove' 
// 但是remove的時機就有點好玩了

// 在此我總結(jié)了幾種
// 1> 'add' 在 viewDidLoad 調(diào)用讯赏,'remove' 在 viewWillDisappear調(diào)用
// 這種寫法并不是不可以,前提是當前頁面沒有二級頁面了冷尉,如果有二級頁面就不能這么寫

// 2> 'add' 在 viewDidLoad 調(diào)用漱挎,'remove' 在當前頁面的 'pop' 方法調(diào)用
// 次方法解決了第一種方法的缺陷,但是還有一個問題雀哨,如果當前頁面有右滑返回手勢的話就不行

// 3> 使用代理
@interface ViewController ()<WKDelegate,WKNavigationDelegate,WKScriptMessageHandler>{
    WKWebView * webView;
    WKUserContentController* userContentController;
}
@end
@implementation ViewController
#pragma mark - lifeCircle
- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
    userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration];
    WKDelegateController * delegateController = [[WKDelegateController alloc]init];
    delegateController.delegate = self;

    [userContentController addScriptMessageHandler:delegateController  name:@"sayhello"];

    [self.view addSubview:webView];
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]]];
}
- (void)dealloc{
    //這里需要注意磕谅,前面增加過的方法一定要remove掉。
    [userContentController removeScriptMessageHandlerForName:@"goBack"];
}
// 發(fā)現(xiàn)代理是最好的一種方式

WKDelegateController.h代碼:

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

@protocol WKDelegate <NSObject>

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

@end

@interface WKDelegateController : UIViewController <WKScriptMessageHandler>
@property (weak , nonatomic) id<WKDelegate> delegate;
@end

WKDelegateController.m代碼:

#import "WKDelegateController.h"

@interface WKDelegateController ()

@end

@implementation WKDelegateController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];
    }
}

@end

5雾棺、原生調(diào)用JS代碼

// 在需要調(diào)用JS的地方執(zhí)行如下代碼
// 有參數(shù)
[self.webView evaluateJavaScript@"postInfo('參數(shù)1,參數(shù)2')"completionHandler:nil];
// 無參數(shù)
[self.webView evaluateJavaScript@"postInfo()"completionHandler:nil];
// 此處的 'postInfo()' 是前端的方法膊夹,需要前端告訴你
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市捌浩,隨后出現(xiàn)的幾起案子放刨,更是在濱河造成了極大的恐慌,老刑警劉巖尸饺,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件进统,死亡現(xiàn)場離奇詭異助币,居然都是意外死亡,警方通過查閱死者的電腦和手機螟碎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門眉菱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人掉分,你說我怎么就攤上這事倍谜。” “怎么了叉抡?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵尔崔,是天一觀的道長。 經(jīng)常有香客問我褥民,道長季春,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任消返,我火速辦了婚禮载弄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘撵颊。我一直安慰自己宇攻,他們只是感情好,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布倡勇。 她就那樣靜靜地躺著逞刷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪妻熊。 梳的紋絲不亂的頭發(fā)上夸浅,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機與錄音扔役,去河邊找鬼帆喇。 笑死,一個胖子當著我的面吹牛亿胸,可吹牛的內(nèi)容都是我干的坯钦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼侈玄,長吁一口氣:“原來是場噩夢啊……” “哼婉刀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起拗馒,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤路星,失蹤者是張志新(化名)和其女友劉穎溯街,沒想到半個月后诱桂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洋丐,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年挥等,在試婚紗的時候發(fā)現(xiàn)自己被綠了友绝。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡肝劲,死狀恐怖迁客,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辞槐,我是刑警寧澤掷漱,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站榄檬,受9級特大地震影響卜范,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鹿榜,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一海雪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧舱殿,春花似錦奥裸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至冈绊,卻和暖如春创倔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背焚碌。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工畦攘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人十电。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓知押,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鹃骂。 傳聞我的和親對象是個殘疾皇子台盯,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件畏线、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,117評論 4 61
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,408評論 7 249
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,262評論 25 707
  • 前言 關(guān)于UIWebView的介紹明垢,相信看過上文的小伙伴們,已經(jīng)大概清楚了吧市咽,如果有問題痊银,歡迎提問。 本文是本系列...
    CoderLF閱讀 8,973評論 2 12
  • “陳鋒施绎,來的夠早的溯革。”顧嚴沖著陳鋒笑了笑谷醉,安慰道:“那些話致稀,別往心里去,那幫人就是這德行俱尼,欠抽豺裆!” “我不會放心上...
    上官凱樂閱讀 296評論 0 2