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

需求说明

目前的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: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"];
}