iOS与JS交互

简述：

随着h5开发需求量的逐渐增多，如何才能更好地在原生上实现h5界面开发，让app不仅拥有原生的体验感，还能保证h5的界面灵活性，现提供一套实用的iOS与原生的交互代码，亲测可用，欢迎大家指导建议。

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

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

二.iOS端如何使用

首先导入#import"WebViewJavascriptBridge.h"文件

第一步：开启日志

// 开启日志，方便调试

[WebViewJavascriptBridge enableLogging];

第二步：给ObjC与JS建立桥梁

// 给哪个webview建立JS与OjbC的沟通桥梁

self.bridge = [WebViewJavascriptBridgebridgeForWebView: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:^(iddata, WVJBResponseCallback responseCallback) {

    NSLog(@"js call getUserIdFromObjC, data from js is %@", data);

 if(responseCallback) {

 // 反馈给JS

      responseCallback(@{@"userId": @"123456"});

    }

}];

[self.bridge registerHandler:@"getBlogNameFromObjC"handler:^(iddata, 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:^(idresponseData) {

    NSLog(@"from js: %@", responseData);

}];

三.JS端如何使用

   

四.注意事项

1.当出现这样的提示的话，说明JS那边已经实现了名字为‘ww’的方法，但是iOS这边没有注册，

具体实现是：

[self.bridgeregisterHandler:@"ww"handler:^(id data, WVJBResponseCallback responseCallback) {

    NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);

    if (responseCallback) {

      // 反馈给JS

      responseCallback(@{@"blogName": @"星仔"});

    }

}];

2. 当在push或者说页面消失的时候，将bridge对象置为空。

五.防止WebView长按实现的方法如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

 // 禁用页面元素选择

    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];

// 禁用长按弹出ActionSheet

    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];

}

js文件下载地址：