超全的OC与JS交互

2018-02-12 10:52:44来源:https://www.jianshu.com/p/1d09ef0cb5b2作者:流浪在简书人点击

分享


一直以来啊,觉得我们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>
<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>
<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>
<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>
<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]








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台