ionic框架+cordova自定义插件开发流程

一、配置cordova开发环境并添加ios平台支持

下面建立一个连接安卓系统电视棒和手机端，实现屏幕拷贝，文件共享等功能的demo。
1.通过终端命令创建一个项目

cordova create TestPlugin com.testPlugin.zzj TestPlugin

//create 后面的参数分别对应是"项目的文件夹名称"、"ios工程的bundleID"、"ios工程名"

创建目录

2.为项目添加ios平台支持

//首先cd 进入到工程目录下，然后运行
cordova platform add ios

创建平台支持

3.使用xcode打开目录进行正常流程ios开发

ios工程目录

4.在plugin目录下建立文件夹，命名方式类似bundleID格式，建立.h .m文件，继承自CDVPlugin类，插件的主要逻辑都在这里实现。如果插件需要静态库依赖也把对应的framework或.a文件也加入到新建的文件夹下。

在.m文件中写native方法供js调用，需要注意的是入参必须是CDVInvokedUrlCommond类，js调用失败时根据callbackId传送对应的失败信息

5.在staging目录下的config.xml文件下添加下面代码，让js能识别原生中调用的类及调用类的方法

//eshareModel是model名称，value后面的"linkmeEshare"是.h文件中实现逻辑所属的类，就是一开始继承CDVPlugin那个
    
        
    

6.在Staging下的index.html文件写一个按钮测试js能不能正常调用原生方法。

    
        
        
    
    
        

            
Apache Cordova
        
        
        
        
        
        调用OC插件  

        
    

运行工程，可以看到效果如图：

到这里代表插件功能开发完成并通过测试，下一步是把cordova插件加入到ionic框架中，提供给js、ts调用。

二、在ionic中添加cordova插件并调用。

把cordova工程中的插件导入到ionic中有两种方法，一种是利用plugman命令创建一个新插件工程，替换资源文件及配置文件。
另一种是创建打包文件夹，把资源文件和配置文件放到特定的位置。

首先保证终端中已经安装好plugman，然后执行下面命令新建一个插件工程，并添加ios平台

plugman create --name esharePlugin --plugin_id esharePlugin --plugin_version 1.0.0
plugman platform add --platform_name ios

复制上面cordova工程中的framework文件、.h、.m文件到插件的ios文件夹下，并且修改plugin.xml配置文件以及www文件夹下的js文件。
配置文件中包含插件所引用的资源以及其他设置，js文件里面负责对原生方法的调用。
关于xml文件中各项的意义可以查看：
cordova Plugin.xml 详解

最后修改js文件

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

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'esharePlugin', 'showEshareDevices', [arg0]);
};

把插件导入到ionic中，添加支持平台并且运行。

ionic cordova plugin add /Users/jeffrey.z/esharePlugin

如果出现needs a valid package.json，则要先进入到插件目录运行

npm init

在ionic中需要调用的ts页面下，添加下面代码

  declare let cordova: any;
  //调用成功的回调函数
  alertSuccess(msg) {
    alert(msg);
  }

  //调用失败的回调函数
  alertFail(msg) {
    alert('调用OC失败: ' + msg);
  }
  //调用OC插件方法
  alertShow() {
    //通过js代码调用
    let avgArr:string[] = ["Hey,获取设备!"];
    cordova.plugins.esharePlugin.coolMethod(this.alertSuccess,this.alertFail,avgArr);
  }

  eshareTest() {

    this.alertShow();
  }

在html页面下添加一个测试按钮

      
        showEshare
      

执行

ionic build iOS

运行结果如图

IMG_0ECE4FCE95B0-1.jpeg

以上，cordova自定义插件开发完成！