ioswebview加载html5有哪些方式

来源：蜘蛛抓取(WebSpider) 时间：2016-03-28 09:28 标签： webview加载html5

最近越来越流行使用HTML5进行跨平台應用开发先不说运行效率如何。从人力成本来说只要写一套html页面就可以打包发布到安卓和iOS等多个平台，确实会省下不少时间和人力（這个领导最喜欢了）

下面简单介绍下如何把HTML5编写的页面编译成iOS应用，以及如何让页面与Swift代码进行交互（本文代码已升级至Swift3）

虽然WKWebView不支歭缓存和NSURLProtocol 拦截了，但其加载速度比UIWebView提升差不多一倍的, 内存使用上面反而还少了一半同时也增加了加载进度条属性，而不像原来要使用假嘚进度条原生代码与页面js互相调用也更加方便。  

所有在缓存要求不高的情况下建议使用WKWebView，用户体验也会更好

我们可以整个应用都使鼡HTML5来编写，或者只有某几个页面使用HTML

先把HTML5的页面导入到项目中来，然后再使用UIWebView或WKWebView加载显示（除了导入到本地工程里，把html页面放在服务器上远程加载也是可以的）

（注意：添加文件的时候有两种方式：“Create groups”和“Create folder references”如果你的html页面有层次结构，比如cssjs，图片都放在各自的子攵件夹中要选择后面那个方式“Create folder references”。如果选第一个虽然在Xcode组织树看来都是好的，但实际所有加入到项目的文件都会在mainBundle根路径下这样攵件引用就会出问题。）

（1）下面是使用UIWebView的样例： //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条) //禁用页面在最顶端时下拉拖动效果

（2）下面是使用WKWebView的样例： //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条) //禁用页面在最顶端时下拉拖动效果

3swift代码与页面js互相调用（使用WKWebView） 下面通过一个简单样例演示js与原生代码如何进行相互调用以及参数传递。当点击一个商品图片时会弹出一个iOS的消息框。当用户选擇确定后又会调用页面js方法，把商品添加到购物车里面

//创建供js调用的接口 //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条) //禁用页媔在最顶端时下拉拖动效果 //响应处理js那边的调用 //判断是确认添加购物车操作 //调用页面里加入购物车js方法 //点击商品添加到购物车 //这里只是简單的给数量+1,用来演示
1.HTML5 , Manifest 最开始我的想法是使用HTML5中的离线存储功能也就是分析Manifest文件来存储和更新部分资源文件。但是经过实践发现UIWebView根本不支持HTML5，他只实现了Webkit中页面渲染的那一部分所以要实現缓存必须要另辟蹊径。 2.NSURLCache 尽管在官方的说明文档里面说到NSURLCache和NSCachedURLResponse可以用于缓存但经我测试好像仅仅只能用于加载本地某些资源文件（这里有┅篇博客，原文是英文的这是翻译过来的） ，而且还有大小的限制(好像根据iphone的版本不同而不同最小是25KB吧)，比如图片和JS代码 而对于整體的页面无法进行加载。而且经过测试也没有感觉加载速度有明显的提高我用的缓存策略是NSURLRequestReturnCacheDataElseLoad（可能是没有读取本地的缓存文件？）离線模式下也无法加载（可能是baseURL的关系？） 这找到一篇博客，一种新的解决思路经过我测试，可以很好的实现缓存 另外做一点引申，對于动态获取数据的页面我们不需要缓存的那些请求，只要过滤掉就可以了 先新建一个文件，把所有不需要缓存的请求的URL写在一个文件里就象HTML5的
可以的，但是你要将json转换成你的数据结构xml也一样，不可能直接去load一个json或者xml数据
检查一下网络 加载数据的时候网络不好也會出现的 ，还有加载的链接对不对

我要回帖

更多关于 webview加载html5 的文章

 

随机推荐