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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • 跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审...
    大冲哥阅读 1,864评论 0 7
  • 我是个北方妞,现居与吴侬软语的江南水乡,跟别人聊天的时候总会问道还吃的习惯吗?这边菜口味偏甜,像极了这边...
    miss芍药阅读 441评论 2 2
  • 有时候不得不承认,你生活的环境决定了你成为了什么样的人。而如果你想跳出这样的环境,除非你有着强大的内心和异常坚定的...
    暁猴纸阅读 168评论 0 0
  • 追踪 Netty 异常占用堆外内存的经验分享LeanCloud团队关于Netty堆外内存泄漏的调查 MongoDB...
    Jeff阅读 257评论 0 1