h5与App原生交互方案

H5与App原生交互，一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求：

• 在js与原生进行交互的时候能保证正常的正向调用逻辑返回，反向可以处理异步回调，因为对js来说，大部分逻辑都是回调与监听。
• 要保证H5与Native App通讯效率高、安全性强，能有效防止通过H5页面进行App注入、中间人攻击或者钓鱼。
• 方便测试阶段，H5嵌入到App当中，开发人员方便调试与Debug。

  目前主流的技术方案：

  1.在iOS7以前，在UIWebView中实现一些代理方法拦截带有约定好的protocol的Url，从Url上获取get方式的参数传递，映射成本地原生方法，如下：

  -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *urlString = request.URL.absoluteString;
    if ([urlString rangeOfString:@"js-call://"].location != NSNotFound) {
        NSString * host = [self sliceHost:urlString];
        NSDictionary * params = [self sliceParams:urlString];
        if ([host isEqualToString:@"openOrderDetail"]) {
            [self openOrderDetail:params];
        }
        return NO;
    }
    return YES;
  }

  这仅仅解决了js调用原生方法的问题，至于调用的结果与调用完之后要进行一些页面的回调，在这个拦截的过程中根本没有办法进行，不过有一些蹩脚的补偿措施，如下：

  -(void)webViewDidFinishLoad:(UIWebView *)webView
  {
    self.orderDetailCallBackFuncName = [webView stringByEvaluatingJavaScriptFromString:@"orderCallbackfuncName()"];
  }

  会在页面加载完毕后主动去取页面上设置的回调方法的名称，然后在原生方法中处理完逻辑再进行回调。

  -(void)OpenOrderDetail:(NSDictionary *)params{
    //do someting
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@()",self.orderDetailCallBackFuncName ]];
  }

  2.iOS7以后，大家都使用JavaScriptCore这个官方的WebKit 的 JavaScript 引擎，实现oc与JavaScript的语言穿梭。

  -(void)configJsCallBack{
    WeakSelf;
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext.exceptionHandler = ^(JSContext * con,JSValue * exception){
        NSLog(@"JS Error:%@",exception);
    };
    Coordinator * coordinator = [[Coordinator alloc]init];
    self.jsContext[@"mobileCoordinator"] = coordinator;
    self.jsContext[@"console"] = coordinator;
  }

  不太了解JavaScriptCore的同学可以自己查阅一下官方文档或者学习资料。这里我们使用一些技巧，将所有的App开放给js的方法都由一个叫Coordinator的调度器来调度，而这个调度器实现了JSExport协议：

  #import <Foundation/Foundation.h>
  #import <JavaScriptCore/JavaScriptCore.h>
  @protocol CoordinatorExport <JSExport>
  -(void)log:(NSString *)msg;
  -(BOOL)callNativeModule:(NSString *)url;
  /*
    js调用原生分享
    shareOpinion为json对象
    {
        "type":"share",
        "title":"share title",
        "content":"share content",
        "imgUrl":"",
        "clickUrl":""
    }
    其中类型type有以下几种:
    share(只有朋友圈和微信好友),doubleShare(包含所有分享渠道),allShare(分享全部渠道)
  */
  JSExportAs(showShareMenu, -(BOOL)showShareMenu:(NSString *)url opinion:(NSString *)opinion);
  @end
  @interface Coordinator : NSObject< CoordinatorExport >
  @property(nonatomic,copy)BOOL (^openShareCallBack)(NSDictionary * opinion);
  @end

  上面的做法就是我们会在合适的实际向JavaScript的运行的环境中注入一个叫做mobileCoordinator的对象，这个对象会注入到JavaScript环境中的window对象上，全局可用。为什么要封装到一个对象上，是因为js没有命名空间的概念并且有变量提升向上查找，会引起命名冲突，所以我们把对外暴露的方法都进行一个对象封装。还有一个好处就是JavaScript的开发者与app的开发者都会像编写各自语言的代码一样书写代码，没有语法损失，js同步调用原生方法，原生实现的时候具备返回值，js的调用者就可以获取返回值，如果是异步回调，那可以对外暴露方法的时候提供一个callback的入参，在异步完成后进行回调。
  3.其他方案例如JavaScriptBridge等与第二种方案类似。

  方案比较：

  方案1的流程如下：
  交互方式为单向
  H5调用Native:

  H5页面 —>发起Url Redirect(Url上携带带有动作语义的参数)->Native App->拦截Url Redirect->解析动作语义参数->调用相关Native代码

  Native调用H5页面:

  Native App—>获取页面上预留参数和解析动作语义参数->调用相关JavaScript代码

  这样使得一个简单的方法调用变得非常割裂，而且双端维护成本非常高，不易debug。
  方案2的流程如下：
  交互为双向：

  H5页面(Native App)<->调用Native代码(调用JavaScript代码)<->Native App执行被调用Native代码返回调用结果(H5页面执行被调用JavaScript代码并返回调用结果)

  方案2优势比较明显，一般会采用第二种。

  实现细节

  细节上有一些需要注意的东西：
  1.oc方法是带有参数标签的，js的方法并没有，注意使用JSExportAs这个宏来将oc原生语言转换为js语法风格的代码。
  2.注意获取jscontext上下文并注入方法与对象的时机，这取决于H5页面上的js引用时机，如果H5页面上使用require来进行顺序引用，就不会出现问题，如果与原生交互的js的代码加载与原生注入的注入顺序混乱，则调用不到原生暴露的方法会引起js执行异常。建议结合拦截url的方式让H5决定何时注入，或者是前端工程师梳理规范，在H5引用js的时候做顺序控制。

  防止注入与钓鱼

  其实这个不太算是技术方案，不过可以提一下。有时候手机在危险的网络环境中比方说链接在不安全的路由器中，DNS进行恶意中转到钓鱼网站上，如果页面调用已知的原生暴露出来的方法，同步数据或者是调用关键业务，就会有注入攻击的风险。一般需要做的是，H5在调用app原生关键业务的时候，需要在调用原生方法的时候传入票据，原生通过服务端的认证中心验证票据，通过才可以处理页面调用请求，在同步数据与状态的时候，比方说将app中的用户登录状态同步到H5页面上，一般app会同步cookie，不过这种方式维护成本较高。对于同步状态与数据，app应该使用业务票据来传递给H5，H5通过票据中心置换出真正的用户状态或者是关键业务数据。更高级别的方案还有H5与App临时握手等。

  H5在WebView中的Debug

  这个是一个比较恶心的事情，不过我们可以替换js的window对象上的console对象，将log函数转接到原生，再通过一些其他方式进行输出，JavaScriptCore中提供了exceptionHandler

  context.exceptionHandler = ^(JSContext *context, JSValue *exception) { NSLog(@"JS Error: %@", exception);};

  下一篇文章将会介绍一下用websocket协议，将app中的WebView的调试信息输出到指定IP的电脑上，方便开发调试，这样就能减少沟通与配合联调，提高开发效率。

文／Neo_joke（简书作者）
原文链接：http://www.jianshu.com/p/0c49a584ffce
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。