需求说明
目前的APP客户端内，经常需要嵌入H5页面进行混合开发。这样，在开发过程中就会涉及到原生客户端和H5交互的问题，本文就是简单介绍一下iOS客户端与H5页面交互的一些方案，希望能解决大家的一些问题。
参考Demo: https://github.com/happyer-lwl/APP_Bridge_H5
一、Github上比较流行的是使用WebViewJavascriptBridge来实现交互
通过使用该库可以轻松实现JS与原生交互。
// 初始化WebViewJavascriptBridge方法
_bridge= [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
}];
//原生与JS约定接口名为“testObjcCallback”，data是JS传递过来的信息，responseCallback来将信息传递给JS
[_bridge registerHandler:@"testObjcCallback" handler:^(id data,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:[NSString stringWithFormat:@"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>
@protocol TestJSExport <JSExport>
// callAppFunctionForJS 作为js方法的别名，可以相同
JSExportAs (callAppFunction, - (void)callAppFunctionForJS:(NSString *)param);
@end
@interface ViewController : UIViewController<UIWebViewDelegate,TestJSExport>
@property (weak, nonatomic) UIWebView *webView;
@property (strong, nonatomic) JSContext *context;
@end
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// 以 html title 设置 导航栏 title
self.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 (id obj in args) {
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，要使用页面刷新或者跳转加载完成后的webView
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
网友评论