有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑)。

有时候我们希望在页面内consloe.log(‘log something‘)的时候在控制台里看到输出,但手机里没有控制台,所以我们希望可以利用xcode的控制台输出信息。

因为iOS没有提供API让我们直接用html或者js来跟外部交互,所以我们必须用另外一种巧妙的办法来实现这两个功能。这种方法可以满足我们两种需求。

console.log

在html页面中重新定义console.log:

然后在需要捕获的viewController.m中实现协议:

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSString*requestString =[[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//NSLog(requestString);if([requestString hasPrefix:@"ios-log:"]){NSString*logString =[[requestString componentsSeparatedByString:@":#iOS#"]objectAtIndex:1];NSLog(@"UIWebView console: %@",logString);returnNO;}returnYES;}

当然前提是webView需要把委托设定为当前控制器:

self.webView =[[UIWebViewalloc]initWithFrame:CGRectMake(0.0f,0.0f,self.view.bounds.size.width,self.view.bounds.size.height-44)];self.webView.delegate=self;

原理很简单,我们重新定义了console.log函数,还有console.debug,console.info,console.warn,console.error。当我们在页面js中调用console.log的时候,就会创建一个iframe发出请求,请求的协议为ios-log:,路径就是我们的log字符串。发出请求之后,迅速把这个iframe清理掉。

这样,在webview中我们发出了一个请求,然后就没了。外部我们用objective-c实现了一个协议,就是webview开始发出请求之前就会调用的函数。在这个函数中我们过滤所有的请求(因为除了ios-log,还有一些“正常”的请求比如http和mailto),当前缀为ios-log的时候,我们就NSLog即可。

if最后的returnNO的意思是该webview的请求被捕获,不再请求(这个实际上不存在的页面)。我们希望一些合法请求(比如http、mailto等)不被捕获,所以最后if外面丢了一个returnYES。

利用链接触发场景变换

iOS原生的场景变换叫做segue,xcode为我们内置了几种原生动画,比如导航条总是固定在上面的push,这样页面前后推动的时候,导航条保持不变(当然里面的内容可以变),内容的切换也很流畅。segue还可以在interface builder中设置动画效果,包括全屏翻转或者渐进等。

有一些第三方js库可以让我们在webview中模拟这种场景变换,也就是说用css设计一个导航条放在webview中置顶,然后用js或者css3来模拟push或者flip3d的效果。比如iScroll是模拟顶部和底部固定的,jQtouch(这个要FQ搜索)是模拟push和flip3d效果的。

我强烈反对在原生应用中使用js库来实现场景变换动画,因为非常不流畅、不跟手指、动画效果跟原生不同,还有最后一个原因,我们是可以在webview中触发外部场景变换的,原生的!用html5制作流畅的原生app的关键就是能够方便地调用原生接口的功能或者效果我们都用原生的,而不去用笨拙的方法实现。

webview中的代码:

一个按钮

非常简单,myapp这个协议你可以自己随便命名,稍后我们会在objective-c中捕获它。

还是要实现该webview的委托controller的协议方法,如果你已经定义这个方法了(就像上面那个例子),你只需要在方法体里加入方法体里面的内容,否则会提醒你重复定义。

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSURL *url =[request URL];if([[url scheme]isEqualToString:@"myapp"]){NSString*slug =[url path];[selfperformSegueWithIdentifier:@"heroSegue"sender:slug];returnNO;}returnYES;}

另外我在interface builder中已经拖拽了一个新的控制器,在新的控制器跟导航控制器之间,我直接拖了一个segue,命名id为heroSegue,所以这里可以用performSegueWithIdentifier来调用segue。

现在,还是在本controller中,我们实现另一个委托方法:

/*

* 页面转换时触发

*/-(void)prepareForSegue:(UIStoryboardSegue*)segue sender:(id)sender {if([segue.identifier isEqualToString:@"heroSegue"]){NSLog(@"%@",sender);[self.webView stopLoading];YUGHeroDetailViewController*destViewController =segue.destinationViewController;destViewController.heroSlug =(NSString*)sender;}}

也就是说,发生segue变化之前,就会执行这一方法,首先判断identifier是不是等于heroSegue,如果是,自己的webview不再载入,目标控制器(也就是即将切换过去的子页面的控制器)中设置公有属性heroSlug的值。

然后,我们在目标页面的controller的H中定义:

@property(strong)NSString*heroSlug;

最后,在目标页面中,我们定义的congroller中的M能拿到heroSlug这个参数。

NSLog(@"%@",self.heroSlug);

这样就可以了,拿到slug之后,我们实际上就可以调用一个本地页面,带上slug参数,然后通过ajax的方式读取远程页面或者json数据,这个就不属于本文内容了。

如果你是新手,在做上面的这些操作的时候可能会漏掉一两个步骤,编辑器会报错,这时候仔细阅读并校对你的代码。如果实在不行,说明清楚操作和报错信息,再给我留言。

练习题:原生title的好处是它在字符数较短时是居中的,而字符更长一点时会偏右显示,更长一些时显示省略号。那么webview载入一个ajax数据的页面的时候,如何在页面载入成功时,设置原生title?

提示,还是自定义协议。

如何用html构建ios应用,使用HTML5构建iOS原生APP(2)相关推荐

  1. 如何用html构建ios应用,使用HTML5构建iOS原生APP

    转自http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webvi ...

  2. 原生 和html5,H5和原生APP对比

    作者:senntyou segmentfault.com/a/1190000016759517 现在移动端 web 应用,很多时候都需要与原生 App的开发技术,目前流行的两种方式,原生和Html5. ...

  3. 如何用html构建ios应用,使用HTML5构建iOS原生APP(5)

    我的app基本上是由一个原生的navigation controller贯穿全局,然后在每一个scene中都有一个主要的UIWebView作为主要逻辑: - (void)viewDidLoad{ .. ...

  4. HTML5与原生APP之争胜负已出?

    早在HTML5技术问世之时,有关网络应用与原生应用谁将成为移动终端霸主的问题,就曾引起过广泛的争论.时至今日,不仅关于二者孰强孰弱的争论已然平息,就连备受关注的移动互联网创业公司也大多是做原生APP的 ...

  5. HTML5定稿了 为什么原生App世界将被颠覆

    原文:http://www.admin10000.com/document/5415.html 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. ...

  6. HTML5定稿了,为什么原生App世界将被颠覆

    摘要:2014年10月底,HTML5规范正式定稿,结束了长达8年的长跑.数字天堂董事长,DCloud CEO王安梳理了HTML5诞生至今的演变过程,并从开发者和用户两个角度分析了HTML对两个人群的优 ...

  7. html5实现ios长按图标后进入图标排序及删除功能的效果

    2019独角兽企业重金招聘Python工程师标准>>> html5实现ios长按图标后进入图标排序及删除功能的效果 我们知道在ios(国产定制安卓系统基本都有)设备上按下图标,图标就 ...

  8. html5 职工入职后台管理系统_ChemCMS是一款基于GO+PHP+MYSQL+HTML5构建的化学内容管理系统

    ChemCMS是一款基于GO+PHP+MYSQL+HTML5构建的化学内容管理系统,旨在提高化学类企业信息化管理水平,ChemCMS提供了行业所需的库存管理.订单管理.产品管理.客户管理.权限管理全部 ...

  9. 为iOS Vision盒子架构建Core ML管道(五)

    目录 介绍 去掉多余的盒子 构建管道 对管道的预测 下一步 总目录 将ONNX对象检测模型转换为iOS Core ML(一) 解码Core ML YOLO对象检测器(二) 使用数组操作解码YOLO C ...

最新文章

  1. 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
  2. Matlab怎么计算信号的能量,用Matlab求离散讯号的能量与功率怎么编程
  3. java设计模式---观察者模式
  4. xen tools代码结构
  5. PouchContainer 容器技术演进助力阿里云原生升级
  6. vs窗体 oracle,VS2010连接oracle数据库的简单例子
  7. Bzoj 3226: [Sdoi2008]校门外的区间
  8. 12.Bridge-桥接模式
  9. PHP站群系统小旋风万能蜘蛛池x6.3源码 pojie不限授权
  10. 数仓建模—建模工具PDMan(CHINER) 入门介绍
  11. linux怎么让cpu不自动降频,Win10 CPU自动降频怎么办?Win10下让CPU不降频设置方法
  12. 数学/数论专题-学习笔记:狄利克雷卷积
  13. C语言第一个程序——一个简单的Hello world!程序
  14. redis中的increment()方法遇到的问题记录
  15. 小议移动订货之南北厂商
  16. mysql2008安装虚拟机_在虚拟机xp系统中安装SQL Server2008的方法
  17. Java - char型变量中能不能存贮一个中文汉字,为什么?
  18. 3.25 使用钢笔工具选择平滑形状的叶子 [原创Ps教程]
  19. 【论文笔记】LARA:基于GAN的解决冷启动问题的推荐系统
  20. Android画中画模式-看这篇就够啦

热门文章

  1. 甲骨文推出新的云服务 协助企业顺利迁移至云端
  2. 阿里云 推荐码   为自己省钱
  3. Unity3D 渲染统计窗口
  4. java的引用指的是什么_请问java里的引用是指什么啊?
  5. 数的划分(信息学奥赛一本通-T1440)
  6. 不降的数字(51Nod-2499)
  7. 过山车(HDU-2063)
  8. 传纸条(洛谷-P1006)
  9. 日语学习-多邻国-人
  10. python 中time和datetime_python中time模块与datetime模块的详解