文档章节

iOS与H5的交互【WKWebView】

胡子先森
 胡子先森
发布于 2017/04/27 14:40
字数 1227
阅读 13
收藏 0
点赞 0
评论 0

H5因其及时响应的更新速度媲美着需求的速度和较高的趣味性受到越来越多的用户的青睐。目前,大多数的应用中都嵌入了H5。优点非常明显。那么在iOS应用中如何嵌入一个H5,并且和它进行交互就成了一个势必要掌握的技术了。本文我将结合我在项目中的一些需求整理出对应的技术点,仅供参考。

在iOS开发中,H5的嵌入可以通过UIWebView或者WKWebView。这两个都是继承UIView,来加载web数据的类。UIWebView是在iOS2的时候开始使用的。特点是加载速度慢,占用内存多,优化艰难。WKWebView是在iOS8苹果新推出的,加载速度快,占用内存较少,是一个不错的选择。如果想要比较两者的区别,您可以选择一个网页进行测试一下。鉴上所述,我们选择WKWebView进行开发。好了,废话不多说了。

1.WKWebView创建和加载

1

2

3

4

5

6

7

8

9

10

11

12

- (void)createWebView

{

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]

    // 根据需要去设置对应的属性

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

    webView.navigationDelegate = self;

    [self.view addSubview:webView];    

99

    NSURL *url = [NSURL URLWithString:self.strURL];

    [self loadWebViewWithURL:url];    // JS调用OC 添加处理脚本

    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];

}

2.JS调用OC代码。

1

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];

这是利用WKWebView的一个新特性MessageHandler来处理JS调用原生方法。要实现JS调用iOS原生方法,步骤见下。

  • 添加协议。让控制器成为MessageHandler的代理对象。

  • 对于监听的方法名要和JS开发的人商量好。这里我们监听的是Share方法,对于JS开发的人员必须要以以下方式写。

1

window.webkit.messageHandlers. Share.postMessage(null)

  • 实现协议方法。在这个方法里message参数有一个属性body。message.body就是JS传过来的参数,可以是字符串,可以是数组,也可以是字典。通过message.name判断可以知道监听的是JS的哪个方法。

1

2

3

4

5

6

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

{    

    if ([message.name isEqualToString:@"Share"]) {

             //TODO

    }

}

至此,JS调用OC代码就已完结。是不是很简单。另外,我在网上也看到了不一样的处理方式。大家可以参考WebViewJavascriptBridge我觉得写的比较清楚。本人还没有尝试过这种,如果都尝试过的宝宝能不能分享一下两者的优缺点啊。

3. OC调用JS代码。

1

2

3

[self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {

        //TODO

}];

相信代码已经看得很清楚啦。show()就是JS写的方法,这个方法可传可不传参数,具体依实际情况而定。另外关于UIWebView和JS的交互,以下部分仅供参考。

1

2

3

4

5

6

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    context[@"Share"] = ^() {

        NSArray *args = [JSContext currentArguments];

        dispatch_async(dispatch_get_main_queue(), ^{

                //TODO

        });

4. 关于

网页加载开始,结束,失败这几个都特别简单,我就不赘述了。说一下下面这个协议方法,这个方法发生在页面跳转中。WKNavigationActionPolicy是一个枚举,WKNavigationActionPolicyAllow表示允许跳转,WKNavigationActionPolicyCancel表示取消跳转。对了,这里还有一个补充: scrollView嵌套网页和原生view,原生view要根据网页的高度来布局。我看到不少的电商应用都有这种布局,但在算高度上会有各种问题,不知道你们有遇见过?

1

2

3

4

5

6

7

8

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

{

    NSString *url = navigationAction.request.URL.absoluteString;

    if(![url isEqualToString:self.strURL]) {

          // 页面跳转

    }

    decisionHandler(WKNavigationActionPolicyAllow);

}

5. 关于< WKUIDelegate >

不知道您有没有遇见过JS写的alert()框在iOS上不弹出。那么您有没有实现这些协议方法呢。

1

2

3

4

5

6

7

8

/// 创建一个新的WebView

- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

/// 输入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;

/// 确认框

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

/// 警告框

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

6. 获取网页标题,网页加载进度和加载状态

这是通过KVO的方式进行监听的。您可以点击进WKWebView的内部看一下,他们每个属性上面都有很长的解释,你不难发现这一段。举一个获取标题的例子。其他的类似。别忘了,KVO监听在dealloc中移除监听者哦。

1366318-36129613d715789a.jpg

1

[self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:NULL];

1

2

3

4

5

6

7

8

9

10

11

12

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context

{  

    if ([keyPath isEqualToString:@"title"]) {

        if (object == self.webView) {

            if(self.navigationController) 

                self.navigationItem.title = self.webView.title;

        }

    }

    else {

        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];

    }

}

以上就是我个人对WKWebView的一些理解。demo就不奉上了,这个要服务端配合。因为我写的H5基本见不了人,哈哈,我会努力的!

© 著作权归作者所有

共有 人打赏支持
胡子先森
粉丝 0
博文 19
码字总数 3019
作品 0
通州
小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/26 ⋅ 0

小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

iOS基于FMDB数据库链式操作、壁纸项目、快速开发组件、弹窗效果、转场动画等源码

iOS精选源码 swift与h5编写面试题集锦(http://www.code4app.com/thread-29571-1-1.html) webView wkwebView 截屏,scrollView 截屏,图片拼接,加logo(http://www.code4app.com/thread-29583......

sunnyaigd ⋅ 05/08 ⋅ 0

开发微信H5视频秀项目遇到的坑

介绍 手头上正好有个项目,需要做一个微信端H5视频秀的一个项目,想想好像挺简单的,由两个视频组成,播放完第一个视频后点击按钮继而播放第二个视频。好了,结果微信的坑TM的多 问题排查 自...

🚲Allen ⋅ 05/18 ⋅ 0

iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码

iOS精选源码 一个调用系统通讯录和获取通讯录所有联系人的封装(http://www.code4app.com/thread-29726-1-1.html) ios scrollview嵌套tableview同向滑动(初级、进阶), 支持OC / Swift(http...

sunnyaigd ⋅ 05/15 ⋅ 0

移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区 ⋅ 06/11 ⋅ 0

iOS WKWebView和JS交互的两种方式

本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMessageHandler UIWebViewDelegate回调方法中处理 WKWebViewConfiguration注入WKScriptMessageHandler 网页很......

aron1992 ⋅ 2017/02/18 ⋅ 0

目前有成熟的App代码翻译技术吗?

大家好: 本人多年技术老鸟,现有抛出一个思考。针对目前市面上的移动互联网项目(主要指客户端)类型,无非以下几种主要类型: 原生App: iOS/Android H5响应式 H5套壳(PhoneGap/微信小程序/国...

瑾少 ⋅ 04/14 ⋅ 0

3.3 Js、App和缓存---熊孩子、篮子和仓库

前端组合:熊孩子、村姑、化妆师   上次在这提到村姑和化妆师的故事,其实村姑背后有个大家族。上次教大家如何用代码做自我介绍,其实用到了JavaScript(简称js)。   html只是个静态页面...

产品经理的技术课堂 ⋅ 04/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 30分钟前 ⋅ 0

彻底删除Microsoft Office的方法

参照此链接彻底删除Office https://support.office.com/zh-cn/article/%e4%bb%8e-pc-%e5%8d%b8%e8%bd%bd-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8?ui=zh-CN&rs=zh-CN&ad=CN......

Kampfer ⋅ 45分钟前 ⋅ 0

大盘与个股之间关系

大盘走多:积极出手 顺势加码 大盘走空: 少量出手 退场观望 大盘做头:逆势减码 少量操作 大盘做底 : 小量建仓 小量试单

guozenhua ⋅ 46分钟前 ⋅ 0

Day16 LVM(逻辑卷管理)与磁盘故障小案例

lvm详解 简述 LVM的产生是因为传统的分区一旦分区好后就无法在线扩充空间,也存在一些工具能实现在线扩充空间但是还是会面临数据损坏的风险;传统的分区当分区空间不足时,一般的解决办法是再...

杉下 ⋅ 53分钟前 ⋅ 0

rsync实现多台linux服务器的文件同步

一、首先安装rsync,怎样安装都行,rpm,yum,还是你用源码安装都可以。因为我用的是阿里云的ESC,yum install rsync就ok了。 二、配置rsync服务 1.先建立个同步数据的帐号 123 groupadd r...

在下头真的很硬 ⋅ 今天 ⋅ 0

前端基础(三):函数

字数:1685 阅读时间:5分钟 函数定义 在最新的ES规范中,声明函数有4中方法: -函数声明 -函数表达式 -构造函数Function -生成器函数 1.函数声明 语法: function name([param[, param2 [....

老司机带你撸代码 ⋅ 今天 ⋅ 0

Java虚拟机的Heap监狱

在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。 中国人把Stack翻译成“栈”,把Hea...

java高级架构牛人 ⋅ 今天 ⋅ 0

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 今天 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 今天 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部