上一篇文章介绍了Cordova创建了第一个项目，分析了工程目录结构，这一篇写写插件
何为插件，就是完成独立工程的单元，在cordova项目中，插件就是封装原生功能供给vue等等的js调用。比如开发一个调用相机拍照功能，js是不能独立调用相机拿到返回值的，我们需要提供给js调用相机的方法，插件的监听方法，拿到照片之后，将照片打成二进制返回给前端处理一系列的流程。将这些功能封装在一个工具类里，然后暴漏给js一个接口，这就是插件。
就以打电话为例开发一个插件
上一篇创建的工程中 www文件夹下 index.html文件中增加如下代码
1.（删除系统给的index 或者修改也行，写个按钮出来）
2.实现打电话方法
3.运行一下大概是下面的样子，点击有个弹窗
到这为止，cordova加载index，包括修改前端的工作已经完成，下面实现交互。
下面在www目录下创建实体文件夹 plugins一定要是实体文件夹（创建出来是蓝色的）
在plugins文件夹中 创建 cordova.plugins.MCallACall 文件夹同时这个文件夹也是插件id，文件夹最后部分最好对应OC类名，不容易出错
在 cordova.plugins.MCallACall中创建一个www文件夹
在www里创建 js文件 MCallACall.js
目录结构如下：
在js文件中 实现如下代码：
第一句是定义了插件id，一般都是和文件夹名加方法名
第二句类似 OC中 import 引入cordovajs中exec方法
第三句定义一个js函数块，供外部调用，名称就是上面id定义的
第四句是定义调用方法名，call 传入两个监听(回掉)方法 一个是成功一个是失败，第三个参数是电话号码
第五句是exec中定义的返回值格式，前两个成功和失败函数，第三个参数OC类名，第四个参数OC方法名，第五个参数是数组，将所有入参都添加到数组中传入
最后返回的还是 插件名
在插件衔接js中实现如下代码：
都是一样的格式，exports中按着 plugin_list格式给出插件调用信息
第一行 id 就是之前在插件js中定义好的
第二行 文件路径
第三行 是插件id
第五行 供给外部调用的方法名
下面是metadata 插件版本信息
随便写个 1.0.0
在config.xml 中实现如下代码 ：
这里配置加载插件信息，必须配置
在工程plugin文件夹中 创建OC类继承自CDVPlugin
类名方法名在插件js中都定义好了，必须要同名
所以类名叫MCallACall 方法名叫 call 方法还要增加个参数，参数类型是CDVInvokedUrlCommand
这个框架里都有提供，可以仔细看一看
大概代码如下
头文件：
实现：
如果正常的话，运行一下，就可以实现拨打电话功能，功能图就不放了直接拨打出去，有个确认。
代码都很简单，应该看的懂，自己打印一下 command中都有什么 callbackid是什么，还有argument里都有什么。这些都是开发项目必备的功能，后续我也会讲。
这只是一个js调原生的简单插件实现原理，后续复杂的都可以通过这个扩展，可能有些插件还要回调给前端信息，比如拨打电话是否成功，拿回来了什么信息，是否失败，失败的原因。等等
尤其注意的是，插件代码原则上都必须运行在子线程，cordova已经给出了默认后台线程self.commandDelegaterunInBackground
但是有很多OC方法必须在主线程实现，比如打电话，比如更新UI操作，比如数据持久化等等，我建议就像上面实现那样写，将需要在主线程运行的代码通过gcd返回主线程执行。如果插件运行过于耗时，spa内容就会卡顿，严重影响用户体验。
网友评论