IOS - JS与APP交互问题小结

H5与原生APP的交互是一个老生常谈的问题，亘古不变的话题，说句实在话，都是了解那么一点点，始终是不得要领，起初在一个项目中用的比较多的交互，用了WebViewJavascriptBridge

可以去[Github]上下载WebJavaScriptBridge

解压缩包,将WebViewJavascriptBridge文件夹拖到你的工程中.

这个相对于项目交互较多，功能比较完善，用起来也挺方便。

如果是只是简单的获取一下标题什么的完全没必要。

NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

一个方法足够。

IOS原生的Webview实现一部分简单的交互。

---

当下主流的与H5交互解决方案：

1. 在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方法或传参。

2. 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多了解一点，方便开发。

我是刚使用，懵懵懂懂，有很多问题，还有一些错误不当之处，欢迎评论，纠正，共同学习！！！

后续问题

最近又遇到了，跟前端交互的问题，又重新看了一下，本次上面的解决方法已经不能满足需求了。

1. 原生 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;

这是比较关键的，暂且理解为进入到前端的方法域。感觉相当于指定代理为当前类。

2. 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 中的代理设计模式（其实就是）：

1. 先在 .h 中定义好 前端需要调用的方法，就是 protocol 协议方法，当前类遵循这个协议。

2. 在 .m 中 获取 js 的上下文环境，设置与前端协商一致 的 桥接类 或变量字符串 即 @"shareScree" 为当前类，相当于 OC 中的指定代理为自身。

3. 实现 代理方法，接收前端传过来的数据，或传递数据给前端。

总体上 大概是这样，这样比较笨拙的方法实现，应该可以更精简的来实现，也可以创建一个单独的类来实现这些方法，把与 JS 的交互抽离出来，原理一样。