美文网首页iOS 开发每天分享优质文章我爱编程
iOS JS和OC的交互及UIWebView使用总结

iOS JS和OC的交互及UIWebView使用总结

作者: 淇水朱华 | 来源:发表于2017-05-30 16:54 被阅读138次

    前言:

    因为公司业务需要,所以在iOS与H5方面的交互进行较为复杂的的处理上就要有更深的了解。查阅了网络上的各大神写的博客。特在这里做一个总结。写的好的只贴链接地址,毕竟再来造轮子没这个必要。下面我所选择的,也是经过我的筛选,排除了网络上面大量的重复文章和糟糕的排版。这里我选择的也是可上手实践的,至于更多的原理和理论,请大家自行搜索。因为总觉得原理和理论的更应该系统去学习,所以,在这里不提供。

    JS和OC交互

    关于JS和OC的交互,总结起来大致有以下几种方式
    1.URL地址在OC中拦截跳转
    2.利用系统库JavaScriptCore,来做相互调用
    3.利用第三方库WebViewJavascriptBridge
    4.利用第三方cordova库,以前叫PhoneGap
    5.React Native
    关于4和5,其实可以归为一类,非原生开发。对于cordova因为之前在一个家公司app外包给别人开发,我接手的时候做过这方面的插件开发,算是有所了解,不过,因为cordova开发的app实在是太慢了,页面的流畅度跟原生完全不是一个级别的,虽说随着cpu的发展,两者不会相差太大,但是还是能够感觉出来的。故我始终嫌弃cordova的开发。而React Native据说是未来的开发趋势,因为我没有深入研究,在此也不做评价。
    下面着重来说下前面的三种方式。
    这里首先引入推荐的第一个人的博文系列:
    iOS下JS与原生OC互相调用(总结)
    iOS下JS与OC互相调用(一)--UIWebView 拦截URL
    iOS下JS与OC互相调用(二)--WKWebView 拦截URL
    iOS下JS与OC互相调用(三)--MessageHandler
    iOS下JS与OC互相调用(四)--JavaScriptCore
    iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
    iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge
    iOS下JS与OC互相调用(七)--Cordova 基础
    iOS下JS与OC互相调用(八)--Cordova详解+实战
    这里的已经完全涵盖了前面几种方法的实现。所以看完这个总结,基本对JS交互有了了解。
    接下来一篇博文,是着重对前三种的讲解。
    JS和OC的交互(基于UIWebView)

    推荐

    在这里我想推荐的是第三种利用第三方库WebViewJavascriptBridge。这是原生里我筛选出来的觉得使用简单功能强大齐全的一个方式。也是我同事(曾在钉钉的前端),一直使用的交互方式。所以还是值得认可的。
    至于使用,下面推荐第三篇博文
    [iOS] 使用WebViewJavascriptBridge实现OC与JS交互

    基本上,以上这些推荐就完全满足js与oc的交互。

    WebView的使用总结
    UIWebView的基础使用
    - (void)viewDidLoad {
        [super viewDidLoad];
        //    1、创建UIWebView:
    
        CGRect bouds = [UIScreen mainScreen].bounds;
        UIWebView* webView = [[UIWebView alloc]initWithFrame:bouds];
    
        //    2、加载在线资源http内容
    
        NSURL* url = [NSURL URLWithString:@"http://www.baidu.com"];//创建URL
        NSURLRequest* request = [NSURLRequest requestWithURL:url];//创建
        [webView loadRequest:request];//加载
    
        //    2、 加载本地文件的方法:
    
        /**
         *
         //第一种方法:
    
         NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];//mobile是根目录,name是文件名称,html是文件类型
         [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]]; //加载本地文件
    
    
         //第二种方法:
    
         NSString *resourcePath = [[NSBundle mainBundle] resourcePath];
    
         NSString *filePath = [resourcePath stringByAppendingPathComponent:@"mobile.html"];
    
         NSString *htmlstring=[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    
         [webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
    
         */
    
        //    3、导航
    
        //    UIWebView类内部会管理浏览器的导航动作,通过goForward和goBack方法你可以控制前进与后退动作:
    
        [webView goBack];
        [webView goForward];
    
        //    4、UIWebViewDelegate委托代理
    
        webView.delegate = self;
    
        //    5、显示网页视图UIWebView:
    
        [self.view addSubview:webView];
    }
    
    # pragma mark - UIWebView 的代理方法
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;//当网页视图被指示载入内容而得到通知。应当返回YES,这样会进行加载
    - (void)webViewDidStartLoad:(UIWebView *)webView { //当网页视图已经开始加载一个请求后,得到通知。
        //    [webView stopLoading];//取消载入内容
    }
    - (void)webViewDidFinishLoad:(UIWebView *)webView;//当网页视图结束加载一个请求之后,得到通知。
    - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error {
        //    [webView reload];//重载
    }//当在请求加载中发生错误时,得到通知。会提供一个NSSError对象,以标识所发生错误类型。
    
    IOS中UIWebView常用注意点:

    1.与UIWebView进行交互,调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号要进行转义在转义字符前加\),传递json字符串时不需要加单引号或双引号:

    -(void)webViewDidFinishLoad:(UIWebView *)webView
    
    {
        NSString *sendJsStr=[NSString stringWithFormat:@"openFile(\"%@\")", jsDocPathStr];
        [webView stringByEvaluatingJavaScriptFromString:sendJsStr];
    
    }
    

    2.在该代理方法中判断与webView的交互,可通过html里定义的协议实现

     - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType;
    

    3.为webView添加背景图片

    webView.backgroundColor=[UIColor clearColor];
    //这句话很重要,webView是否是不透明的,no为透明 在webView下添加个imageView展示图片就可以了
    webView.opaque=NO;
    

    4.获取webView页面内容信息

    NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.textContent"];
    //获取web页面内容信息,此处获取的是个son字符串
    
    SBJsonParser *parserJson=[[[SBJsonParser alloc]init]autorelease];
    
    NSDictionary *contentDic=[parserJson objectWithString:docStr];
    //将json字符串转化为字典
    

    5.将文件下载到本地址然后再用webView打开

    NSString *path = [[[[NSBundle mainBundle] resourcePath] stringByDeletingLastPathComponent] stringByAppendingPathComponent:@"Documents"];
    NSString *resourceDocPath = [[NSString alloc] initWithString:path];
    
    self.filePath = [resourceDocPath stringByAppendingPathComponent:[NSString stringWithFormat:@"maydoc%@",docType]];
    
    NSData *attachmentData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:theUrl]];
    [attachmentData writeToFile:filePath atomically:YES];
    
    NSURL *url = [NSURL fileURLWithPath:filePath];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    
    [attachmentWebView loadRequest:requestObj];
    //删除指定目录下的文件
    
    NSFileManager *magngerDoc=[NSFileManager defaultManager];
    
    [magngerDoc removeItemAtPath:filePath error:nil];
    

    6.处理webView展示txt文档乱码问题

    if ([theType isEqualToString:@".txt"]) {
    
        //txt分带编码和不带编码两种,带编码的如UTF-8格式txt,不带编码的如ANSI格式txt
    
        //不带的,可以依次尝试GBK和GB18030编码
    
        NSString* aStr = [[NSString alloc] initWithData:attachmentData encoding:NSUTF8StringEncoding];
        if (!aStr)
        {
    
            //用GBK进行编码
            aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000632];
    
        }
    
        if (!aStr)
        {
    
            //用GBK编码不行,再用GB18030编码
            aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000631];
    
        }
    
        //通过html语言进行排版
    
        NSString* responseStr = [NSString stringWithFormat:
                                 @"%@",aStr];
        [attachmentWebView loadHTMLString:responseStr baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
    
        return;
    }
    

    更多总结见这篇博文(IOS开发 - UIWebView(用法全面介绍,含最全的JS交互))上面的一些是列举我认为常用的,这个博文会持续更新,把我后期增加的路由跳转来分享下。

    相关文章

      网友评论

        本文标题:iOS JS和OC的交互及UIWebView使用总结

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