iOS开发进阶（九）：OC混合开发嵌套H5应用并互相通信_ios h5混合开发(1)

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

}

/*
我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了js的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在原来这里调用native的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了，只是转化成ios的native回调代理方法
*/
#pragma mark - WKUIDelegate

• (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
  UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@“h5Container” message:message preferredStyle:UIAlertControllerStyleAlert];
  // [alertView addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
  // textField.textColor = [UIColor redColor];
  // }];
  [alertView addAction:[UIAlertAction actionWithTitle:@“我很确定” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
  completionHandler();
  }]];
  [self presentViewController:alertView animated:YES completion:nil];
  }

显然`WKWebView`的代理方法提供了比`UIWebView`颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。


##### 2.1.3 OC调用JS方法


`WKWebView`提供调用js代码的函数是：

• (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;

比如在加载的HTML文件中有如下js代码：

可以调用如下代码进行js的调用：

[_wkView evaluateJavaScript:@“hello()” completionHandler:^(id item, NSError * error) {

}];

[_wkView evaluateJavaScript:@“helloWithName(‘jack’)” completionHandler:^(id item, NSError *error) {

}];

同`UIWebView`一样，也可以通过字符串的形式进行js调用。

NSString *jsString = @“function sayHello(){
alert(‘jack11’)
}
sayHello()”;
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError *error) {

}];

jsString = @" var p = document.createElement(‘p’);
p.innerText = ‘New Line’;
document.body.appendChild§;
";
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError *error) {

}];

##### 2.1.4 JS调用OC方法


除了和`UIWebView`加载一个隐藏的`ifame`之外，`WKWebView`自身还提供了一套js调用native的规范。可以在初始化`WKWebView`的时候，设置一个`config`参数。

//高端配置
//创建配置
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
//创建UserContentController(提供javaScript向webView发送消息的方法)
WKUserContentController *userContent = [[WKUserContentController alloc] init];
//添加消息处理，注意：self指代的是需要遵守WKScriptMessageHandler协议，结束时需要移除
[userContent addScriptMessageHandler:self name:@“NativeMethod”];
//将UserContentController设置到配置文件中
config.userContentController = userContent;
//高端的自定义配置创建WKWebView
_wkView = [[YXWKView alloc] initWithFrame:self.view.bounds configuration:config];
NSURL *url = [NSURL URLWithString:@“http://localhost:8080/myDiary/index.html”];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_wkView loadRequest:request];
_wkView.UIDelegate = self;
_wkView.navigationDelegate = self;
[self.view addSubview:_wkView];

在js可以通过`NativeMethod`这个Handler让js代码调用native。


比如在js代码中，新增了一个方法

触发以上方法的时候，会在`native`以下方法中进行拦截处理。

#pragma mark - WKScriptMessageHandler

• (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
  //这里就是使用高端配置，js调用native的处理地方。我们可以根据name和body，进行桥协议的处理。
  NSString *messageName = message.name;
  if ([@“NativeMethod” isEqualToString:messageName]) {
  id messageBody = message.body;
  NSLog(@“%@”,messageBody);
  }
  }

最后总结下`WKWebView`和`UIWebView`应该如何取舍  
 `WKWebView`是苹果在WWDC2014发布会中发布IOS8的时候公布`WebKit`时候使用的新型的H5容器。它与`UIWebView`相比较，拥有**更快的加载速度和性能，更低的内存占用**。将`UIWebViewDelegate`和`UIWebView`重构成了14个类，3个协议，可以让开发者进行更加细致的配置。


但是`WKWebView`有一个最致命的缺陷，就是`WKWebView`的请求不能被`NSURLProtocol`截获。针对app开发中使用`NSURLProtocol`技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术应用场景，`WKWebView`无法代替`UIWebVIew`，建议使用`UIWebVIew`。


#### 2.2 JSCore 实现原生与H5交互


`JSCore`全称为`JavaScriptCore`，是苹果公司在iOS中加入的一个新的`framework`。该`framework`为OC与JS代码相互操作的提供了极大的便利。该工程默认是没有导入工程中的，需要手动添加。


添加完成后，可以看到`JavaScriptCore.h`中包含以下5个主要的文件。

#import “JSContext.h”
#import “JSValue.h”
#import “JSManagedValue.h”
#import “JSVirtualMachine.h”
#import “JSExport.h”

各文件头含义作用如下：


* `JSContext`: 代表`JavaScript`的执行环境。可以创建`JSContent`在OC环境中执行`JavaScript`脚本，同时也可以在`JavaScript`脚本中访问OC中的值或者方法。
* `JSValue`：是OC和`JavaScript`值相互转化的桥梁。他提供了很多方法把OC和JavaScript的数据类型进行相互转化。其一一对应关系如下表所示：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2a3f7fd614ec40a995b038bd35d23279.png)


* `JSManagedValue`：JSValue的包装类。JS和OC对象的内存管理辅助对象。由于JS内存管理是**垃圾回收**，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。因此，可以用`JSManagedValue`保存JSValue来避免。
* `JSVirtualMachine`： JS运行的虚拟机。可以支持并行的`JavaScript`执行，管理JavaScript和OC转换中的内存管理。
* `JSExport`：一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。


##### 2.2.1 OC调用H5方法并传参

1: 首先引入头文件
#import <JavaScriptCore/JavaScriptCore.h>

2: 设置 WKNavigationDelegate 代理 并实现以下代理方法：

• (void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation {

  //给H5的getInfo()方法传参
  NSString *webFunctionStr = [NSStringstringWithFormat:@“getInfo(‘%@’)”,@“参数aaa”];
  //调用H5方法
  [webView evaluateJavaScript:webFunctionStr completionHandler:^(id_Nullableresult,NSError*_Nullableerror) {

    AX\_LOG(@"%@---%@",error, result);
  

  }];
  }

##### 2.2.2 H5给OC传参

//1: 创建网页配置对象
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 2: (a)WKWebView注入ScriptMessageHandler设置代理方法self, (用于调用H5方法)
[config.userContentController addScriptMessageHandler:self name:@“H5_OC”];
//3: 初始化WebView
_webView = [[WKWebView alloc]initWithFrame:CGRectMake(0,70, SCREEN_WIDTH, 1) configuration:config];

//实现ScriptMessageHandler代理方法
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

//5: message为H5传给iOS的参数
NSDictionary *messageDic = message.body;
NSLog(@“%@”, messageDic);

//mj解析参数(此处可以忽略)
AXH5Model *model = [AXH5Model mj_objectWithKeyValues:messageDic];
if([model.method isEqualToString:@“success”]) {
AX_LOG(@“H5数据提交成功”);
[self.navigationController popViewControllerAnimated:YES];
}
}

#### 2.3 UIWebView的基本用法


2.1小节具体介绍了`WKWebView`的应用方法，对于`UIWebView`虽然官方不再推荐使用，但是对于技术爱好者来说，还是有必要学习了解下。毕竟针对某些特殊场景，`UIWebView`还是有用武之地的。


##### 2.3.1 H5页面嵌套

UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.delegate = self;
[self.view addSubview:webView];
//网络地址
NSURL *url = [[NSURL alloc] initWithString:@“http://www.taobao.com”];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

##### 2.3.2 UIWebViewDelegate常用代理方法

//进行加载前的预判断，如果返回YES，则会进入后续流程（StartLoad,FinishLoad）。如果返回NO，这不会进入后续流程。

• (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  //开始加载网页
• (void)webViewDidStartLoad:(UIWebView *)webView;
  //加载完成
• (void)webViewDidFinishLoad:(UIWebView *)webView;
  //加载失败
• (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

##### 2.3.3 OC调用JS方法


比如在加载的HTML文件中有如下js代码：

可以调用 `- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;` 函数进行js调用。

[webView stringByEvaluatingJavaScriptFromString:@“hello()”];
[webView stringByEvaluatingJavaScriptFromString:@“helloWithName(‘jack’)”];

js代码不一定要在js文件中预留，也可以在代码中通过字符串的形式进行调用，比如下面：

//自定义js函数
NSString *jsString = @“function sayHello(){
alert(‘jack11’)
}
sayHello()”;
[_webView stringByEvaluatingJavaScriptFromString:jsString];

NSString *jsString = @" var p = document.createElement(‘p’);
p.innerText = ‘New Line’;
document.body.appendChild§;
";
[_webView stringByEvaluatingJavaScriptFromString:jsString];

##### 2.3.4 JS中调用OC方法


让js通知native进行方法调用，可以让js产生一个特殊的请求。可通过`Native`代码拦截，而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的`iframe`来实现该功能。通过将`iframe`的`src`指定为一个特殊的URL，实现在 `- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType;`方案中进行拦截处理。对应的js调用代码如下：

function loadURL(url) {
var iFrame;
iFrame = document.createElement(“iframe”);
iFrame.setAttribute(“src”, url);
iFrame.setAttribute(“style”, “display:none;”);
iFrame.setAttribute(“height”, “0px”);
iFrame.setAttribute(“width”, “0px”);
iFrame.setAttribute(“frameborder”, “0”);
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}

比如在js代码中，调用以下两个js方法：

function iOS_alert() {//调用自定义对话框
loadURL(“alert://abc”);
}
function call() {// js中进行拨打电话处理
loadURL(“tel://17715022071”);
}

当触发以上方法的时候，就会进入`webview`的代理方法中进行拦截。

• (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  NSURL * url = [request URL];
  if ([[url scheme] isEqualToString:@“alert”]) {//拦截请求，弹出自定义对话框
  UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@“test” message:[url host] delegate:nil cancelButtonTitle:@“OK” otherButtonTitles:nil];
  [alertView show];

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】