H5与原生APP的交互是一个老生常谈的问题，亘古不变的话题，说句实在话，都是了解那么一点点，始终是不得要领，起初在一个项目中用的比较多的交互，用了WebViewJavascriptBridge
可以去[Github]上下载WebJavaScriptBridge
解压缩包,将WebViewJavascriptBridge文件夹拖到你的工程中.
这个相对于项目交互较多，功能比较完善，用起来也挺方便。
如果是只是简单的获取一下标题什么的完全没必要。
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
一个方法足够。
IOS原生的Webview实现一部分简单的交互。
当下主流的与H5交互解决方案：
- 在iOS7以前，是用JS发起一个假的URL请求，在UIWebView中实现一些代理方法拦截带有约定好的protocol的Url，从Url上获取get方式的参数传递，映射成本地原生方法，如下：
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
NSString*urlStr = request.URL.absoluteString;
NSLog(@"url = %@", urlStr);
NSString*paramStr = [urlStrsubstringFromIndex:stratRange.location];
paramStr = [paramStrsubstringToIndex:paramStr.length];
NSLog(@"param = %@", paramStr);
NSError*error =nil;
NSDictionary*dict = [NSJSONSerializationJSONObjectWithData:[paramStrdataUsingEncoding:NSUTF8StringEncoding]options:kNilOptionserror:&error];
if(error) {
NSLog(@"error = %@", error);
}
return YES;
}
这种方式看着很简单，在我看来纯粹就是处理URL做相应操作，用着比较省事，方便H5调原生App内部方法，只要在APP实现方法即可，供前端调用很好用，并且目前项目中就采用这种交互方式。
但是，这种方式不足的一点就是，交互完成的回调，或者说调用H5的方法可以说没有，只适用于前端调起APP方法或传参。
- iOS7以后，大家都使用JavaScriptCore这个官方的WebKit 的 JavaScript 引擎，实现oc与JavaScript的语言穿梭。
这种方案使用量应该是比较多的，IOS自带的也不用导入第三方类库，很方便功能也很强大，与WebViewJavascriptBridge类似。网上的文章也很多，随便一搜一大把。
JSContext：给JavaScript提供运行的上下文环境,通过-evaluateScript:方法就可以执行一JS代码
JSValue：JavaScript和Objective-C数据和方法的桥梁,封装了JS与ObjC中的对应的类型，以及调用JS的API等
JSManagedValue：管理数据和方法的类
JSVirtualMachine：处理线程相关，使用较少
JSExport：这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
这个不再详细叙述，毕竟我也是刚用没多久，很多东西都不熟悉，我只说一下我在使用过程中遇到的问题，是这样的，之前项目中APP还没调H5的方法，这版有个需求，故采用这种办法，WebViewJavascriptBridge嫌有点麻烦，简单一点解决问题进行，（其实是比较懒罢了，呵呵）
起初我是这样写的：
-(void)updateShareChances
{
self.jsContext= [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//在调用前，设置异常回调
self.jsContext.exceptionHandler= ^(JSContext*context,JSValue*exception) {
context.exception= exception;
NSLog(@"JS---Context：%@ 异常信息:%@",context,exception);
};
JSValue*value = [self.jsContextevaluateScript:@"window.getCount()"];
NSLog(@"调用JS方法%@", value.toNumber);
}
看似没有问题，但始终是调不通，一直报错，纠结了一下午，尝试各种办法，始终没能奏效，问前端，前端就给了一个方法名window.getCount()，让我们调，后来我问前端要了我们调用的这段代码，如下：
mounted(){
window.getCount= () => {
this.$store.dispatch('activityEggList',{
code:this.code,
token:this.token
}).then(res=>{
res = res.body
if(res.code==='0'){
const data=JSON.parse(res.data)
this.overCount = data.overCount
}
})
}
有没有人发现问题了，我就看着代码尝试这来，在设置回调之前加了这句：
//将对象指向自身
self.jsContext[@"mounted"] =self;
OK，通了，问题就这样解决了，之前是始终不得要领，一大部分原因是对JS不熟，不懂，前端对APP的交互也比较懵，每次总有各种问题，发现真是要得对JS多了解一点，方便开发。
我是刚使用，懵懵懂懂，有很多问题，还有一些错误不当之处，欢迎评论，纠正，共同学习！！！
后续问题
最近又遇到了，跟前端交互的问题，又重新看了一下，本次上面的解决方法已经不能满足需求了。
- 原生 APP 调用 H5 方法：
#pragma mark -- 配置 JS
-(void)configShareJsCallBack
{
//获取该UIWebView的javascript上下文(二)
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//将对象指向自身
self.jsContext[@"mounted"] =self;
//执行方法方式一：之后在回调JavaScript的方法 ()把内容传出去(传参)
// JSValue *callback = self.jsContext[@"shareScree"];
// //传值给web端
// [callback callWithArguments:@[@"唤起本地OC回调完成"]];
//执行方法方式二(不传参)
JSValue *value = [self.jsContext evaluateScript:@"window.getCount()"];
NSLog(@"调用JS方法%@", value.toNumber);
}
这种方式就是上面的调用前端的方法。
//将对象指向自身
self.jsContext[@"mounted"] =self;
这是比较关键的，暂且理解为进入到前端的方法域。感觉相当于指定代理为当前类。
- H5 调用 原生的方法
#pragma mark -- 配置 JS
-(void)configShareJsCallBack
{
//获取该UIWebView的javascript上下文(二)
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 可以加上这个查看调用是否有异常
//定义好JS要调用的方法, share就是调用的share方法名
self.jsContext[@"getUserId"] = ^() {
NSLog(@"+++++++Begin Log+++++++");
NSArray *args = [JSContext currentArguments];
// dispatch_async(dispatch_get_main_queue(), ^{
// UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"方式二" message:@"这是OC原生的弹出窗" delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
// [alertView show];
// });
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);
}
NSLog(@"-------End Log-------");
};
// 设置调起方法的对象，最为关键的所必须设置的，shareScree 为和前端协商拟定一致的
self.jsContext[@"shareScree"] = self;
}
self.jsContext[@"shareScree"] = self; 这是至关重要的，但是仅仅这些是不够的，前端依然调不起我们的方法。
还需要在 .h 中定义协议方法。
// 1、首先，引入依赖框架
// JSContext.h等的框架
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSCallObjcDelegate <JSExport>
// 对象调用的JavaScript方法，必须声明！！！
- (void)gotoShare;
- (void)goback;
- (NSString *)getUserId;
@end
@interface CommonWebVC : BaseViewController <JSCallObjcDelegate>
这是所必须设置的。
- 方法实现
给前端传值：
#pragma mark -- 给前端调用的方法
- (NSString *)getUserId
{
// 之后在回调JavaScript的方法Callback把内容传出去
JSValue *Callback = self.jsContext[@"getUserId"];
[Callback callWithArguments:@[@"唤起本地OC回调完成"]];
return pUserID;
}
获取前端传回的参数，解析数据：
#pragma mark -- 分享参数
// ( shareurl,sharetitle,shareicon,sharedesc )
- (void)gotoShare
{
// JSValue *Callback = self.jsContext[@"gotoShare"];
//获取到的值
NSArray *args = [JSContext currentArguments];
NSMutableArray * paraArr = [[NSMutableArray alloc]init];
NSLog(@"分享数据%@",args);
for (JSValue *jsVal in args)
{
NSLog(@"33333%@", jsVal.toString);
[paraArr addObject:jsVal.toString];
}
NSLog(@"传过来的数据%@",paraArr);
// NSLog(@"前端调用 本地方法------");
if (paraArr != nil && paraArr.count >= 4) {
//分享出去的链接
NSString * shareUrl = [NSString stringWithFormat:@"%@",paraArr.firstObject];
//分享标题
NSString * shareTitle = [NSString stringWithFormat:@"%@",[paraArr objectAtIndex:1]];
/// 分享图标
NSString *iconUrl = [NSString stringWithFormat:@"%@",[paraArr objectAtIndex:2]];
//分享内容
NSString * shareContent = [NSString stringWithFormat:@"%@",paraArr.lastObject];
dispatch_async(dispatch_get_main_queue(), ^{
[self shareActionURl:shareUrl content:shareContent title:shareTitle icon:iconUrl];
});
}
}
综上所述，这种方式相当于 OC 中的代理设计模式（其实就是）：
-
先在 .h 中定义好 前端需要调用的方法，就是 protocol 协议方法，当前类遵循这个协议。
-
在 .m 中 获取 js 的上下文环境，设置与前端协商一致 的 桥接类 或变量字符串 即 @"shareScree" 为当前类，相当于 OC 中的指定代理为自身。
-
实现 代理方法，接收前端传过来的数据，或传递数据给前端。
总体上 大概是这样，这样比较笨拙的方法实现，应该可以更精简的来实现，也可以创建一个单独的类来实现这些方法，把与 JS 的交互抽离出来，原理一样。
网友评论