Cordova插件开发——滑动手势解锁(iOS篇)

第一次正儿八经的参与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来干了类似的事情,有兴趣的可以查看我之前的一篇文章并留言讨论。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容