关于使用gulp来生成cordova的@ionic-native自定义插件

1.这里我只讲在使用cordova插件时，下载的插件只有plugin，没有@ioni-native下的sdk，我的方法是使用ionic-native自定义插件，下载的cordova插件配合@ionic-native插件使用。

2.举个列子，如qqsdk中，我们可以发现，他里面有两个重要的东西，一个是plugin插件，也就是cordova-plugin-qqsdk，还有一个就是在node_model中的@ionic native文件夹下也有一个qqsdk，然而像微信，微博都是只有cordova-plugin-wechat和cordova-plugin-weibosdk插件，在node_model下是没有相应的sdk，所以这就很尴尬了，我们不能再项目ts文件中直接import使用了，所以才有了使用ionic-native来自定义一个sdk插件，去辅助cordova-plugin-xx插件使用。

3.然后就是说gulp这个工具了，这个工具的用法就不多说了，有兴趣的朋友自己去百度看看吧，很强大的一个工具哦。

然后就要开始了。。。。

4.首先克隆一份ionic-native，我们将要使用这个自定义我们的插件 ,最后是在项目中执行，不然你可能会找不到你下载的文件在哪里

git clone https://github.com/ionic-team/ionic-native.git

cd ionic-native //这个文件夹就是我们克隆后的文件夹，我们会在这个文件夹里安装gulp，然后使用gulp自定义插件

npm install --global gulp

5.下载好gulp和本地gulp，上面这一句也可以，或者下面这两句

npm install gulp -g

npm install gulp --save-dev //这个是必须要下载的，应该这个是我们本地需要调用到的一些东西

将gulp常用的插件都下载吧，反正不知道有啥用，都下也没什么

6.这里的gulp环境下好了之后可能会出来报错，比如gulp找不到，或者gulpfile找不到什么的，gulp找不到是因为执行

npm install gulp --save-dev，本地文件找不到了，

gulpfile找不到是因为，我们在ionic-native文件夹下下载了gulp，你可以看到那里面有gulp这个文件夹，以及其他的插件，但是你会发现，gulp

文件夹下少了一个很重要的东西，那就是gulpfile.js，这个文件是gulp的核心，我们要执行的gulp语法就是写在这个文件里，没有的话，那我们就

自己创建一个咯，

7.创建gulpfile.js在gulp文件夹下，然后在这个文件里写下面这些代码：

gulp.task('plugin:create',()=>{
    if(flags.n && flags.n !== ''){
        const src=flags.m ? './scripts/templates/wrap-min.tmpl':'./scripts/templates/wrap.tmpl',

        pluginName=flags.n, spaced=pluginName.replace(/(?!^)([A-Z])/g,'$1'),kebabCase=_.kebabCase(pluginName);

        return gulp.src(src).pipe(replace(' {{ PluginName }} ',pluginName))

            .pipe(replace(' {{ Plugin_Name }} ',spaced))

            .pipe(replace(' {{ pluginName }} ',_.lowerFirst(pluginName)))

            .pipe(replace(' {{ plugin-Name }} ',kebabCase))

            .pipe(rename('index.ts')).pipe(gulp.dest('./src/@ionic-native/plugins/'+kebabCase));

   } else{ console.log("Usage is :gulp plugin:create -n PluginName")  } 
})

8.上面就是主要的生成代码了，

gulp plugin:create -n WeiboSDK

下面我们就可以在ionic-native\src\@ionic-native\plugins 下有了这个 WeiboSDK 文件夹，也可以是Wechat，这里用WeiboSDK演示。

打开后可以看到该目录下生成了一个index.d.ts描述文件，也有可能是index.ts文件，

里面主要内容是：

import { Injectable } from '@angular/core';

import { Plugin, Cordova, CordovaProperty, CordovaInstance, InstanceProperty, IonicNativePlugin }

from '@ionic-native/core';

import { Observable } from 'rxjs/Observable';

@Plugin(

    { pluginName: 'WeiboSDK', // 插件名称

     plugin: '', // 插件对应的npm包名，example：cordova-plugin-weibosdk

     pluginRef: '', // 调用插件的变量，example：WeiboSDK

        repo: '', // 插件的github仓库地址

        install: '', // 插件安装命令，部分插件安装时需传递参数，可选

        installVariables: [], // 插件安装时传递的变量名，可选

        platforms: [] // 支持的平台，数组类型, example: ['Android', 'iOS']})

@Injectable()

export class WeiboSDK extends IonicNativePlugin {

// 声明的变量或方法 // ------------------

@Cordova()

functionName(arg1: string, arg2: number): Promise<any> { return;

// We add return; here to avoid any IDE / Compiler errors

}}

9.上面这些代码就是我们生成出来的，修改成下面这样

import { Injectable } from '@angular/core';
import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';

@Plugin({
    pluginName: 'WeiboSDK',
    plugin: 'cordova-plugin-weibosdk',
    pluginRef: 'WeiboSDK',
    repo: 'https://github.com/iVanPan/cordova_weibo',
    install: 'ionic cordova plugin add cordova-plugin-weibosdk --variable WEIBO_APP_ID=YOUR_WEIBO_APPID',
    installVariables: ['WEIBO_APP_ID'],
    platforms: ['Android', 'iOS'],
})

@Injectable()
export class WeiboSDK extends IonicNativePlugin {

    @Cordova()

    checkClientInstalled(): Promise<any> { return; }

    //这里是返回的void，如果有返回的话改成

    //checkClientInstalled(params:any): Promise<any>;即可，可以参照qqsdk

    @Cordova()

    ssoLogin(): Promise<any> { return; }

    @Cordova()
    logout(): Promise<any> { return; }

    @Cordova()
    shareToWeibo(params: any): Promise<any> { return; }

    @Cordova()
    shareImageToWeibo(params: any): Promise<any> {return; }

    @Cordova()
    shareTextToWeibo(params: any): Promise<any> { return; }

}

10.最后在ionic-native文件夹中执行npm run build WeiboSDK即可，然后就会生成dist文件夹，将里面的WeiboSDK文件夹复制到我们的

项目node_module下，然后在ts和app.module中都import一下，就可以使用了，使用方法就是WeiboSDK.上面那些方法，

11.注意，idea等编辑器会将这种sdk在编译的时候删除，所以你需要在package.json，package-lock.json主动修改配置，在

package.json中配置一个

"@ionic-native/qqsdk": "^4.7.0",这样的就行了，版本号在生成的dist文件夹下的weibosdk

也有对应的，也可以随便填

然后在package-lock.json添加

"@ionic-native/qqsdk": {
  "version": "4.7.0",
  "resolved": "https://registry.npmjs.org/@ionic-native/qqsdk/-/qqsdk-4.7.0.tgz",
  "integrity": "sha512-jnC75CnXTw6yau7QMpxs0lJus8EN3h2m148860mQIHzW/kuwXT/niMPz/9yFyLZ1c/QDtkspmPuM2v7+hYJPng=="
},这样的就行，

version等可以都为空

12.这样你就可以import开始使用这个自定义的sdk了

    13.若是你不知道要自定义的插件有哪些方法，去他cordova-plugin-xxx下去看源码，有一个继承了ionicplugin的类，他下面的方法复制过来就行了