Mac下使用Cordova在iOS应用中自定义插件的两种方式

前言:本文主要是针对对webapp开发有一定基础和对Cordova有了一定的了解的人员,如果你是Cordova的初学者,建议先看看Cordova的相关介绍以及简单的一些CLI命令使用。Cordova的相关介绍以及安装推荐文章

一、使用Cordova新建一个ios项目

1.打开终端,输入

cordova create Demo com.example.HelloWorld HelloWorld


1.1新建iOS项目

参数说明

第一个参数:Demo为工程的文件夹名;

第二个参数:(可选)com.example.HelloWorld为应用程序的id名;

第三个参数:(可选)HelloWorld为项目的名称。

2.进入工程添加iOS平台

cd Demo

cordova platform add ios

1.2.1添加iOS平台

执行完上述命令后,我们的文件目录结构如下

1.2.2工程目录结构

(注:执行上面这个命令的时候会有些慢,耐心等待,如果命令执行失败,没有生成ios这个目录,就重新执行这个命令)

3.运行并测试

用Xcode打开Demo->platforms->ios->HelloWorld.xcodeproj,编译运行这个项目,出现以下结果则表示你的项目运行成功(因为是用Xcode进行编译运行,所以下面的代码编辑都是在Staging目录下,原因见Cordova的相关介绍以及安装推荐文章

1.3运行结果

二、利用cordova自定义js插件

1.编辑/定义插件

在Staging->www下新建一个目录plugins,用来专门存放我们自定义的js插件,然后是新建插件的文件名cordova-js-plugin,最后是存放插件的源代码目录以及文件(以上命名可以根据个人习惯)。最终得到的目录结构如下

2.1 js插件目录结构

插件logger.js的源代码和格式(这里只是一个简单的例子)

cordova.define("cordova-js-plugin.logger",function(require, exports, module) {

    var logger = module.exports;

    logger.alterLog =function(){

       alert("你好!");

   };

});

2.注入插件

在Staging->www目录下找到cordova_plugins.js文件,这个文件是专门用来向cordova注入我们自定义的插件的,注入的代码参考如下(粗体部门为我们刚刚写的插件logger.js)

cordova.define('cordova/plugin_list',function(require, exports, module) {

module.exports = [

   {

      "file":"plugins/cordova-js-plugin/www/logger.js",

      "id":"cordova-js-plugin.logger",

      "clobbers": [

         "logger"

      ]

   }

];

module.exports.metadata =

// TOP OF METADATA

{

   "cordova-plugin-whitelist":"1.2.2"

}

// BOTTOM OF METADATA

});

说明

      file:插件的文件路径

      id:和定义插件时的名称(即第一个参数)保持一致

      clobbers:调用插件时使用的名称

3.调用插件

在Staging->www下找到index.html文件,如果head下有以下第一行,就将它注释掉,替换成第二行(第一行中的某些配置项会报错,这个是cordova与原生的兼容性问题,不作深入讨论)

2.2 index.html文件调整

接下来就是编写调用的入口和代码(代码比较简单,这里就直接上截图)

2.3 测试js插件入口
2.4 调用js插件方法

运行结果如图

2.5 运行结果
2.6 运行结果

三、利用cordova自定义oc插件

1.编辑/定义插件

在工程目录下找到Plugins目录,新建一个插件文件夹CDVOcPlugin,然后新建一个插件对应的类,这个类是继承CDVPlugin,最后的目录结构如下

3.1 oc插件目录结构

插件的定义和实现

//OCPlugin.h

#import <Cordova/CDVPlugin.h> //这个地方要看清,默认引用的头文件如果不一样,改成这样

@interface OCPlugin :CDVPlugin

- (void)testOcPlugin:(CDVInvokedUrlCommand*)command;

@end

//OCPlugin.m

#import "OCPlugin.h"

@implementation OCPlugin

- (void)testOcPlugin:(CDVInvokedUrlCommand*)command{

   if (command.arguments.count>0) {

      //获取到入参数组中的第一个元素

      NSString *param = command.arguments[0];

      //创建一个回调对象并附上String类型参数

      CDVPluginResult *pluginResult = 

      [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:

      [NSString stringWithFormat:@"传入参数:%@", param]];

      //通过cordova框架中的callBackID回调至JS的回调函数上

      [self.commandDelegate sendPluginResult:

      pluginResult callbackId:command.callbackId];

   } else {

      //如果没有入参,则回调JS失败函数

      CDVPluginResult *pluginResult =    

      [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR

      messageAsString:@"没有传入参数"];

      [self.commandDelegate sendPluginResult:

      pluginResult callbackId:command.callbackId];

    }

}

@end

2.注入插件

在Staging目录下找到config.xml配置文件,通过如下配置注入我们的oc插件(配置较简单,直接上图)

3.2 注入插件

说明

      feature name:调用时插件的名称

      param name:插件包名  value:插件对用的oc类

3.调用插件

同调用js插件一样,在index.html文件添加一个入口

3.3 调用插件的入口

接下来是插件调用的具体方式,在index.html文件里面加一个script标签(重点是粗体部分)

<script type="text/javascript">

   //调用OC插件方法

   function clickOcPlugin() {

      //通过cordova将我们的插件名称,方法名,参数,成功回调的func及失败回调的func传入

      cordova.exec(alertSuccess,alertFail,"ocplugin",

      "testOcPlugin",["Hello,world!"]);

   };

   //调用成功的回调函数

   functionalertSuccess(msg) {

      alert(msg);

   };

   //调用失败的回调函数

   functionalertFail(msg) {

      alert("调用OC插件失败: "+ msg);

   };

</script>

运行结果如图

3.4 运行结果
3.5 运行结果

注:以上内容是我学习相关资料后的分享,如果有错误,请各位指出,也欢迎大家前来拍砖,灰常感谢!

附:源代码在github上,点击此处前往下载

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

推荐阅读更多精彩内容

  • Cordova自定义插件实战# 使用前提 这篇文章是之前发表在CSDN上的,拿过来充数用的,其实那个时候也写了不少...
    one_cup阅读 1,535评论 5 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,490评论 18 139
  • 昨天第一次写简书,感觉太生硬,有的东西只有自己懂了,没有说的和明白,还望大家见谅,今天说一下自定义ionic插件的...
    会疼的白痴阅读 4,936评论 7 4
  • 文/愚木 我想,当我看到你的时候 我会把阳光吸入胸膛 然后被一阵风撂上山岗 给一只白文鸟穿上花衣裳 我想,当时间被...
    愚木的简书阅读 259评论 1 6
  • 去年逛 github 的时候,发现一个仿今日头条的项目链接,发现很多好玩的东西,比如颜色的渐变,Fragment ...
    魏魏魏魏阅读 574评论 0 1