iOS与Html5和JS之间的交互

ios与js交互 
WebViewJavascriptBridge框架可以用pod方式加入工程  pod 'WebViewJavascriptBridge'

首先采用的框架是WebViewJavascriptBridge，采用这套框架可以方便的使iOS与JS交互

一. 流程图（主要介绍思路）

二.iOS端如何使用
首先导入#import "WebViewJavascriptBridge.h"文件第一步：开启日志 // 开启日志，方便调试[WebView JavascriptBridge enableLogging];


第二步：给ObjC与JS建立桥梁 
// 给哪个webview建立JS与OjbC的沟通桥梁self.bridge = [WebView JavascriptBridgebridgeForWebView:webView]; 
// 设置代理，如果不需要实现，可以不设置[self.bridge setWebViewDelegate:self];


第三步：注册HandleName，用于给JS端调用iOS端 
// JS主动调用OjbC的方法// 这是JS会调用getUserIdFromObjC方法，这是OC注册给JS调用的// JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传
// OC端通过responseCallback回调JS端，JS就可以得到所需要的数据[self.bridge registerHandler:@"getUserIdFromObjC"handler: ^ (id data, WVJBResponseCallback responseCallback) {   
NSLog(@"js call getUserIdFromObjC, data from js is %@", data);  
  if (responseCallback) {    
  // 反馈给JS     
responseCallback(@{@"userId": @"123456"}
);   
}
}]; 
[self.bridge registerHandler :@"getBlogNameFromObjC"handler: ^ (id data, WVJBResponseCallback responseCallback) {  
  NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);  
  if (responseCallback) {      
// 反馈给JS      
responseCallback(@{@"blogName": @"星仔"}
);   
}}]; 


第四步：直接调用JS端注册的HandleName [self.bridge callHandler:@"getUserInfos"data: '@ {@"name": @"ddsds"}responseCallback:^(id responseData) {  
  NSLog(@"from js: %@", responseData);}];


三.JS端如何使用 具体可以看邦兄发的帖子。


/************* ufo 项目中js调用原生的相关方法 *********/    //返回按钮

    [self.bridge registerHandler :'@"goback" handler:^ (id data, WVJBResponseCallback responseCallback) {

        [self.navigationController popViewControllerAnimated:YES];

    }];

 

    //支付宝支付

    [self.bridge registerHandler:'@"alipay" handler:^ (id data, WVJBResponseCallback responseCallback) {

      [[SDMOnlinePayManager sharedManager] onlinePay:AliPayType payOrder:[data valueForKey:'@"url"] success:^(NSDictionary *result){

            if (responseCallback) {

                // 反馈给JS

                responseCallback(result);

            }

        } falied:^(NSDictionary *result){

            if (responseCallback) {

                // 反馈给JS

                responseCallback(result);

            }

        }];

    }];

 

    //微信支付   weixinpay

    [self.bridge registerHandler:'@"wxpay" handler:^(id data, WVJBResponseCallback responseCallback) {

        [[SDMOnlinePayManager sharedManager] onlinePay:WXPayType payOrder:data success:^(NSDictionary *result){

            if (responseCallback) {

                // 反馈给JS

                responseCallback(result);

            }

        } falied:^(NSDictionary *result){

            if (responseCallback) {

                // 反馈给JS

                responseCallback(result);

            }

        }];

    }];