随着iOS开发的成本增大，越来越多的公司开始使用html5混合开发软件了，因为使用原生的开发花费的成本跟时间都很大，而使用html5来搭建界面会方便很多，效率相对而言也提高了。虽然使用UIWebView实现的交互效果与原生效果相比还是会大打折扣，这类界面通常没有复杂的交互效果，所以现在主流应用大多采用混合开发。花了几天时间，把JS的基础全部看了一遍，又研究了一下巧神的书，写了一个iOS7以前的JS与OC混合开发的demo。
既然是html5页面搭建的布局，那么肯定是得有html5页面的，所以首先我们得先写一个html5的页面。既然我们做的是App，所以我们针对的是手机页面，需要加入针对移动端页面优化的viewport，然后在body里面加入一个按钮，绑定一个点击事件，在JS里面实现这个方法，通过location.href = ""; 方法进行跳转网页，里面的地址是自己自定义的，然后在OC里面解析。
<html>
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>测试网页</title>
<script type="text/javascript">
function sum(){
location.href = ‘jsoc://call_?100‘; // 自己写的跳转网址
}
function ocCallJsNoParamsFunction(){
alert("OC调用JS中的无参方法");
}
function ocCallJsHasParamsFunction(name, food){
alert(name+"喜欢吃："+url);
}
</script>
</head>
<body>
<button style = "backgroud:red; width:100px; height:30px;" onclick = "click();">点我一下试试</button>
<br>
<a href = "http://www.baidu.com">百度一下,你就知道</a>
</body>
</html>
写完了一个简单的html5页面，接下来就要写JS调用OC以及OC调用JS了。首先，使用storyboard来搭建布局，当然你得拖约束。然后把刷新的Item的设置为Refresh。
把webView拖为属性，把Refresh拖成方法，当点击这个按钮的时候刷新webView。
- (IBAction)refresh:(id)sender{
[self.webView reload];
}
接下来就可以设置webView的属性了。 使用webView加载网页，可以加载网络上的，也可以加载本地的，如果你需要加载的是网页上面的，那么你就需要在 info.plist 里面添加一个配置。
加载本地的，你只需要得到本地html5页面的路径，就能在webView上面展示了。
// 系统可以自动检测电话、链接、地址、日历、邮箱
self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
self.webView.delegate = self;
// 根据资源名,扩展名获取该资源对应的 URL
NSURL *htmlUrl = [[NSBundle mainBundle] URLForResource:@"info.html" withExtension:nil];
[self.webView loadRequest:[NSURLRequest requestWithURL:htmlUrl]];
设置好了webView，现在运行起来，你应该是能看到效果的，如下图所示。
先来讲一个OC调用JS方法，通过 - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script; 方法，我们就可以调用JS里面我们写好的方法了。这里呢，我把调用的方法放在 - (void)webViewDidFinishLoad:(UIWebView *)webView; 当webView加载完页面后调用JS里面的方法。实现OC调用JS。我写了两个方法，第一种是不带任何参数的，所以直接调用方法就可以，而第二种是带参数的，所以第二种方法写法会不一样，stringByEvaluatingJavaScriptFromString 只能带字符串，所以需要先通过stringWithFormat: 拼接字符串，然后把字符串传进去。
- (void)webViewDidFinishLoad:(UIWebView *)webView{
// NSString *js = [webView stringByEvaluatingJavaScriptFromString:@"ocCallJsNoParamsFunction();"];
NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction(‘%@‘,‘%@‘)",@"哈哈",@"苹果"];
// webView调用JS代码，等webView全部加载html界面之后调用
[webView stringByEvaluatingJavaScriptFromString:js];
}
OC调用JS的代码很简单，但是JS调用OC就有点困难了，因为这是iOS7以前的，那个时候没有出JavaScriptCore，所以开发起来有难度。下面来讲讲JS如何调用OC的代码。JS调用OC，并没有现成的API，可以使用"曲线救国"的方法，间接达到。在UIWebView内发起的所有网络请求，都可以通过delegate函数在原生界面得到通知。所以在html5页面发起一个特殊的网络请求，请求加载的网址内容通常不是真实的地址，OC中判断这个特殊的网络请求来实现不同的功能。
/**
* 每当webview发送请求之前就会调用这个方法(js调用oc)
*/
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//获得url全路径
NSString *url = request.URL.absoluteString;
NSString *protocol = @"jsoc://";
// 判断url是否以protocol开头
if([url hasPrefix:protocol]){
//获得协议后面的路径,substringFromIndex:表示从指定位置开始截取字符串到最后，所截取位置包含该指定位置
NSString *path = [url substringFromIndex:protocol.length];
//利用占位符进行切割
NSArray *subpaths =[path componentsSeparatedByString:@"?"];
//获得方法名 jsoc://call_?100
NSString *methodName = [[subpaths firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
NSArray *params = nil;
if (subpaths.count == 2) {
params = [[subpaths lastObject] componentsSeparatedByString:@"&"];
}
//调用方法
SEL sel = sel_registerName([methodName UTF8String]);
[self jsoc_performSelector:sel withObjects:params];
return NO;
}
return YES;
}
sel_registerName([xxx UTF8String]); 和 jsoc_performSelector:withObjects: 用到了runtime，所以还需要具备一些runtime的知识，sel只是一个指向方法的指针，一个根据方法名hash化了的KEY值，能唯一代表一个方法，它的存在只是为了加快方法的查询速度。然后通过自己定义的 jsoc_performSelector:withObjects: 来调用通过sel找到的这个方法。这里我们用了自定义的performSelector，是因为系统给的只能带一个或者两个参数，如果我想要带多个参数，那就只能通过自定义了。通过 sel 指向了一个方法，所以我们得把这个方法实现，这里我就简单的实现。
- (void)call:(NSString *)number{
NSLog(@"参数:%@",number);
NSLog(@"调用了oc的%s方法",__func__);
}
下面就来讲讲自定义的 performSelector怎么实现。给NSObject添加一个Category，然后把jsoc_performSelecor:withObjects:实现以下。这里我们会用到 NSMethodSignature 和 NSInvocation，废话不多说，直接上代码。
- (id)jsoc_performSelector:(SEL)aSelector withObjects:(NSArray *)objects
{
//NSInvocation 利用一个NSInvocation对象包装一次方法调用(方法调用者,方法名,方法参数,方法返回值)
// 通过选择器获取方法签名
NSMethodSignature *signature = [[self class] instanceMethodSignatureForSelector:aSelector];
if(signature == nil){
NSString *reason = [NSString stringWithFormat:@"** The method[%@] is not find **",NSStringFromSelector(aSelector)];
@throw [NSException exceptionWithName:@"错误!" reason:reason userInfo:nil];
}
// iOS中可以直接调用某个对象的消息方式有两种，其中一种就是NSInvocation(对于>2个的参数或者有返回值的处理) 另一种performSelector:withObject
NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
invocation.target = self;
invocation.selector = aSelector;
NSInteger paras = signature.numberOfArguments - 2;
paras = MIN(paras, objects.count);
for(NSInteger i=0;i<paras;i++){
id object = objects[i];
if([object isKindOfClass:[NSNull class]]) continue;
// index从2开始 ，原因为：0 1 两个参数已经被target 和selector占用
[invocation setArgument:&object atIndex:i+2];
}
//调用方法
[invocation invoke];
id returnValue = nil;
if(signature.methodReturnLength){
[invocation getReturnValue:&returnValue];
}
return returnValue;
}
NSMethodSignature 是方法签名，官方定义该类为对方法的参数、返回类似进行封装，协同NSInvocation实现消息转发。
时间： 2024-10-24 09:30:17