需求说明
目前的APP客户端内，经常需要嵌入H5页面进行混合开发。这样，在开发过程中就会涉及到原生客户端和H5交互的问题，本文就是简单介绍一下iOS客户端与H5页面交互的一些方案，希望能解决大家的一些问题。
参考Demo:https://github.com/happyer-lwl/APP_Bridge_H5
一、Github上比较流行的是使用WebViewJavascriptBridge来实现交互
参考https://github.com/marcuswestin/WebViewJavascriptBridge
通过使用该库可以轻松实现JS与原生交互。
// 初始化WebViewJavascriptBridge方法_bridge= [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:selfhandler:^(iddata,WVJBResponseCallback responseCallback) {}];//原生与JS约定接口名为“testObjcCallback”，data是JS传递过来的信息，responseCallback来将信息传递给JS[_bridge registerHandler:@"testObjcCallback"handler:^(iddata,WVJBResponseCallback responseCallback) { responseCallback（"postInfomationToJS"）}];
二、减少第三方依赖，使用iOS原生方法进行交互处理
1、OC调用JS
可以通过webView直接调用JS的方法或者获取JS属性
NSString*title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
OC还可以通过webView的上下文，并执行JS脚本，为H5页面动态添加方法和属性，如下面代码
// 获取webView的上下文环境self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];// 为H5页面动态添加属性，并传入APP端版本，之后H5可以使用此属性[self.context evaluateScript:[NSStringstringWithFormat:@"var appVersion = %@",@"1.0.0"]];// 为H5页面动态添加方法，并可以执行[self.context evaluateScript:@"var triple = function(value) { return value * 3 }"];JSValue *tripleNum = [context evaluateScript:@"triple(num)"];
OC调用JS方法
// 获取webView的上下文环境self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];NSString* method =@"returnLogin"; JSValue * function = [self.context objectForKeyedSubscript:method];//这里面的a,b,c就是OC调用JS的时候给JS传的参数[function callWithArguments:@[@"hahahahahahahahah"]];
2、JS调用OC方法，可以有返回值，分两种情况：
①js直接调用方法，比较简单
②js通过对象调用方法，需要用到JSExport进行一个绑定
一个协议如果遵从了JSExport协议，这个协议所规定的方法、变量等就会对js开放，我们可以通过js调用到
如果js是一个参数或者没有参数的话 就比较简单，我们的方法名和js的方法名保持一致即可
#import<UIKit/UIKit.h>#import<JavaScriptCore/JavaScriptCore.h>@protocolTestJSExport// callAppFunctionForJS 作为js方法的别名，可以相同JSExportAs (callAppFunction, - (void)callAppFunctionForJS:(NSString*)param);@end@interfaceViewController:UIViewController@property(weak,nonatomic)UIWebView*webView;@property(strong,nonatomic) JSContext *context;@end
#pragma mark - UIWebViewDelegate- (void)webViewDidFinishLoad:(UIWebView*)webView{// 以 html title 设置 导航栏 titleself.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];// 取得webView的运行上下文self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];// 打印异常self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue;NSLog(@"%@", exceptionValue); };// 以JSExport协议关联native的方法，JS通过对象调用native的方法需要加入此关键词，如native.callAppFunctionForJS('param');self.context[@"native"] =self;// js调用iOS // 第一种方案// 其中showAlert就是js的方法名称，block 里面是OC代码 // 此方法最终将打印出所有接收到的参数，js参数是不固定的 我们测试一下就知道 context[@"showAlert"] = ^() {NSArray*args = [JSContext currentArguments];for(idobjinargs) {NSLog(@"%@",obj); } }; }// js调用iOS // 第二种方案// JS通过对象调用OC的方法// 可以有返回值给到JS- (NSString*)callAppFunctionForJS:(NSString*)param{NSLog(@"%@", param);}
2、小技术点
点击导航栏返回，判断APP原生返回还是H5页面内部返回
/**
返回判断，确认是否H5内部跳转了
@param sender
*/- (void)backAction:(id)sender{// 获取webView当前加载的页面的数量，可以判断是否在首页，解决无法返回的问题NSString*webPageLength = [self.webView stringByEvaluatingJavaScriptFromString:@"history.length"];if([self.webView canGoBack] && (webPageLength.integerValue !=2)) { [self.webView goBack]; }else{ [self.view resignFirstResponder]; [self.navigationController popViewControllerAnimated:YES]; }}
嵌入的H5页面刷新或者跳转之后，APP与H5的交互失效
原因
H5页面刷新或者跳转过后，原先的JSConext注入会消失，需要重新进行注入
解决
在-(void)webViewDidFinishLoad:(UIWebView *)webView中重新进行注入，切记：注入方法中的webView参数要用这个方法中带的，不可使用自己类的webView属性
- (void)webViewDidFinishLoad:(UIWebView*)webView{// webView不可用self.webView，要使用页面刷新或者跳转加载完成后的webViewself.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];}
