H5页面调原生方法

作者: 隔壁班小明 | 来源:发表于2017-08-31 11:03 被阅读166次

    H5与原生页面交互是一个很常见的需求。
    app页面调用h5方法很简单webView就有方法直接就可以调用JS方法这里不说。
    我们今天说说h5页面调用APP内方法。

    一. 实现方式有很多种,我知道有:

    1.拦截跳转地址,这个方法很古老,做法是在webVIew将要跳转网站时利用监听使其不跳转,此时可以获取到将要跳转的地址。让h5吧数据放在一个地址中,然后app用上面方法就可以拦截。
    2.一个三方的东西,叫WebViewJavascriptBridge,有兴趣的可以看看,这个我用了好一段时间。
    3.JSContext这个是iOS7以后出的今天就是要简单介绍一下这个。
    ps:上面这些都是对应UIWebView,对于使用WKWebView的同学也有一个交互的方法下面说。

    二. JSContext

    1.简介:

    JSContext实现的方法是--把H5中js方法里的一个对象指定为APP原生的对象,这样js中就可以用这个对象调用到APP原生中的方法了。

    2.用法

    UIWebView * webView = [[UIWebView alloc]initWithFrame:self.view.bounds];
    webView.delegate = self;
    NSString* path = [[NSBundle mainBundle] pathForResource:@"HelloWorld" ofType:@"html"];
    NSURL* url = [NSURL fileURLWithPath:path];
    NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
    [webView loadRequest:request];
    
    //上面都是创建webView,咱们不说。下面是“把H5中js方法里的一个对象指定为APP原生的对象”这个操作,这里可改变的就是JSContextTest这个是js中对象的名字是由app与h5约定好的。这样js中JSContextTest这个对象就是你当前的对象了。
    JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"JSContextTest"] = self;
    context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
         context.exception = exceptionValue;
        NSLog(@"异常信息:%@", exceptionValue);
    };
    

    对于上面说的第二步js用对像调用方法,这里面方法也是有规定的不是直接写一个方法就可以的。这些方法必须是要放在一个继承JSExport协议的协议里面。例如:

    //创建协议
    @protocol JSObjcDelegate <JSExport>
    - (void)call;
    @end
    
    //在上面指定的类中实现协议
    - (void)call{
        NSLog(@"收到");
    }
    

    经过上面的两步操作js里面用JSContextTest调用call方法,APP原生就可以收到了。

    三.WKWebView 交互

    1.简介:

    原理和上面的是一个意思都是在js中指定一个对象,在这个对象调用方法时,APP得到通知。

    2.用法

    //设置Configuration,像js中注入一个对象叫jsCallOC这个对象指定为self
    WKUserContentController *wkUController = [[WKUserContentController alloc] init];
    [wkUController addScriptMessageHandler:self name:@"jsCallOC"];
    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
    wkWebConfig.userContentController = wkUController;
      
    //使用带有配置的init方法指定Configuration
    WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectOffset(self.view.bounds, 0, 30)configuration:wkWebConfig];
    

    这样配置就可以了在具体使用上和JSContext有点区别,首先js调用的时候有特定的方法。ps:下面是js代码

    //js用这段代码给app发送信息,其中jsCallOC是和app约定好的对象名称
    window.webkit.messageHandlers.jsCallOC.postMessage(要发送的JSON对象);
    

    在app接受发来的信息,也是一个特定的方法,这个方法在协议WKScriptMessageHandler中,要指定当前类实现这个协议,然后在js发送信息是就会在这个协议里唯一的方法中接受到发送的信息。

    //WKScriptMessageHandler协议中就这一个方法,方法中message.body就是h5页面发送的JSON数据
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
        NSLog(@"%@", message.body);
    }
    

    以上就是webVIew和js交互的简单用法。都没有深究大家感兴趣的可以一起研究。有什么事都可以直接找我。我无处不在哇哈哈~

    相关文章

      网友评论

      本文标题:H5页面调原生方法

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