善用iOS中webview(转)

iOS开发中webview和native code写这是一件纠结的事?我写这篇文章, 介绍一下我做iOS两年来总结的一些在webview和native code的配合上的一些经验和技巧,当然,都是基于互联网App的,希望对大家有所帮助。

首先提两句两者的优劣?webview与运维成本低, 更新几乎不依赖App的版本;但在交互和性能上与跟native code有很大差距。native code与之对应。

注,我这里不说HTML5,因为我认为,HTML5确实给web带入了一个新时代。这个时代是什么,web app。也就是说,只有脱离native的这个前提,在浏览器的环境下,HTML5的意义才能显现,而我们讨论iOS App的时候,HTML5显然没什么意义。

不管是用webview还是native code,我有两个原则:

1,用户体验不打折
2,运维成本低

注,为什么不提开发成本。因为做web开发和iOS开发根本就是两回事。当然,web开发发展了这么多年,对于某些功能实现是要比native app快。但多数情况,同一个功能,对于iOS开发者和web开发者,用各自擅长的方式开发成本都最低,所以说某个功能开发成本低,往往是一个伪命题。

刚刚说了,webview的优势在于更新不依赖版本,那么在一款App中,只有会频繁更新的界面考虑webview才有意义。那么哪些界面会频繁更新,这就要因App而异了,我只说两年来,我接触到的一些。

首页。首页资源可谓必争之地,内容一天一换是正常现象,一天几换也不稀奇。而如果仅仅是内容的更换,非要上个webview就显得有些激进了。而事实上首页的变化千奇百怪,逢年过节变个脸,特殊情况挂个公告,偶尔还要特批强推一把某个业务,等等。
此前,我在设计App首页的时候,把首页配置设计的非常复杂。App端要处理n种情况,n各参数,server端要记住n种规则,直到一天,我崩溃了,把首页完全换成webview,才豁然开朗。

活动页。做互联网都知道,活动,是一个最常见的运营手段。特点是,周期短,功能少,但基本不能复用。这些特点都标识了活动不适合做native,要用webview实现。
即使有人告诉你说,我的活动是一个长期活动而且形式不变,也不要相信他。因为在第二期,第三期,第四期他会分别加上一些非常诡异,却有很合理的小变更,而这些变更是你在那个版本根本无法实现的。

试水的新功能。这种界面,往往设计不成熟,需要在运行过程中不断收集用户反馈,更新升级,甚至决定去留。所以,只有webview才能hold住如此不稳定的功能。
切记在一个功能还没有确定之前,不要大张旗鼓单位开发native code,要知道,你写的这些代码,三天后就要改一遍,而且要发布上线。

富文本内容。这个不用多说了吧,按照HTML的常用标签做一个webtext可不是小工程。而且富文本的变化太多了,一点无法匹配,都会导致整个界面巨丑。

OK,上边说了我认为最该使用webview的4个界面,分别带有不同的特点,用这些特点去描述一个界面,如果符合了,那么别犹豫了,做成webview吧。说了哪些界面做成webviev,再说说怎么做webview才能避其短处。

刚刚说了,webview的交互是个短板,因此webview在一个App中,只能作为界面,不允许在界面中出现动作。

而一个webview的界面如何跟native code结合起来呢,我的答案是,超链接。在webview上点击超链接,会调用webview delegate的shouldload方法,自这里拦截请求,进行处理。这里附上这种方法的说明,此前的一文:http://pingguohe.net/2011/06/25/webview_to_nativeview/

由于webview的链接都是URL,因此我建议,把整个App的界面都用URL管理起来。从320框架对VC的管理中获得灵感,构建一个新的应用,总是先制定一套协议,封装一个方法,每一次VC的切换都通过URL。如此一来,server与App的交互就简单了许多,webview也如是。

最后就是长相问题,webview很难长成native的view。而我的方案是,长不成也要装成。在一些情况下,禁用webview滚动,使用滚动框架(iScroll不错)去实现。webview上下留出200pixel的空白背景,y从-200开始。否则大家知道,webview上下会有阴影的背景,不藏起来会很丑。等等,还有很多其他的方法去伪装webview,是要视情景而用。

原文链接:http://pingguohe.net/2012/06/01/use_webview_in_ios_app/

善用iOS中webview(转),布布扣,bubuko.com

时间: 2024-12-22 19:03:14

善用iOS中webview(转)的相关文章

IOS中WebView的使用

UIWebView是iOS sdk中一个最常用的控件.是内置的浏览器控件,我们可以用它来浏览网页.打开文档等等,UIWebView能够加载html/htm.pdf.docx.txt等格式的文件 系统自带的Safari浏览器就是通过UIWebView实现的.下面我的一起来开开如何简单使用webView. 1.搭建UI界面 2MIME的英文全称是"Multipurpose Internet Mail Extensions" 多用途互联网邮件扩展,是一个互联网标准,最早应用于电子邮件系统,后

ios中webview的高级用法

转自:http://www.cnblogs.com/gcb999/p/3178728.html 框架: webview与js的通信框架 #import "MJViewController.h" #import "MBProgressHUD+Add.h" @interface MJViewController () @end @implementation MJViewController - (void)viewDidLoad { [super viewDidLoa

ios中,长按Webview中的图片

我们所要解决的问题如题目所示:ios中,长按Webview中的图片,将图片保存到本地相册. 解决方案:对load的html网页,执行js注入,通过在webview中执行js代码,来响应点击事件,通过js代码来模拟长按事件.发现图片的位置,获得图片的url链接,通过此链接获得图片,将此图片保存到本地相册. js注入代码: static NSString* const kTouchJavaScriptString=@"document.ontouchstart=function(event){\x=

iOS中UIWebView的使用详解

iOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的,例如我加载百度的主页:     UIWebView * view = [[UIWebView al

Unity在Android和iOS中如何调用Native API

本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调用.利用这一特性,可以扩展unity的功能.例如集成和调用第三方库.同时为了满足对unity接口的一致性,可以考虑在android和iOS上提供相同的接口供C#调用. 这里列举以下两个例子. 1. 1. 以弹出一个覆盖部分屏幕的webview为例来说明如何从C#调用Native接口. 2. 2. 简

iOS中打电话、打开网址、发邮件、发短信等

常用小功能 小功能简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话-方法1 最简单最直接的方式:直接跳到拨号界面 NSURL *url = [NSURL URLWithString:@"tel://10010"]; [[UIApplication sharedApplication] openURL:url]; 缺点 电话打完后,不会自动回到原应用,直接停留在通话记录界面 打电话-方法2 拨号之前会弹框询问用户是否拨号,拨完后能

iOS中UIWebView执行JS代码(UIWebView)

iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被人卡出来. 如网页中的这个导航 通常我们不需要WebView中的 导航栏,也不需要里面的返回上一级的交互.. 对WebView常用的另外一种功能就是对某个点击添加对用function实现JS调用OC的交互功能. 下面一一介绍: 1. UIWebView 调用JS代码 OC调用JS通常是,在webVi

iOS中UIWebView使用JS交互

iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html <!doctype html> <html> <head> </head> <body> <div> <img src="test.png"/> </div> </body> <

Android中WebView的JavaScript代码和本地代码交互的三种方式

一.Android中WebView的漏洞分析 最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视,关于这个漏洞,这里就不多做解释了,可能有的同学早就了解了,本来想写一篇文章详细介绍一下,但是网上的知识太多了,而且都很详细,就没弄了,这里大致简单明了的说几句: 第一.漏洞产生的原因 这个漏洞导致的原因主要是因为Android中WebView中的JS访问本地方法的方式存在缺陷,我们做过交互的都知