开发cordova ios插件 - eju-front/mobile-solution GitHub Wiki

1.安装Cordova环境 sudo npm install -g cordova

2.创建工程

cordova create 工程名(TestPlugin) 应用标识(com.eju.TestPlugin) App名称(Plugin)

3.编写OC原生代码插件类,需要继承自CDVPlugin父类, 例如:

.h文件

 #import <Cordova/CDVPlugin.h>

    @interface CustomPlugin : CDVPlugin

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

    @end

.m文件

@implementation CustomPlugin

     -(void)getSystemVersionByParms:(CDVInvokedUrlCommand *)command{
      //获得回调的CallBack,JS层在调用时会将CallBack函数传递给到原生,在第七部的示例代码要用;
      self.callBackId = command.callbackId;

      //拿到设备信息
      UIDevice * device = [UIDevice currentDevice];

      //创建插件结果对象,重点!如果要使用Cordova框架回调Web层的JS,需要使用此类(Cordova框架类);
      //将Result状态和数据传入Result对象。
      CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:[deviceMore copy]];

      //将请求结果回调到前台,此方法是父类方法,通过该方法可以调用前面传入的Callback。
      [self.commandDelegate sendPluginResult:result callbackId:self.callBackId];
      }
      @end

4.编写plugin.xml的插件配置文件,注意文件名字的大小写

<!-- 要链接的JS文件,一个文件使用一组<js-module> -->
    <js-module src="www/TestPlugin.js" name="TestPlugin">
      <clobbers target="TestPlugin" />
    </js-module>
    
<!-- 根据不同平台配置不同的原生源文件 -->
    <platform name="ios">
      <config-file target="config.xml" parent="/*">
        <!-- 替换插件类名 -->
        <feature name="CustomPlugin">
          <param name="ios-package" value="CustomPlugin"/>
        </feature>
      </config-file>
    <!-- 引用插件的源文件,按照这种格式把所有的原生类的文件引入 -->
      <source-file src="src/ios/CustomPlugin.m" />
      <header-file src="src/ios/CustomPlugin.h" />
      <!-- 引用插件的需要支持的框架,没有引用平台可以注释掉 -->
      <!-- <framework src="AudioToolbox.framework" weak="true" /> -->
    </platform>
  • platform 指明对应的平台
  • config-file 指定定义的配置文件路径
  • config.xml 指定插件相关配置
  • feature name 指定 native 层导出到 js层 的接口名
  • ios-package 指定 native 层的对象的完整 Java 类名
  • source-file src 指定对应的插件目录下的 Java 文件的路径

5.编写调用OC的JS层代码,在插件的JS代码中可以实现自己的逻辑代码,对外只提供借口方法即可, 文件名:TestPlugin.js, JS文件名最好与下面的名字保持统一

         //Cordova.define可以理解是在Cordova框架中定义个TestPlugin名称的类。
    cordova.define("com.eju.plugins.TestMyPlugin.TestPlugin", function(require, exports, module) {

     cordova.define("com.eju.plugins.testMyPlugin.TestPlugin", function(require, exports, module) { 
        //构造方法,用于创建类的对象。 
        function TestPlugin() {}

     //在类的prototype(原型)中定义一个函数。
        TestPlugin.prototype.getDeviceMore  = function(onSuccessCallBack,errorCallBack,[其他参数可选]){
                     //使用Cordova创建调用原生代码,最终会将下面参数拼接成URL,然后在原生中截获,后面的param1---3参数是可选,必须是以数组方式传入。
                cordova.exec(onSuccessCallBack,errorCallBack,"CustomPlugin","getSystemVersionByParms",[param1,param2,param3]);
      } 

          //Cordova框架加载时初始化该类的对象。
      module.exports = new TestPlugin();
      });
    });

6.整理打包

   1、建立一个插件根目录,格式最好如下:com.eju.xxxPlugin
   2、在xxxPlugin下建立www和src目录
   3、将plugin.xml配置文件拷贝到xxxplugin目录
   4、在src目录下建立ios的目录  
   5、将ios原生的类文件拷贝相应目录
   6、将写好的JS文件拷贝到www目录下

相关文档:

⚠️ **GitHub.com Fallback** ⚠️