ionic2 調用自定義插件之研究

    cordova機制我在此就不提了,咱們使用Typescript調用cordova plugin就如同調用第三方庫是一個道理,那麼這裏就少不了書寫declare文件,下面我就把幾種封裝調用的幾種方式介紹一下。javascript

    方式一,編寫全局declare文件

    如今咱們有一個「殘峯(個人同事)」封裝好的簽名版插件,cordova plugin暴露的JS配置以下:java

<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工程目錄,有一個typingsgit

    這個及時全局declare文件的生命集合,這裏就能解釋爲何咱們使用ES6語法編譯不會報錯了。es6

    咱們在globals目錄下,創建一個cordova-plugin,之後咱們的cordova plugin聲明均可以寫在這裏github

目錄:ionic

index.d.ts:ui

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.tsspa

/// <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 2016/9/5.
 */


export class ZSSignaturePad {


    static openSignaturePad(signaturePadOption: SignaturePadOption = {
        width: 1366,
        height: 768,
        minWidth: 1,
        maxWidth: 9,
        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裏來聲明,畢竟咱們不是封裝類庫,徹底能夠把聲明文件與插件封裝放在一塊兒:code

固然這個時候你須要把聲明依賴寫在ts文件的頂部(必須是頂部)

/// <reference path="./index.d.ts"/>

若是不考慮規範性徹底能夠這麼寫:

declare var SignaturePad: any;

  方式2、模仿ionic native

    若是你一開始接觸ionic2,不會調用自定義插件,那麼聰明的你必定會有一個疑問,ionic native是怎麼調用的?咱們模仿不就好了,那確定會看源碼或者git,https://github.com/driftyco/ionic-native

   

    說道這,你們估計就已經明白了,好了好了,你們都散了吧。

相關文章
相關標籤/搜索