超全的OC与JS交互

2017-11-15 本文已影响145人未来可期me

一直以来啊，觉得我们iOS跟js交互，并没有多难。前有三方桥接，后有大系统库。so easy嘛，所以一直没有深入研究过。

我以为要是交互简单就行，我就可以专心吃鸡！

好好吃鸡，天天向上.gif

你以为的总是你以为的，干活喽！吃鸡能咋的，并不能！

下面看看什么背景，需求，导致我得把这个交互，原原本本的又梳理了一次。

背景

项目要在11.11这个大节日前上线商城功能，东西较多，所以部分功能使用H5，这样分担部分移动端任务。

需求

完成网页中某个活动下的商品点击进入商品详情
完成单个网页的动态化分享内容
后台最好写一套内容，完成安卓，iOS 两端同时可交互

问题，以及解决

一个onclick的网页交互没问题，采用下面JS这个库，没问题，但是多参数，安卓，iOS的方法格式不太一样

---需要解决方法统一的问题

解决：iOS将方法分解成多参数的，下边具体说了，就明白了。

1.有点击事件的交互

单参数交互--//优惠券获取商品ID

H5写法

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS与OC交互</h2>
<input type="button" value="唤醒本地方法(redirection)" onclick="yulinjs.redirection('123')">
</div>

</body>
</html>

iOS---在HYBJsObjCModel.h

@protocol JavaScriptObjectiveCDelegate <JSExport>

//优惠券获取商品ID
- (void)redirection:(NSString *)goods_commonid;
//秒杀活动获取商品ID

@end

iOS---在HYBJsObjCModel.m

- (void)redirection:(NSString *)goods_commonid{
    //获取到商品ID，进行相关跳转事件即可
}

多参数交互--通过点击通过点击事件获取多个参数值[分享内容]

先看下iOS多个参数的方法，与安卓，JS是不同的

//获取分享的内容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url;

H5---

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS与OC交互</h2>
<input type="button" value="唤醒本地方法(getShareTitleDescIconUrl)" onclick=“yulinjs.getShareTitleDescIconUrl(‘1’,’2’,’3’,’4’)”>
</div>


</body>
</html>

iOS----在HYBJsObjCModel.h

@protocol JavaScriptObjectiveCDelegate <JSExport>

//获取分享的内容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url; 

@end

iOS---在HYBJsObjCModel.m

//获取分享的内容
- (void)getShareTitle:(NSString *)title Desc:(NSString *)desc Icon:(NSString *)icon Url:(NSString *)url {
    
}

2.点击事件的交互无【获取分享内容为例】

==问题==：js不通过点击方法,直接调用原生定义好的方法，安卓依然可以监测到，iOS 不行

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS与OC交互</h2>

<body> <script type="text/javascript">setTimeout('yulinjs.redirection('123');',2000)</script></body>

</body>
</html>

==原因== ：js调用方法时，ios网页还没有加载完毕，所以没有js对象，不能够监测到交互事件

++如果H5监测不到加载完毕，可采用方法如下++

采用iOS 原生调用js的方法，js方法里边，再次调用ios原生，在网页加载完毕的时候，进行js，ios交互

ios代码如下

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"yulinjs"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
    

    //静态获取该网页的数据流程
    //1.网页加载完毕,原生调用js的某个方法
    //2.js获取通知,通过调用ios原生方法,传值
    JSValue *Callback = self.jsContext[@"callJS"];
    //传值给web端
    [Callback callWithArguments:@[@"唤起本地OC回调完成"]];
    
}

H5代码如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin-top:20px">
<h2>JS与OC交互</h2>

/*双引号里边加单引号，单引号里边加双引号*/
<script>
    
var callJS = function(){
    alert("成功")
   yulinjs.getShareTitleDescIconUrl(‘1’,’2’,’3’,’4’);
}
</script>

</body>
</html>

下面demo，一看就懂[https://pan.baidu.com/s/1miN2qhi]