H5页面调原生方法

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交互的简单用法。都没有深究大家感兴趣的可以一起研究。有什么事都可以直接找我。我无处不在哇哈哈~