众所周知,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的更多相关文章

  1. iOS交互h5— JavaScriptCore ---UIWebview

    JavaScriptCore这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android那边和iOS相对统一, web前端 在三端交互中,web前端开发人员来定义,让 ...

  2. iOS交互h5——user-agent

    User-Agent(用户代理)字符串是Web浏览器用于声明自身型号版本并随HTTP请求发送给Web服务器的字符串,在Web服务器上可以获取到该字符串. 在公司产品中,在userAgent中增加了XX ...

  3. WebViewJavascriptBridge详细使用 iOS与H5交互的方案

    WebViewJavascriptBridge详细使用 源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html    前言 WebView ...

  4. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

  5. 浅谈 iOS 与 H5 的交互- JavaScriptCore 框架

    前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...

  6. iOS与H5交互遇到的坑

    之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到了一些不得不踩的坑.在这里将我遇到的问题以及参考网上几位大神的 ...

  7. IOS与h5交互记录

    博主之前做过移动端app嵌入网页,与Android和IOS有交互,一直没有时间分享过程.这里不多说Android交互啦-很简单,详细了解IOS与h5的交互吧. IOS不同语法和h5的交互所建立的JSB ...

  8. h5与安卓、ios交互

    1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...

  9. iOS开发之WKWebView简单使用

    iOS开发之WKWebView简单使用   iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...

随机推荐

  1. C# AutoMapper 了解一下

    什么是AutoMapper? 简单来说就是将一个对象映射到另一个对象的代码. 摆脱了繁琐的赋值过程 (最常见也就是Model -——ViewModel) AutoMapper安装 我使用的是VS201 ...

  2. ABP框架入门踩坑-添加实体

    添加实体 ABP踩坑记录-目录 这里我以问答模块为例,记录一下我在创建实体类过程中碰到的一些坑. 审计属性 具体什么是审计属性我这里就不再介绍了,大家可以参考官方文档. 这里我是通过继承定义好的基类来 ...

  3. 深度认识 Sharding-JDBC:做最轻量级的数据库中间层

    转自: https://juejin.im/entry/5905ac37a22b9d0065e1199c 基于关系型数据库的水平扩展方案有很多开源的解决方案,但成熟稳定的产品凤毛麟角.当当自研的数据库 ...

  4. python 通过 pymysql模块 操作 mysql 数据库

    Python 中操作 MySQL 步骤 安装模块 pip install pymysql 引入模块 在py文件中引入pymysql模块 from pymysql import * Connection ...

  5. Plugin 'FEDERATED' is disabled. /usr/sbin/mysqld: Table 'mysql.plugin' doesn't exist

    问题:在linux上安装mysql的时候出现Plugin ‘FEDERATED’ is disabled. /usr/sbin/mysqld: Table ‘mysql.plugin’ doesn’t ...

  6. 操作实践题 - HTML 列表综合应用

    通过对列表的综合应用,编写如下效果网页: 解答: <html> <head> <title>操作实践题</title> <meta http-eq ...

  7. 教你利用Node.js漏洞搞事情

    PentestingNode.js Application : Nodejs Application Security 原文地址:http://www.websecgeeks.com/2017/04/ ...

  8. Python中通过函数对象创建全局变量

    先看下面这段代码,显然无法work. 因为代码试图在TestVariableScope()中引用一个没有被定义的变量a.所以必须报错,如下图-1. 不过如果你将第2行代码注释掉.代码就能跑通了,如图- ...

  9. 在MVC过滤器中获取触发的Controller、Action、参数 等

    首先是实现接口System.Web.Mvc.IActionFilter的过滤器 获取Controller.Action.参数 方法一. string actionName = filterContex ...

  10. Javascript中Date对象的格式化

    很多语言中都带有日期的格式化函数,而Javascript中却没有提供类似的方法.之前从某位前人的帖子中发现了下面的代码,感觉非常简洁,存留备用. /** * 时间对象的格式化; */ Date.pro ...