Cordova插件开发——滑动手势解锁（iOS篇）

2016-09-08 本文已影响1311人一个大番茄

第一次正儿八经的参与Cordova的项目，想写下些文字，以便日后需要的时候能够帮助自己快速回忆起来，同时也希望能够帮到需要的朋友。

你需要具备什么？

对Cordova有一定程度的了解。
一定的移动端开发能力。
一定的前端知识，基本的css\js\html这些是逃不掉的。
开发环境的支持，你需要安装Cordova、plugman、Xcode、Android Studio等工具。

为什么需要开发插件

我们知道Cordova其实就是用了一个web的壳而已，我们可以利用插件来和native打交道。
简单来说，我认为之所以需要插件的支持，一是为了更好的用户体验，比如一个转场动画，可能利用原生代码来实现效果会更好；二是为了利用原生设备的能力，比如你需要用到GPS、蓝牙等等。

在我的业务场景中，我需要给我的应用加上手势解锁的功能。我想了两种方案，一种是纯前端的方案，即在web页面中嵌入一段js，它负责锁屏界面的显示解锁等功能，是在原有的页面中盖上一层canvas（Demo在此）；第二种是用插件的方式，原生代码去控制锁屏的显示等等。

综合考虑体验和合理度等情况之后我决定用第二种方式，但是为了节省时间，我只是用插件实现了逻辑部分，解锁的界面为了省事儿还是用canvas直接画的。

如何写插件

初始化一个插件只需要一条命令就可以搞定了：
plugman create --name cordovaGestureLock --plugin_id cordova-plugin-gesture-lock --plugin_version 1.0.0

命令执行后就可以创建了一个新的插件目录，如下图：

插件目录

默认会包含src和www目录，plugin.xml是插件的描述文件，比如这个插件的版本号、作者、关键字等等，完整的说明在这里。

下面的截图是我插件的plugin.xml：

plugin.xml

插件的id是cordova-plugin-gesture-lock，如果你的插件发布了的话，可以在这里搜索插件的id。这里我增加了ios的platform，里面指定了插件的头文件和源文件路径，这样在安装插件的时候才会复制到你的应用里去。

然后跳到www目录中的cordovaGestureLock.js文件去，我修改之后的代码变成了这样：

var exec = require('cordova/exec');

exports.showGestureLock = function(arg0, success, error) {
    exec(success, error, "cordovaGestureLock", "showGestureLock", [arg0]);
};

它默认给你生成的方法名叫coolMethod，你把它替换成你插件里暴露出来的方法就好了。

这段代码干了什么呢，它向js的context里暴露了一个叫做showGestureLock的方法，它最终会唤醒你的本地插件来执行。你可以像调用一个普通的js函数一样去调用它。

接下来到了重头部分了，原生代码开发者欢呼的时刻到了，直接上代码吧：


#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>
#import <Cordova/CDVPlugin.h>

@interface GestureLock : CDVPlugin
- (void)showGestureLock:(CDVInvokedUrlCommand*)command;
@end


...
@implementation GestureLock
{
   NSTimeInterval _showGestureLockInterval;
   NSUserDefaults *_userDefault;
}

- (void)pluginInitialize {
   _showGestureLockInterval = 5 * 60;
   _userDefault = [NSUserDefaults standardUserDefaults];
   [self registNotificationHandler];
}

- (void)showGestureLock:(CDVInvokedUrlCommand*)command {
   [self showGestureLockIfNeeded];
}
...

简单来说，我们的插件需要提供暴露给js的方法，也就是这里的showGestureLock。然后在我的代码里，因为我希望我的应用去监听一系列的事件，比如应用被激活等。所以我需要注册一些通知，Cordova提供了一个叫做pluginInitialize的方法，给你一个时机在插件初始化的时候做些事情，比如我这里的注册通知。
在默认的情况下，只有在插件被用到的时候才会被初始化，但是在我前面xml文件里，我有一行代码：
<param name="onload" value="true" />
它让插件在启动的时候就被加载了，因为我想插件一直监听事件。

在我的例子中，我不需要从js中传递参数到native来，所以我的这个函数写的特别简单。而实际command里是可以带js传递过来的参数的，你可以从里面取到你想要的参数。处理完了之后你还可以构造CDVPluginResult来传递结果到js中。

如何使用插件

完成插件的开发之后自然是把它使用起来，只需要简单的一条命令搞定，比如我这里：
cordova plugin add https://github.com/billwang1990/CordovaGestureLock.git --save
我这里用的是我仓库的地址，你也可以指向你本地的地址。

如果要删除一个插件的话也很简单，直接告诉它你需要删除的插件的id就好了：
cordova plugin rm cordova-plugin-gesture-lock --save

添加完插件之后，你再去看你项目config.xml文件就会发现已经多了一个插件了，接下来你就可以在你的项目中使用它了，蛮方便的。
最后完成的Demo在这里。代码写得比较乱，看看就好了。

写在最后

接下来的关于安卓的插件，我会在我开始做的时候再进行记录。

Cordova的插件开发还算简单，比较有意思的问题是它如何实现的插件？即如何让js和native进行通信的，其实在iOS这边主要是利用其runtime来实现的，我一年半前写了一个做了个简单版的bridge来干了类似的事情，有兴趣的可以查看我之前的一篇文章并留言讨论。