UIWebView加载本地HTML文件

一、 WebView简单介绍

---

• WebView是iOS中比较常用的一个控件,特别是现在app不好推广,下载成本高的时代,和原生相比,它可以通过后台控制,随意更新客户端UI等等.
  • WebView 既可以显示本地的html也可以显示网络html

webView加载数据的方式文档给出了三种:

- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

1. - (void)loadRequest:(NSURLRequest )request;

• 可以加载本地资源,也可以加载网络资源
  加载网络地址

NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
[self.view addSubview:webView];
[webView loadRequest:request];

加载本地HTML

NSString *path = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];
NSURL* url = [NSURL  fileURLWithPath:path];//创建URL
NSURLRequest* request = [NSURLRequest requestWithURL:url];//创建NSURLRequest
[webView loadRequest:request];//加载

2. - (void)loadHTMLString:(NSString )string baseURL:(nullable NSURL)baseURL;

• 一般用来加载本地HTML资源
• 如果通过Creat folder reference方式引入的文件,则需要通过路径来获取文件内容,下面两种方法是等效的
  例:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"html/start" ofType:@"html"];
    NSString *htmlString1 = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];
    NSString *urlStr = [NSString stringWithFormat:@"%@/html",[[NSBundle mainBundle] bundlePath]];
    NSURL *url = [NSURL fileURLWithPath:urlStr isDirectory:YES];
      [self.webView loadHTMLString:htmlString1 baseURL:url];

    NSString *mainBundlePath = [[NSBundle mainBundle] bundlePath];
    NSString *basePath = [NSString stringWithFormat:@"%@/html",mainBundlePath];
    NSURL *baseUrl = [NSURL fileURLWithPath:basePath isDirectory:YES];
    NSString *htmlPath = [NSString stringWithFormat:@"%@/start.html",basePath];
    NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlString baseURL:baseUrl];

注意:baseURL因为html中一些资源的寻找需要到上个目录中寻找,因此要写

• 如果通过Creat groups则可以通过文件名直接访问文件

NSString *path = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];

不太了解Creat groups和Creat folder reference引入文件的同学,下面详细介绍区别.

• -(void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL )baseURL;

/**
 * data: 所加载文件的数据
 * MIMEType:文件类型
 * textEncodingName: 编码类型
 * baseURL: 资源路径
*/

webView的代理方法:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

oc的方法名称就像句子一样,清晰明了的表达了方法的作用,因此代理我就不在啰嗦了!

二、加载本地HTML

---

• 首先引入html文件到你的项目

• 引入文件有两种选择,一般很少有人注意,分别是:Create groups和Create folder references如下图:

  
  

• Creat groups和Creat folder reference的区别:

• Creat groups

  1. 以Creat groups在引入的文件夹为黄色的
  2. 我们可以在项目中右键手动New Group 但是新添加的文件夹并不是真的存在于项目目录中,我们可以Show in Finder来查看项目文件结构,发现文件目录中并没有新建的文件夹.
     但是从外部引进来的group并不会如此,它在项目目录汇中是存在真实目录的,这些文件是会被编译
  3. 因此Create groups的方式添加到工程中，则不管加入项目的文件的目录结构如何，在APP中都可以通过mainBundlePath/filename这样结构来访问文件
  4. Create groups 创建的文件是参与预编译的(内部文件可以直接通过import引用)

• Creat folder reference

  1. 以Creat folder reference在引入的文件夹为蓝色的
  2. 只是单纯的创建了引用,文件夹内部的原有文件层次架构并不会改变,所以在使用的时候需要通过mainBundlePath/Path/filename这样的路径来访问文件.
  3. 显然这种添加方法更适合我们项目需求（由于html文件内部有文件引用路径，Creat folder reference引入的文件不会破坏原有文件的层次结构）
  4. Creat folder reference创建的文件是不参与预编译的，无发通过import直接引入

总结： Creat groups和Creat folder reference的区别

• 引入的文件夹颜色不一样
• 文件层次结构不一样了

其它差异欢迎补充

Bundle介绍

• 既然提到了Bundle,那我们就顺便介绍下Bundle,之前对Bundle理解是很有限的
  • 大部分iOS开发同学都不少些如何代码

[[NSBundle mainBundle] pathForResource:@"someFileName" ofType:@"yourFileExtension"]; 
[YourViewController initWithNibName:"YourViewController" bundle:nil];

• bundle的创建 如果是图片资源的话可以直接把文件夹的后缀修改为bundle，这样就就是一个静态资源库。如果里面包含了xib和sb的话就要通过xcode创建，因为需要修改一些bundle的配置信息，比如xib转换成nib
• bundle是静态资源静态库，包含了程序使用的资源（图片，声音，nib，编译好的代码等）
• 一个应用程序是一个bundle，这个bundle就是我们说的main bundle

通过一下方法可以获取
[NSBundle mainBundle];

• 如果获取其它bundle下的资源，需要指定bundle路径来获取

NSString *bundlePath =  [[NSBundle mainBundle] pathForResource:@"文件名字" ofType:@"bundle"];
NSBundle *resourceBundle = [NSBundle bundleWithPath:bundlePath];

• 有了bundle对象之后就可以访问bundle内部资源

 NSString *resourcePath = [resourceBundle pathForResource:@"" ofType:@""];
 UIImage *image = [UIImage imageWithContentsOfFile:resourcePath];

这里有个小tap需要主要下 就是加载图片为什么用 imageWithContentsOfFile而不用imagName?

• 先说区别吧
  • imagName加载的图片是有缓存在内存中的，下次如果用到同名的图片会直接拿缓存中的图片，而不会按照指定的路径去重新加载图片
  • imageWithContentsOfFile加载图片不会有缓存，每次都重新寻址加载

bundle居多是用来存储第三方库的资源，这样做是为了防止引入的库内的资源名字与项目名字冲突，这样可以很好的防止资源名字重复问题，但是如果你用了imagName加载图片，图片可能就会无法区分。

• 加载HTML
• 首先我们看一下项目的文件层次,如图:

整体结构	HTML结构

• 加载本文右侧html的策略是通过下面这个方法来加载
  - (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL

NSString *mainBundlePath = [[NSBundle mainBundle] bundlePath];//文件根路径
NSString *basePath = [NSString stringWithFormat:@"%@/html",mainBundlePath];//获取目标html文件夹路径
NSURL *baseUrl = [NSURL fileURLWithPath:basePath isDirectory:YES];//转换成url
NSString *htmlPath = [NSString stringWithFormat:@"%@/start.html",basePath];//目标 文件路径
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];//把html文件转换成string类型
[self.webView loadHTMLString:htmlString baseURL:baseUrl];//加载

三、加载本地HTML文件内容适配问题

---

• 有时候我们app中嵌套webView,但是内容有可能过大,或者过小,这时候就需要我们调整内容大小.
  • webView自带有个属性可以供我们使用,但是往往不能够满足需求

self.webView.scalesPageToFit = YES;

因此我们可以通过代理直接修改网页的比例,可以在代理中通过下面方法来调整网页的比例大小:

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
        [webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom=0.52"];
}

代码地址:https://github.com/onegeng/Html-App
本文内容多有不全,后续将会继续补充添加,进一步完善

欢迎大家的意见和指导.如果有什么问题请留言或者给我发邮件onegeng@aliyun.com

本文主要参考文章.