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上,点击此处前往下载

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

推荐阅读更多精彩内容

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