点击上方“iOS开发”，选择“热门公众号”
关键时刻，尽快交付！
前言
网页中的JS如何与iOS交互是每个iOS猿必须掌握的技能。 说到与JS交互，不得不提一下。
翻译结果不太文明（汗，不知道为什么很多翻译软件会把它翻译成“”，但我更喜欢翻译成“mixed，mixed-race”），App我理解为通过Web 网络技术（例如 HTML、CSS 和 .NET）与混合移动应用程序相结合。
那么我们来看看比较一下优缺点：
.jpg
由于它的灵活性（更改时不必重新发布网页）和通用性（一份H5可以在所有平台上使用）和低门槛（前端猿可以轻松上手），用于非核心功能模块。 Web 的实现方式在各个方面都可能是优越的。 可以为JS调用核心函数和设备硬件提供强有力的支持。
指数
发展简史
以下是发展简史：
1.H5发布
html5.png
Html5于2014年9月正式发布，此版本中最大的变化之一就是“从之前的XML子集升级为独立集合”。
2.H5渗透到App开发中
APP开发中有一个组件（在iOS中），该组件可以加载Html文件。
在H5流行之前，加载的网页非常单调（因为只能加载一些静态资源）。 自从H5流行以来，前端猿开发的H5页面在H5中表现出色，使得H5开发慢慢渗透到App开发中。 来。
三、现状
虽然出现了RN、Weex等使用JS编写App的技术，但并没有被淘汰。 市场上的大多数应用程序都不同程度地引入了Web页面。
这个库在iOS 7之后被苹果加入到标准库中，对iOS与JS之间的交互调用产生了划时代的影响。
它一般由4个类和1个协议组成：
工作.jpg
以及协议：
实现用于将 -C 类及其实例方法、类方法和属性导出到代码的协议。
这里 , 比较容易理解。 我们把清单拿出来解释一下：
的用法及其关系
.jpg
官方文档介绍：
实例代表一个独立的执行环境。 使用此类有两个主要目的：支持并发执行，以及管理在 -C 或 Swift 之间桥接的对象的内存。
关于使用，一般我们不需要手动创建。 因为当我们得到的时候，我们所得到的就属于一个人。
每个上下文（对象）都属于一个。 每个都可以包含多个上下文，允许值（对象）在上下文之间传递。 然而，每一个都是不同的，即我们不能将一个中创建的值传递到另一个中的上下文。
该 API 是线程安全的 - 例如，我们可以从任何线程创建对象或运行 JS 脚本 - 然而，尝试使用相同对象的所有其他线程都将被阻止。 要同时在多个线程上运行脚本，请为每个线程使用单独的实例。
AND 换算表
iOS与JS交互
对于iOS与JS的交互，我们首先从调用方向上分为两种情况：
呼叫-.jpg
JS调用
其实JS调用iOS也分为两种实现方式：
假方法
原理：该方法其实就是在启动时使用代理的方法来拦截请求，判断该请求是否是约定的假请求。 如果是假请求，说明JS想要按照约定调用我们的方法，按照约定执行我们的代码。
proxy有拦截请求的功能，直接在那里做判断即可：
- (BOOL):( *) :( *) :(ype) {
NSURL *url = .URL;
// 与约定的函数名进行比较
if ([[url] :@""]) {
// 去做就对了
有两个代理，一个是，另一个是。 我们将在后面的章节中讨论它，这里我们需要设置并实现它的方法：
- (void):( *) :( *) :(void (^)(licy)) {
NSURL *url = ..URL;
// 与约定的函数名进行比较
if ([[url] :@""]) {
// 去做就对了
();
;
();
注意：这是当您的应用程序决定是否允许或取消导航时调用的代码块。 此代码块采用单个参数，该参数必须是枚举类型 licy 的常量之一。 调用失败会导致崩溃。
这里添加JS代码：
() {
(“://xxx”);
然后获取一个标签并使用它：
称呼！
方法
iOS 7 是专门为与 JS 交互而设计的。 我们加载后就可以获取到，然后在JS中使用代码来解释或响应该对象：
//首先导入库
#
// 然后在代理方法中完成加载
- （空白）：（ *） {
// 获取JS上下文
= [:@"..."];
// 做一个引用，参考JS中的元素进行解释。 例如，方法可以解释为Block，对象也可以指向OC对象。
[@""] = 自我；
[@""] = ^(id){
// 注意，这里的线程默认是Web处理线程。 如果涉及到主线程操作，需要手动切换到主线程。
(eue(), ^{
// 你的代码
});
这里的JS代码比较简单。 只需声明一个未解释的函数（具有约定的名称）以供参考：
变量=xxx；
();
iOS调用JS
iOS调用JS的实现方式也分为：
直接注入JS并执行
在iOS平台上，有一个用于注入和执行JS的API。
有一种方法可以直接注入JS：
*jsStr = [ :@"('%@')", @"警报消息"];
[：jsStr]；
注意：该方法将返回JS运行结果（*）。 它是一个同步方法，会阻塞当前线程！ 尽管此方法并未被弃用，但最佳实践是使用 class::。
官方文档：
: 等待。 如果您加载未加载代码的网页，则可能会挂起您的应用程序。 最好的方法是采用该类并使用它的 :: 。
不同的是，注入和执行 JS 方法不会阻塞当前线程。 因为web中加载的JS代码可能没有被验证，如果线程被阻塞，App可能会挂掉。
*jsStr = [ :@"('%@')", @"北京市东城区南锣鼓巷纳福胡同xx号"];
[ :jsStr :^(id , * 错误) {
NSLog(@"%@----%@", , 错误);
}];
注意：该方法不会阻塞线程，其回调代码块始终在主线程中运行。
官方文档：
A。
发送 的（或错误）到 。 在 main 上运行。
方法
上面已经简单提到了图书馆提供的类。 以下是官方文档的介绍和翻译：
实例是对值的引用。 您可以使用类在 C 或 Swift 之间转换基本值（例如数字和字符串），以在本机代码和代码之间传递数据。
但你也看到了我上面贴的OC和JS数据类型转换表，它并不局限于官方文档中提到的基本值。 如果你对JS不熟悉，我在这里解释一下为什么JS中也可以指向对象和函数，因为JS语言不区分基本值、对象和函数。 在 JS 中，“一切都是对象”。
好吧，我们直接展示代码：
//首先导入库
#
//先获取JS上下文
自己。 = [:@"..."];
// 如果涉及到UI操作，则切换回主线程调用JS代码，通过数组@[]输入参数
(eue(), ^{
* = 自我。[@""];
[：@[]]；
});
上面的代码调用了JS代码中的一个函数，并给函数添加了@[]作为输入参数。 为了方便阅读和理解，下面是JS代码：
(){
变量 = ;
// 做你想做的事
与 JS 交互的独特方式
.jpg
和 之间的区别本文不会详细解释。 更多信息请自行查阅。 这里我要说的是与JS交互时的独特方法：
方法
如上所述，除此之外，它还有另外一种。 这是做什么用的？
该协议包含一些用于在 Web JS 想要显示警报或触发器时进行侦听的函数。 如果我们加载一个web进去，想要web JS提醒或者正常弹窗，我们就需要实现相应的代理方法。
注意：如果没有实现相应的代理方法，则按照默认的操作。
这里我们以alert为例。 相信读者可以自行推断。 下面是在监控web的代理方法中替换JS中的alert显示来显示alert的例子：
- (void):( *) :( *) :( *)框架 :(void (^)(void)) {
// 使用弹窗显示JS会提示的信息
*alert = [ itle:@"提醒"::];
[警报：[：@“明白了”风格：ncel：^（*）{
// 必须在函数内调用
();
}]];
[自我r：警报：是：无]；
方法
是JS拦截JS假请求后调用的另一个方法。 该方法是利用. 与拦截false的方法相比，传递参数更简单、更方便。
这是什么意思？
ler 类有一个方法：
- (void)ler:(id) 姓名:( *)姓名;
该方法用于添加一个脚本处理器，可以在处理器中处理JS脚本调用的方法，从而达到JS调用的目的。
那么ler类和毛羽有什么关系呢？
初始化函数中有一个输入参数，其类型为on。 on 包含属性 r，它是 ler 类型的实例。 我们可以使用这个 r 添加不同名称的脚本处理器。
勒.jpg
坑
然后回到 - (void)ler:name: 方法。 此方法添加脚本消息处理器（第一个输入参数）并为处理器指定名称（第二个输入参数名称）。 不过，使用这个函数有一个陷阱：输入参数会被强引用，所以如果你把当前参数作为第一个输入参数，而this又由它自己持有...r，就会造成循环引用。
.jpg
我们可以通过-(void):方法删除对r的强引用。 所以一般我们的代码都会成对添加和删除：
- (无效):(布尔) {
[极好的 ：];
[self...r ler:self name:@""];
- (无效):(布尔) {
[极好的 ：];
[自我...r：@""];
呃协议
er 是脚本信息处理器协议。 如果你想让一个对象具有脚本信息处理能力（比如上面代码中的所有权是self），你必须让它遵守这个协议。
er协议内部非常简单，只有一个方法，我们必须实现这个方法（@）：
// 呃协议方法，收到脚本信息时触发
- (void)r:(ler *)r 年龄:( *) {
// 有两个属性：name 和 body
// .name可以用来区分要进行的处理
if ([.name:@""]) {
// .body相当于JS传递的参数
NSLog(@"JS 调用 %@", .body);
补充JS代码：
// 改变，只需改变你想要的参数
....()
完成并收工！
调用iOS设备摄像头的JS Demo
我徒手做了一个demo，实现了JS与代码的交互，实现了使用JS调用iOS设备摄像头的功能。 demo中包含了权限申请、用户拒绝授权等细节（技术上就是JS和相互传值调用），请大家指教。
我向各位基佬低头跪下~（演示地址）
总结
送花完毕，希望我的文章能给您带来价值！ 如果你觉得文章还过得去，请分享给我吧~！
