美文网首页IOS开发iOSiOS Developer
UIWebView加载本地HTML文件

UIWebView加载本地HTML文件

作者: Onegeng | 来源:发表于2017-04-12 18:19 被阅读939次

    一、 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];//加载
    
    1. - (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

    本文主要参考文章.

    相关文章

      网友评论

      本文标题:UIWebView加载本地HTML文件

      本文链接:https://www.haomeiwen.com/subject/duomattx.html