众所周知，UIWebView存在内存问题，也就是当加载一个UIWebView时，内存会一直上升趋势无法得到释放。这样在使用UIWebView进行h5交互开发时会有很大的问题。

因而苹果增加了一个新的类WKWebView，WKWebView速度更快、占用内存低。当然也有一些问题，比如说在缓存问题上会有很多的坑，不想UIWebView一样很容易进行缓存。

下面简单研究一下WKWebView交互h5的方式。（http://www.cnblogs.com/markstray/p/5757264.html）

初始化WKWebView，并添加JS端需要调用的OC端的方法名

self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(, , self.view.bounds.size.width, self.view.bounds.size.height/) configuration:config];

    [self.view addSubview:self.wkWebView];

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];

    NSURL *baseURL = [[NSBundle mainBundle] bundleURL];

    [self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];

    WKUserContentController *userCC = config.userContentController;

    //JS调用OC 添加处理脚本

    [userCC addScriptMessageHandler:self name:@"showMobile"];

    [userCC addScriptMessageHandler:self name:@"showName"];

    [userCC addScriptMessageHandler:self name:@"showSendMsg"];

OC端调用JS端方法：

if (!self.wkWebView.loading) {

        if (sender.tag == ) {

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

                //TODO

                NSLog(@"%@ %@",response,error);

            }];

        }

        if (sender.tag == ) {

            [self.wkWebView evaluateJavaScript:@"alertName('小红')" completionHandler:nil];

        }

        if (sender.tag == ) {

            [self.wkWebView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil];

        }

    } else {

        NSLog(@"the view is currently loading content");

    }

OC端供JS端调用的方法：

#pragma mark - WKScriptMessageHandler

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

    NSLog(@"%@",NSStringFromSelector(_cmd));

    NSLog(@"%@",message.body);

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

        [self showMsg:@"我是下面的小红 手机号是:18870707070"];

    }

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

        NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body];

        [self showMsg:info];

    }

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

        NSArray *array = message.body;

        NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",array.firstObject,array.lastObject];

        [self showMsg:info];

    }

}

网页端代码：

<html>

    <!--描述网页信息-->

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>小黄</title>

         <style>

            *{

                font-size: 50px;

            }

            .btn{height:80px; width:%; padding: 0px 30px; background-color: #0071E7; border: solid 1px #0071E7; border-radius:5px; font-size: 1em; color: white}

         </style>

        <script>

            function clear() {

                document.getElementById('mobile').innerHTML = ''

                document.getElementById('name').innerHTML = ''

                document.getElementById('msg').innerHTML = ''

            }

            //OC调用JS的方法列表

            function alertMobile() {

                //这里已经调用过来了 但是搞不明白为什么alert方法没有响应

                //alert('我是上面的小黄 手机号是:13300001111')

                document.getElementById('mobile').innerHTML = '我是上面的小黄 手机号是:13300001111'

            }

            function alertName(msg) {

                //alert('你好 ' + msg + ', 我也很高兴见到你')

                document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'

            }

            function alertSendMsg(num,msg) {

                //window.alert('这是我的手机号:' + num + ',' + msg + '!!')

                document.getElementById('msg').innerHTML = '这是我的手机号:' + num + ',' + msg + '!!'

            }

            //JS响应方法列表

            function btnClick1() {

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

            }

            function btnClick2() {

                window.webkit.messageHandlers.showName.postMessage('xiao黄')

            }

            function btnClick3() {

                window.webkit.messageHandlers.showSendMsg.postMessage(['', 'Go Climbing This Weekend !!!'])

            }

        </script>

    </head>

    <!--网页具体内容-->

    <body>

        <br/>

        <div>

            <label>小黄：</label>

        </div>

        <br/>

        <div id="mobile"></div>

        <div>

            <button class="btn" type="button" onclick="btnClick1()">小红的手机号</button>

        </div>

        <br/>

        <div id="name"></div>

        <div>

            <button class="btn" type="button" onclick="btnClick2()">打电话给小红</button>

        </div>

        <br/>

        <div id="msg"></div>

        <div>

            <button class="btn" type="button" onclick="btnClick3()">发短信给小红</button>

        </div>

    </body>

</html>

iOS 交互h5 - WKWebView的更多相关文章

iOS交互h5— JavaScriptCore ---UIWebview
JavaScriptCore这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android那边和iOS相对统一, web前端在三端交互中,web前端开发人员来定义,让 ...
iOS交互h5——user-agent
User-Agent(用户代理)字符串是Web浏览器用于声明自身型号版本并随HTTP请求发送给Web服务器的字符串,在Web服务器上可以获取到该字符串. 在公司产品中,在userAgent中增加了XX ...
WebViewJavascriptBridge详细使用 iOS与H5交互的方案
WebViewJavascriptBridge详细使用源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html 前言 WebView ...
iOS与H5交互
H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...
浅谈 iOS 与 H5 的交互- JavaScriptCore 框架
前言小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...
iOS与H5交互遇到的坑
之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到了一些不得不踩的坑.在这里将我遇到的问题以及参考网上几位大神的 ...
IOS与h5交互记录
博主之前做过移动端app嵌入网页,与Android和IOS有交互,一直没有时间分享过程.这里不多说Android交互啦-很简单,详细了解IOS与h5的交互吧. IOS不同语法和h5的交互所建立的JSB ...
h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
iOS开发之WKWebView简单使用
iOS开发之WKWebView简单使用 iOS开发之 WKWebVeiw使用想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...

随机推荐

Restframework 分页器 Pagnation 组件实例-5
分页逻辑 from rest_framework.pagination import PageNumberPagination class BookView(APIView): # authentic ...
Restframework 渲染器 render 组件实例-4
渲染器默认存放位置: 在默认配置下 default-settings里 (APIVIEW点击去--> 1. renderer_classes = api_settings.DEFAULT_REN ...
HEOI2014 南国满地堆轻絮
题目链接:戳我就是二分一个数,之后记录一个前缀max,然后和当前数做差再/2即可.(因为我们要使得原来的序列变成不下降序列,所以当然是要控制一个上限,以达到后面较小数能以尽可能小的代价增加) 代码如 ...
算法（Algorithm）
算法就是"把解决问题的步骤无一遗漏地用文字或图表示出来". 在解决问题的步骤中,有了与直觉相关的因素,就不是算法了.既然不是算法,也就不能用程序表示了.
利用DNSlog回显Weblogic(CVE-2017-10271) 漏洞执行命令结果
作者:Armyzer0 Weblogic(CVE-2017-10271) 漏洞出来以后又是一波血雨腥风,正好我昨天测试的时候发现了一个存在这个漏洞的weblogic,但是他不回显咋办呢!让他返回执行结 ...
Android安全防护防护———加密算法
摘要这篇文章本来早就应该写了,但是由于项目一直开发新的需求,就拖后了.现在有时间了,必须得写了.现在Android应用程序对安全防范这方面要求越来越高了.特别是金融行业,如果金融app没有没有做好相 ...
Kafka文件存储机制
一.topic中partition存储分布在本地的kafka中,我们只启动一个broker,创建两个topic:single-todo和single-todo-vip ,每个topic有两个part ...
java.util包详解
介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结构.本章介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结 ...
Concurrent包工具类使用
一.读写锁传统的同步锁就是独占式锁,当线程使用资源时候保持独占,无论读写.当人们发现请求队列(假设)中相邻请求为读-读的时候,阻塞是一种浪费资源的操作.比如公告板,所有路过的人(请求)都是读操作,并 ...
python学习笔记03-用户输入
name=Input(“your name”) 此处接受的数据类型为字符串整数转字符串 str(123) 整数转字符串 int(“123”)