美文网首页
native与h5交互

native与h5交互

作者: 夜雨聲煩_ | 来源:发表于2017-08-17 10:42 被阅读0次

    http://www.cocoachina.com/ios/20160127/15105.html

    WKWebView

    WKWebView用于ios8+

    JavaScriptCore

    iOS7之后苹果推出了JavaScriptCore这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android那边和iOS相对统一,web前端写一套代码就可以适配客户端的两个平台,从而减少了web前端的工作量。
    web前端去定义方法名,iOS和Android根据web前端定义好的去写代码。JavaScriptCore中web页面调用原生应用的方法可以用Delegate或Block两种方法,此文以按Delegate讲解。
    ViewController中的代码

    #import "ViewController.h"
    #import [JavaScriptCore/JavaScriptCore.h](此处为尖括号)
     
    @protocol JSObjcDelegate [JSExport](此处为尖括号)
     
    - (void)callCamera;
    - (void)share:(NSString *)shareString;
     
    @end
     
    @interface ViewController () [UIWebViewDelegate, JSObjcDelegate](此处为尖括号)
     
    @property (nonatomic, strong) JSContext *jsContext;
    @property (weak, nonatomic) IBOutlet UIWebView *webView;
     
    @end
     
    @implementation ViewController
     
    #pragma mark - Life Circle
     
    - (void)viewDidLoad {
        [super viewDidLoad];
         
        NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
        [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
    }
     
    #pragma mark - UIWebViewDelegate
     
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        self.jsContext[@"Toyun"] = self;
        self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
            context.exception = exceptionValue;
            NSLog(@"异常信息:%@", exceptionValue);
        };
    }
     
    #pragma mark - JSObjcDelegate
     
    - (void)callCamera {
        NSLog(@"callCamera");
        // 获取到照片之后在回调js的方法picCallback把图片传出去
        JSValue *picCallback = self.jsContext[@"picCallback"];
        [picCallback callWithArguments:@[@"photos"]];
    }
     
    - (void)share:(NSString *)shareString {
        NSLog(@"share:%@", shareString);
        // 分享成功回调js的方法shareCallback
        JSValue *shareCallback = self.jsContext[@"shareCallback"];
        [shareCallback callWithArguments:nil];
    }
     
    @end
    
    ViewController中的代码解释

    自定义JSObjcDelegate协议,而且此协议必须遵守JSExport这个协议,自定义协议中的方法就是暴露给web页面的方法。在webView加载完毕的时候获取JavaScript运行的上下文环境,然后再注入桥梁对象名为Toyun,承载的对象为self即为此控制器,控制器遵守此自定义协议实现协议中对应的方法。在JavaStript调用完本地应用的方法做完相对应的事情之后,又回调了JavaStript中对应的方法,从而实现了web页面和本地应用之间的通讯。

    JavaScriptCore使用注意

    JavaStript调用本地方法是在子线程中执行的,这里要根据实际情况考虑线程之间的切换,而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaStript方法的代码,我在实际运用中开始没注意,就被坑惨了啊。什么,说的太绕,看下面的代码解释:

    //  假设此方法是在子线程中执行的,线程名sub-thread
    - (void)callCamera {     
        // 这句假设要在主线程中执行,线程名main-thread
        NSLog(@"callCamera");
           
        // 下面这两句代码最好还是要在子线程sub-thread中执行啊
        JSValue *picCallback = self.jsContext[@"picCallback"];
        [picCallback callWithArguments:@[@"photos"]];
    }
    
    拦截协议

    拦截协议这个适合一些比较简单的一些情况,不需要引入什么框架,只需要web前端配合一下就好。但是在具体调用哪一个方法上,以及在传值的时候可能会有些不方便,而且调用完后无法在回调JavaScript的方法

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    {
        NSString *url = request.URL.absoluteString;
        if ([url rangeOfString:@"toyun://"].location != NSNotFound) {
            // url的协议头是Toyun
            NSLog(@"callCamera");
            return NO;
        }
        return YES;
    }
    
    iOS对应的代码的解释

    在webView的代理方法中去拦截自定义的协议Toyun://如果是此协议则据此判断JavaStript想要做的事情,调用原生应用的方法,这些都是提前约定好的,同时阻止此链接的跳转。

    理解

    h5会在点击某按钮是发起url请求,而我们可以在代理方法中对该方法进行拦截。当此功能是开放给native的,web会自定义特定的url开头,所以native就可以通过过滤是否是特定的url来拦截此请求,同时根据url中的不同信息作出不同响应。但是native响应后无法回调给h5。

    相关文章

      网友评论

          本文标题:native与h5交互

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