使用HTML5构建iOS原生APP

转自http://ju.outofmemory.cn/entry/18807

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

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

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

console.log

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

<script>
// Debug
console = new Object();
console.log = function(log) {
	var iframe = document.createElement("IFRAME");
	iframe.setAttribute("src", "ios-log:#iOS#" + log);
	document.documentElement.appendChild(iframe);
	iframe.parentNode.removeChild(iframe);
	iframe = null;
}
console.debug = console.log;
console.info = console.log;
console.warn = console.log;
console.error = console.log;
</script>

然后在需要捕获的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);
    	return NO;
	}
	return YES;
}

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

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

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

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

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

利用链接触发场景变换

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中的代码:

<a href="myapp://somepagename">一个按钮</a>

非常简单,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];
    	[self performSegueWithIdentifier:@"heroSegue" sender:slug];
    	return NO;
	}
	return YES;
}

另外我在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?

提示,还是自定义协议。

时间: 2024-10-26 12:28:12

使用HTML5构建iOS原生APP的相关文章

使用HTML5构建iOS原生APP(2)

本文转载至 http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑). 有时候我们希望在页面内consloe.log('log something')的时候在控制台里看到输出,但手机里没有控制台,所以我们希望可以利用xcode的控制台输出信息. 因为iOS没有提供API让我们直接用html或者j

iOS原生App与H5页面交互笔记

iOS原生App与H5页面交互笔记 字数390 阅读2204 评论1 喜欢25 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigatio

混合app开发,h5页面调用ios原生APP的接口

混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行:但ios上就没那么容易了:. 在此我就不说兼容安卓的问题,只把ios问题说说: 问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次 解决: 本人使用是angular框架搭建的H5页面 var ua = navigator.userAgen

iOS原生App与H5页面交互

文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView should

HTML5定稿了(为什么原生APP界将被颠覆)

导语:HTML5将颠覆原生App世界,这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么

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

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么诞生.这8年是怎么过来的. 作者简介:王安,数字天堂公司董事长,DCloud CEO. HTML5的诞生 自W3C于1999年发布HTM

HTML5定稿,为什么是原生App的颠覆

过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么诞生.这8年是怎么过来的. 一. HTML5的诞生 自W3C于1999年发布HTML4后,Web世界快速发展,一片繁荣.人们一度认为HTML标准不需要升级了.一些致力于发展Web App的公司另行成立了WHATWG组织,直到2007年,W3

HTML5定稿:手机App将三年内消失,互联网世界的第二次大战

HTML5与app以对立竞争的产品形态展现在大众视野.从去年开始又有一大批技术派或者创业者盯向html5领域,移动游戏的爆发和微信朋友圈等众多平台为HTML5导流,能不能颠覆,或许只是时间上的问题. 就像Apple成立前,HP的高层告诉沃兹:谁会在家里摆一台电脑呢?未来HTML5肯定会颠覆原生App.2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆

atitit.html5 vs 原生 app的区别与选择

atitit.html5  vs 原生 app的区别与选择 1. html5的优点 1 1.1. 最大优势::在跨平台(ios苹果,android安卓等) 1 1.2. 开放性 1 1.3. 快速的更新,热更新 2 1.4. 开发成本上 2 1.5. 碎片化 2 2. 原生app 应用的优点 2 2.1. 对游戏等要求性能的app更好 2 2.2. 原生应用最大的优势就是可以访问设备中的所有功能 2 2.3. 对摄像头.电话本,相机,游戏等操作支持的好,对语音,联系人和日历,也支持比较好. 2