Ionic Native

在当前版本（3.x），官方使用Ionic Native来集成使用第三方的原生插件。截止当前，Ionic Native配备了超过130个移动原生SDK插件，其中包括较为常用的摄像头、扫码、定位、文件上传下载等等，配合这些插件足以构建一个功能强大的移动应用程序。

  在ionic1.x版本的时候，我们使用了ngCordova做为调用原生插件的第三方库，基于angular框架语法二次封装了本地设备接口模块，提供了70+个本地设备接口模块拓展，包括摄像头、定位、存储等等一系列原生功能，使其更容易构建、测试和部署移动应用程序。两者从数量来看，Ionic Native略胜一筹，再从另一个方面来看，native 3.0现在允许开发人员通过简单的覆盖机制来模拟和使用浏览器中的原生插件，从而可以轻松提供来自传感器的测试数据，或访问本机API。而这意味着大多数 Ionic应用程序现在完全可以在浏览器中构建，而无需部署到设备或模拟器中。当你进入ngCordova官网，会看到这么一句话 - 'New! Check out Ionic Native. It's like ngCordova but for ES6 and TypeScript.'。所以，请使用 Ionic Native 去构建我们的应用程序吧。

Ionic Native 特性

Promises and Observables：Ionic Native 默认为插件实现了Promises或Observables回调，为所有插件和本地事件变化监听提供了通用的接口。以官方定位插件为例。导入定位模块，构造器中生成实例，当设备加载完成，通过回调可以获取到当前的定位信息。再以一个观察者的身份去发起订阅，可以在定位发生变化时，收到该观察对象（位置信息）发出的通知，并做出响应。

import { Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

class MyComponentOrService {

    constructor(private platform: Platform, private geolocation: Geolocation) {

        platform.ready().then(() => {

            // get current position
            geolocation.getCurrentPosition().then(pos => {
                console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
            });

            const watch = geolocation.watchPosition().subscribe(pos => {
                console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
            });

          // to stop watching
          watch.unsubscribe();

        });
    }
}

Ionic Native 用法

1. 安装 Ionic Native 核心依赖库

   npm install @ionic-native/core --save

2. 安装插件对应的Ionic Native依赖包（ camera 插件为例）

   npm install @ionic-native/camera --save

3. 使用Cordova 或 Ionic CLI 安装插件

   ionic cordova plugin add cordova-plugin-camera

PS: 所有的包名都记录在插件的文档中，请遵循文档中的插件安装说明，因为部分插件需要额外的步骤才能正确安装使用。

使用 Ionic Native 自定义插件

  本文的重点之一，通过@ionic-native源码来生成我们自定义插件中定义的一系列属性和方法的描述文件，从而让我们的自定义插件能被项目正确导入并使用。
  在这里先了解下typescript的.d.ts文件，这是一种特殊的TypeScript文件，我们称为类型定义文件或描述文件，该文件描述了第三方库API的类型声明信息。当我们将自定义的第三方插件导入到项目中并调用接口时，因为某些全局变量或对象的方法没有被声明过，会导致编译器的类型检查失败。通俗来讲，该插件定义并暴露了一系列变量、接口或方法，而ts并不知道你暴露的成员是什么东西，你需要提供一份ts编译器能解析的描述文件。
  现在假设我们创建了一个项目(3.x版本)，项目需要微博授权登录和分享图文到微博等功能，我们在github找到了类似的weibo sdk插件，这可以省去我们开发插件的时间。但是在安装到项目中后发现，找不到插件提供的方法，无法调用。这时我们需要提供一份关于该插件的相关信息描述文件，目前较为常用的办法是通过@ionic-native的代码来生成插件的描述文件，下面给出相关代码和注解。

• 克隆ionic-native仓库

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

• 当前目录下使用gulp命令创建插件

npm install --global gulp
gulp plugin:create -n weibosdk

  此时可以在\ionic-native\src\@ionic-native\plugins目录下看到weibosdk文件夹，打开后可以看到该目录下生成了一个index.d.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-camera
    pluginRef: '', // 调用插件的变量，example：navigator.geolocation
    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
    }

}

  这里简单的说下上面代码的用法。首先通过@Plugin装饰器，我们将关于插件的信息添加到我们的类中（WeiboSDK），将其和自定义的插件关联起来。plugin是指插件的npm包名，或者说是插件的id（具体看插件的plugin.xml文件）；pluginRef是插件调用时使用的变量（具体看插件的plugin.xml文件中js-module的name属性），例如weibosdk的plugin.xml中定义的js-module的name为WeiboSDK；repo指向插件的github地址；install和installVariables组合使用，当执行安装命令时，附带变量，则在这两个参数中做出说明；platforms表示支持的平台。

完整的代码：

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; }

    @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; }

}

接下来怎么使用这个index.d.ts描述文件呢，我们需要利用ionic-native的build脚本来生成插件的依赖包

cd ionic-native
npm run build weibosdk

在此说明下，build后可带参数，参数为空的情况下会编译plugins文件下所有插件的index.d.ts文件，这里带上weibosdk则只编译weibosdk插件依赖包。

编译成功如下图所示：
  
且在项目下会生成dist文件夹，在该路径下找到对应的依赖包，如下图所示：

如何使用该依赖包，本地化的话最直接的办法是将其复制到某个项目的node_modules文件夹下，然后在项目中直接导入即可调用对应插件的属性或方法。如果多人协作开发的，则建议是将其发布到npm上，且该依赖包生成了package.json文件，我们修改下git和package.json的配置，正常发布即可。

本文更新于2018.03.05，已完结

甩个支付宝赚钱红包，原创不易，望不吝赐教