ios 原生与html5交互,iOS原生与H5交互相关问题记录

需求说明

目前的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

#import

@protocol TestJSExport

// callAppFunctionForJS 作为js方法的别名，可以相同

JSExportAs (callAppFunction, - (void)callAppFunctionForJS:(NSString *)param);

@end

@interface ViewController : UIViewController

@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"];

}