WKWebView的使用总结(oc与js交互使用心得)

公司最近的项目用到的webview越来越多,各种方法回调和js交互

先总结一下webview协议方法的使用,再比较wk可替换的协议方法

UIWebViewDelegate几个常用的代理方法

1.//进行加载前的预判断,如果返回YES,则会进入后续流程(StartLoad,FinishLoad)。如果返回NO,这不会进入后续流程。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

2.//开始加载网页

- (void)webViewDidStartLoad:(UIWebView *)webView;

3.//加载完成

- (void)webViewDidFinishLoad:(UIWebView *)webView;

4.//加载失败

- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

然后再来看看wkwebview对于这有没有替代方法

先看看WKNavigationDelegate的协议方法

// 页面开始加载时调用

-(void)webView:(WKWebView*)webView didStartProvisionalNavigation:(WKNavigation*)navigation {

}

// 当内容开始返回时调用

-(void)webView:(WKWebView*)webView didCommitNavigation:(WKNavigation*)navigation {

}

// 页面加载完成之后调用

-(void)webView:(WKWebView*)webView didFinishNavigation:(WKNavigation*)navigation {

}

// 页面加载失败时调用

-(void)webView:(WKWebView*)webView didFailProvisionalNavigation:(WKNavigation*)navigation {

}

// 接收到服务器跳转请求之后调用

-(void)webView:(WKWebView*)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation*)navigation {

}

// 在收到响应后,决定是否跳转

-(void)webView:(WKWebView*)webView decidePolicyForNavigationResponse:(WKNavigationResponse*)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {

}

我们发现webview的load前,load结束以后和load失败三个方法在wkwebview里面都已经有替代方法了。现在要解决的就是加载前的判断,而wkwebview有一个

// 在发送请求之前,决定是否跳转

-(void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

}

这个方法完美替代。监听web的请求。这样就非常清楚了,对于wkwebview的使用就会很轻松

=============================================================

总结完了以后就说一下我的项目,之前项目用的是webview,现在用更加节省性能的wkwebview替换了,现在总结一下这次替换

首先要导入<webkit/webkit.h>

1.加载的方法还是一样的

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];

[self.view addSubview:webView];

2.当与js进行交互的时候的处理(很重要的哦)

当与js交互要用一个代理WKScriptMessageHandler,是属于<JavaScriptCore/JavaScriptCore.h>里面的,WKWebview的加载就要改变一下了。要使用到这个js交互

WKWebViewConfiguration*config = [[WKWebViewConfigurationalloc]init];

//初始化偏好设置属性:

preferencesconfig.preferences= [WKPreferencesnew];

//是否支持JavaScript

config.preferences.javaScriptEnabled=YES;

加载webview的时候就要加载这个WKWebViewConfiguration

这是js调用oc的方法

然后就要注册一下方法名

一定要注意,在dealloc方法里面要remove掉注册的方法,方式内存泄漏


也要注意服务器在js编写h5页面按钮点击方法的时候,必须要按照这个格式进行编写

window.webkit.messageHandlers.AppModel.postMessage({body: '传数据'});

示例:window.webkit.messageHandlers.showShareDialog.postMessage(null);这是不需要传参数的示例

然后在协议方法里面接收,并进行其他的操作

这就是当在h5页面有个按钮,但是点击事件是在本地的时候写点击事件的方法

这就是在wkwebview中用js调用OC的代码

然后就是OC调用js的方法

1.JS中要有一个等待被OC调用的方法,示例:

2.OC调用方法,示例:

首先要实例化一个WKWebView,这里如果没有JS调用OC的功能的话,配置WKWebViewConfiguration

接下来就是对JS方法的调用,我们在需要调用JS方法的位置加上下面代码:

[self.webView evaluateJavaScript:@"alertMessage('hello')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

alertMessage('hello')就是html中预留的方法,completionHandler会在JS方法执行完后执行。这样就能实现OC调用JS方法,但是当我们运行的时候我们会发现,并没有出现弹框,我们已经说过,当使用WKWebView时,html的弹窗将不会再显示,那想显示弹窗,我们需要实现WKUIDelegate的代理方法:

首先要遵守WKUIDelegate代理:_webView.UIDelegate = self;

接下来实现代理方法:

#pragma mark WKUIDelegate

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler

{

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Warning" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此处的completionHandler()就是调用JS方法时,`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

这样,弹窗就会显示出来了,而且是iOS自己的原生弹窗,我们可以通过自己的需求,对其进行定制。

3.监听web的请求

使用场景,当需要跳转到h5页面注册一个东西,然后注册完了以后服务器会给你返回注册的结果,然后根据这个结果来修改上一个页面的注册状态


这是一个自己写的,芝麻信用绑定的demo。在之前的页面会显示当前账号是否绑定了芝麻信用,没有的话就可以进入绑定,已经绑定过得就不能点击。显示效果也不一样。这是又app跳转到h5绑定的,在图上这个h5页面,提交了个人信息以后,芝麻信用会根据你提交的信息判断是否可以绑定,可以绑定的话会给你返回一个字段,示例

无论失败还是成功,都可以监听到,然后去进行下一步的操作


作为开发者,在项目应用中我们应该经常需要给js端传输数据显示,在wkwebview中使用注入js的方法给js传输数据

不过需要注意这个方法需要在webview完成加载以后才能调用。这个是js方法的一个回调,我们h5人员告诉我,这个方法在h5端是一个全局的方法,是不安全的。如果在其他地方再写一个相同名字的方法,这个方法就会被覆盖掉而不会再被执行。所以我们可以关注一下WebViewJavascriptBridge的使用,这个第三方更方便快捷的让我们使用js与本地的交互。以后会把我WebViewJavascriptBridge的工作使用总结出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容