iOS平臺Cordova插件的開發方法

在使用cordova開發混合應用的途中，通常採用的插件開發方式來實現原生代碼和JS代碼之間的通信。而且通常狀況下一個模塊就要開發這樣一個插件，換句話說就是用某一個插件來負責某個模塊的原生與JS代碼之間的交互。接下來，我就來簡單介紹一下這麼一個插件的使用方法。

一、首先，要設計一下cordova插件的文件目錄結構。

在mac中顯示以下：

解釋一下，這些文件表明的意思，或許這樣會好理解一點：

• Readme.md是說明文件，無關緊要，可是爲了方便其餘人閱讀，建議帶上，並能夠在裏面說明你的用意。

• plugin.xml文件：這個文件是對這個插件的整體的配置

  • 指定了運行的平臺（ios或者andorid）
  • 插件的id，插件的標識
  • config-file標籤中屬性target的值指定了將插件中原生代碼封裝到的目錄。在子標籤feature中將原生類用一個Key來代替，方便使用。
  • header-file標籤，source-file標籤，屬性src分別爲插件的Objective-C頭文件以及實現文件所在的路徑(目錄結構見上圖)
• js-module標籤，src屬性爲插件js文件所在路徑，屬性name爲插件在js module中的名字(在clobbers標籤以及在前端angular代碼調用插件的函數，須要使用到)。

• clobbers標籤target屬性的值，plugins.xxx,表示在前端的angularjs代碼中可以直接使用window.plugins.mposplugin來獲取插件對象(目前是使用cordova.require("com.technologystudios.mpos.mposplugin")方式獲取插件對象)。

其實，理解這些是有點難度的，就算你如今不理解我在說什麼也沒關係。只要你使用一下就知道了。

二、寫插件的原生代碼

廢話很少說，看註釋就明白了

.h

#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>

//繼承CDVPlugin類
@interface CDVEarphonePlugin : CDVPlugin {

}
//返回前段js時生成的id，cordova自動維護
@property (nonatomic, copy) NSString* callbackId;
//接口方法， command.arguments[0]獲取前端傳遞的參數
- (void)earPhoneExecute:(CDVInvokedUrlCommand*)command;

@end

.m

#import "CDVEarphonePlugin.h"

@implementation CDVEarphonePlugin

@synthesize callbackId = callbackId;

- (void)earPhoneExecute:(CDVInvokedUrlCommand*)command {
    NSDictionary * argums = command.arguments[0];

//要傳遞的參數
    NSDictionary * ret = @{@"success":@"1",@"message":@"參數不爲空!",@"code":@(200),@"data":@{}};

    CDVPluginResult* result = [CDVPluginResult resultWithStatus: CDVCommandStatus_OK messageAsDictionary:ret];
    //根據callbackId回調的id返回原生代碼
    [self.commandDelegate sendPluginResult:result callbackId:self.callbackId];
}
@end

三、編寫插件的jS代碼，按照這個格式寫就好了

//加載cordova對象以及exec方法
 var exec = require('cordova/exec'),
    cordova = require('cordova');

//定義插件對象
 var EARPHONEPlugin = function () {
 };
//定義接口，面向前端angularjs代碼的接口，接口參數三個
EARPHONEPlugin.prototype.earPhoneExecute = function (successCallback, errorCallback,options) {
    if (errorCallback == null) {
        errorCallback = function () {
        }
    }

    if (typeof errorCallback != "function") {
        console.log("EARPHONEPlugin.earPhoneExecute: failure: failure parameter not a function");
        return
    }

    if (typeof successCallback != "function") {
        console.log("EARPHONEPlugin.earPhoneExecute: success callback parameter must be a function");
        return
    }
    //調用原生代碼，
    cordova.exec(successCallback, errorCallback, 'EarphonePlugin', 'earPhoneExecute', [options]);
};

// 把新的插件對象對象，賦值給module.exports屬性。
var earphoneplugin = new EARPHONEPlugin();
module.exports = earphoneplugin;

四、經過終端（CLI）安裝這個插件到開發環境

• 經過CLI(終端)cd 指令進入項目路徑
• 輸入指令cordova plugin add /Users/Tony/Desktop/plugin/com.technologystudios.logout
  (/Users/Tony/Desktop/plugin/com.technologystudios.logout爲插件存放的目錄)

• 安裝成功後，CLI顯示Installing "com.technologystudios.logout" for ios

  項目最外層的plugins目錄和/platforms/ios/www/plugins顯示新添加的插件，其中平臺裏面的plugins是copy最外層的plugins的內容

5，打開Plugins文件夾，對Plugin的原生代碼文件進行編碼

好了，到這裏，插件已經成功的引入到項目中了，接下來就是要解釋如何去使用這個插件進行開發了，也是就是說如何調用這些服務進行混合開發

六、要在js中調用原生代碼，因此咱們用js定義一個service。用來調用這個插件的原生代碼

// 個人測試
    .service('One', function() {
        return function(options){
            // 獲取 options 的內容
            var params = options.params,
                successCallback = options.successCallback,
                errorCallback = options.errorCallback;

            console.log('One params:');
            console.log(params);

            // 獲取 plguin
            var mopos = false;
            if (typeof cordova !== 'undefined') {
                mopos = cordova.require("com.technologystudios.earphone.earphoneplugin");
            };
            if (!mopos) {
                if(angular.isFunction(options.errorCallback)) {
                    options.errorCallback({
                        code: 'no plguin',
                        message: '功能異常'
                    });
                };
                return false;
            };
            // 嘗試調用原生代碼
            try
            {
                mopos.earPhoneExecute(successCallback, errorCallback, params);
            }
            catch (error){
                if(angular.isFunction(options.errorCallback)) {
                    options.errorCallback({
                        code: 'no plguin',
                        message: '功能異常'
                    });
                };
            }
        }
    })

七、Service注入ExternalServiceFacade服務(能夠理解爲類)

在某個模塊負責的服務類中定義對外的藉口

例：

ShoukuangService注入ExternalServiceFacade，定義向外暴露的接口
            this.callMPos = function(params,paygateLoginParams){
                return ExternalServiceFacade.execute('Mpos', {
                    params: params,
                    type: 'SwipeCard',
                    PAYGATE_LOGIN_PARAMS: paygateLoginParams
                    });
            };


ExternalServiceFacade.execute('Mpos',{})函數
            參數1，插件的nativeCode，插件在ExternalServiceFacade的標識
            參數2，傳遞到原生代碼的參數

ExternalServiceFacade.execute('Mpos',{})函數返回promise對象(目前只需明白:調用插件成功,異步返回.then()方法;調用插件失敗,異步返回.catch()方法)

額外知識點

1.module
https://github.com/xufei/blog/issues/17
http://www.angularjs.cn/A00x

2.service
http://www.cnblogs.com/lvdabao/p/3464015.html
http://hellobug.github.io/blog/angularjs-providers/

3.代碼混淆

4.module.exports
http://www.jb51.net/article/33269.htm

5.promise對象
http://my.oschina.net/ilivebox/blog/293771

1. https://cordova.apache.org/docs/en/5.1.1/plugin_ref/spec.html

7.http://www.jb51.net/article/33269.htm