Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加Swift类和相关配置等)。

原来我也说过,使用 Cordova 进行跨平台应用开发时,不建议直接对生成的各个平台项目进行编辑(除非目前只要开发单一平台版本)。比如:html页面应该是编辑Cordova工程根目录下的www 文件夹内容,再一次编译发布成多个平台项目。

同样的,如果需要实现与系统原生代码的交互,我们也应该将其封装成一个个插件(像原来介绍过的 camera插件,console插件)。这样就可以实现动态地添加或移除插件,也便于在其他项目中的复用。
本文介绍如何使用 Swift 开发一个Cordova功能插件。

1,自定义插件的功能说明

本文是将前文的口令验证功能封装成插件,所以最终实现的功能是一样的。即Swift这边接收传输过来的口令字符串,判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。

2,自定义插件的使用效果图同前文还是一样的。


原文:Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

Paste_Image.png
Paste_Image.png
3,自定义插件的创建

我们随便在本地建立一个文件夹(比如叫 HanggeSwiftPlugin),在里面放置插件的相关功能实现代码和配置文件。目录结构如下:

下面分别介绍各个文件的内容和功能
(1)src文件夹
这个下面就是放置插件的功能实现代码了,可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 的验证插件,如果还有 Android 版的验证插件,那么可以在 src 文件夹下再创建个 android 文件夹,然后把相关的 java 代码放到里面。
由于功能比较简单,在 ios 文件夹下只有一个实现类
HanggeSwiftPlugin.swift,具体代码如下:

Paste_Image.png

(2)hangge-swift-plugin.js
JS模块文件,这里封装了插件的调用方法,这样在页面中使用的时候更加方便。
比如前文我们通过 Cordova.exec()来调用 Swift 代码,这里我们使用 插件名称.插件方法() 即可,这样使用起来更加方便,代码也更加清晰。其内容如下:

Paste_Image.png

(3)plugin.xml插件的配置文件。
用来配置插件的名字,JS模块文件位置,以及各个平台的功能实现源码位置(这里只实现的iOS的验证功能,所以只配置了iOS平台相关内容)。

Paste_Image.png

注意:如果自定义插件中有其他的swift文件或者xib文件,需要在plugin.xml文件中进行引用:

<source-file src="src/ios/SelectImageViewController.swift" />
<resource-file src="src/ios/SelectImageViewController.xib" />
4,自定义插件的安装

封装好的插件我们通过 cordova plugin add 命令来安装,假设我们要给 HelloWorld 这个工程添加刚才做的那个自定义验证插件。
(1)由于插件是使用Swift语言写的,首先在“终端”中进入到项目文件夹,并运行如下命令添加 Swift 支持插件:

cordova plugin add cordova-plugin-add-swift-support

(2)假设我们做的自定义插件是在用户“文稿”目录下,运行如下命令把这个插件添加到工程中来:

cordova plugin add 插件所在目录 
cordova plugin add ~/Documents/HanggeSwiftPlugin

进入项目文件夹下的 plugins 文件夹可以看到,自定义插件已经成功的添加进来。当然,这个自定义插件在各个平台工程下也同步安装了。

(3)以后如果想移除这个自定义插件,运行如下命令即可:

cordova plugin remove 插件ID(位于plugin.xml头部)
cordova plugin rm hangge-swift-plugin
5,自定义插件的使用修改首页 index.html 为如下内容。

(1)我们还是可以通过Cordova.exec()来调用Swift验证代码

Paste_Image.png

在“终端”中运行如下命令编译:

cordova build

接着运行如下命令使用模拟器运行,即可看到效果:

cordova emulate ios

(2)当然还是建议使用 模块名.模块方法() 的形式调用自定义插件

Paste_Image.png

(3)回调方法可以使用匿名函数

Paste_Image.png

(4)在使用自定义插件之前还可以判断下插件是否存在,以防报错

Paste_Image.png

注意:如果自定义插件需要修改,直接在终端中

 cd Cordova项目 -> cordova plugin remove 插件ID(位于plugin.xml头部) -> cordova plugin add 插件所在目录 

原文出自:
www.hangge.com
转载请保留原文链接:
http://www.hangge.com/blog/cache/detail_1152.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017年的第一天,早上起来,拉开窗帘就发现窗外白白茫茫的一片,树上挂满了洁白晶莹的雾淞,好幸运啊,连着两天出了雾...
    墨香悠然666阅读 442评论 6 7
  • 一片春愁待酒浇,江上舟摇,楼上帘招。秋娘渡与泰娘桥,风又飘飘,雨又潇潇。 何日归家洗客袍?银字笙调,心字香烧。流光...
    只只就是小满阅读 328评论 0 1
  • 中原河洛地,一国名曰夜郎。城中千余人,城池长宽二公里见方,四面围城,每面各一城门,城门常驻兵把守,不与外人相通,城...
    金石君阅读 428评论 0 0
  • 听过关于很多猫的流言非语,也了解猫的性格,所以一直没有养猫的想法,因为我不想当个奴才。不喜欢它们的呼冷呼热,它无聊...
    大雄有只狗阅读 543评论 0 1
  • 天地双雄会群英,海陆两岸战八方。 万事皆怕此生险,不肯过江成败将。
    我爱吃任何鱼阅读 163评论 0 3