当前位置: 首页 > news >正文

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的方法

首先还是要实例化一个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页面,提交了个人信息以后,芝麻信用会根据你提交的信息判断是否可以绑定,可以绑定的话会给你返回一个字段,示例


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

相关文章:

  • JavaScript 中的错误隔离
  • golang测试
  • java在线聊天项目 客户端登陆窗口LoginDialog的注册用户功能 修改注册逻辑 增空用户名密码的反馈 增加showMessageDialog()提示框...
  • 八个维度,谈谈产品经理的分类与发展方向
  • 第一课 安装 登陆CentOS 7
  • 创建和使用数据库
  • CSS中使用expression完美设置页面最小宽度
  • Android 从SetContentView()谈起
  • 为什么volatile不能保证原子性而Atomic可以?
  • SQL优化常用方法44
  • NoSQL
  • session再次理解
  • 陈杰:无服务器架构,让云端开发更纯粹
  • Redis的发布订阅及.NET客户端实现
  • 动态载入数据的无刷新TreeView控件(8)
  • 【RocksDB】TransactionDB源码分析
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • CEF与代理
  • download使用浅析
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • 从输入URL到页面加载发生了什么
  • 前端工程化(Gulp、Webpack)-webpack
  • 嵌入式文件系统
  • 如何在GitHub上创建个人博客
  • 说说动画卡顿的解决方案
  • 学习JavaScript数据结构与算法 — 树
  • Nginx实现动静分离
  • # 数论-逆元
  • #include
  • #Linux(Source Insight安装及工程建立)
  • #我与Java虚拟机的故事#连载05:Java虚拟机的修炼之道
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (二)JAVA使用POI操作excel
  • (三十五)大数据实战——Superset可视化平台搭建
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .NET Core引入性能分析引导优化
  • .net 按比例显示图片的缩略图
  • .Net接口调试与案例
  • @ConditionalOnProperty注解使用说明
  • []使用 Tortoise SVN 创建 Externals 外部引用目录
  • [【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器
  • [acwing周赛复盘] 第 94 场周赛20230311
  • [codeforces] 25E Test || hash
  • [Google Guava] 1.1-使用和避免null
  • [HCTF 2018]WarmUp (代码审计)
  • [java进阶]——方法引用改写Lambda表达式
  • [NOIP2000] 乘积最大
  • [OpenGL(Win32)] - 3D 轮廓字体
  • [POJ1236]Network of Schools(并查集+floyd,伪强连通分量)
  • [Power Query] 数据的拆分、提取与合并
  • [PY3]——logging
  • [SpringDataMongodb开发游戏服务器实战]
  • [uni-app ] createAnimation锚点旋转 及 二次失效问题处理
  • [Unity]关于iOS申请因为Advertising Identifier问题被拒绝的解决方法