ionic2 調用自定義插件之研究

最近在研發一個移動項目，架構已經定型，使用Ionic2開發，雖然ionic2 已經提供了ionic native插件，但是當遇到一些特别的需求大多時候還是需要我們自己封裝插件。

方式一：編寫全局declare檔案

現在我們有一個“殘峰（我的同僚）”封裝好的簽名版插件，cordova plugin暴露的JS配置如下：

<js-module name="SignaturePad" src="www/signaturePad.js">
      <clobbers target="SignaturePad"/>
 </js-module>
           

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

exports.showSignature = function(arg0, success, error) {
    exec(success, error, "signaturePad", "showSignature", [arg0]);
};
           

下面我們就開始書寫declare檔案了，在此之前我們看一些ionic2工程目錄，有一個typings

這個就是全局declare檔案的生命集合，這裡就能解釋為什麼我們使用ES6文法編譯不會報錯了。

我們在globals目錄下，建立一個cordova-plugin，以後我們的cordova plugin聲明都可以寫在這裡

• 目錄：

• index.d.ts:

interface SignaturePad {
    showSignature(option: SignaturePadOption, success: SignaturePadSuccessFunction, error: SignaturePadErrorFunction);
}

interface SignaturePadOption {
    width?: number;
    height?: number;
    minWidth?: number;
    maxWidth?: number;
    penColor?: string;
}

interface SignaturePadSuccessFunction {
    (result: SignaturePadSuccessResult): void;
}

interface SignaturePadSuccessResult {
    imageUrl: string;
}

interface SignaturePadErrorFunction {
    (any): void;
}

declare var SignaturePad: SignaturePad;
           

• 全局index.d.ts:

/// <reference path="globals/es6-shim/index.d.ts" />
/// <reference path="globals/cordova-plugin/signature-pad/index.d.ts" />
           

這個時候我們就可以正常的調用插件了

• signaturePad.ts：

/**
 * Created by Z.JM on //
 */


export class ZSSignaturePad {


    static openSignaturePad(signaturePadOption: SignaturePadOption = {
        width: ,
        height: ,
        minWidth: ,
        maxWidth: ,
        penColor: "#000000"
    }): Promise<any> {

        return new Promise<any>((resolve, reject)=> {
            document.addEventListener("deviceready", ()=> {

                try {
                    SignaturePad.showSignature(signaturePadOption, (res)=> {
                        resolve(res);
                    }, (err)=> {
                        reject(JSON.stringify(err));
                    });
                } catch (e) {
                    reject(JSON.stringify(e));
                }

            }, false)
        });

    }
}
           

其實在這裡還有一個hack的方式，我們沒有必要在全局declar裡來聲明，畢竟我們不是封裝類庫，完全可以把聲明檔案與插件封裝放在一起：

當然這個時候你需要把聲明依賴寫在ts檔案的頂部（必須是頂部）

如果不考慮規範性完全可以這麼寫：

declare var SignaturePad: any;
           

方式二、模仿ionic native

如果你一開始接觸ionic2，不會調用自定義插件，那麼聰明的你一定會有一個疑問，ionic

native是怎麼調用的?我們模仿不就行了，那肯定會看源碼或者git，https://github.com/driftyco/ionic-native。

說到這，大家估計就已經明白了，好了好了，大家都散了吧。