Ionic2官方提供了豐富的native cordova插件，比如：Camera、Device等等，使用方式也很簡單：
1、添加插件支持：ionic plugin add cordova-plugin-device;
2、在頁面ts文件中聲明： import { Device } from 'ionic-native';
3、在相關方法中調用：
getDeviceInfo(){
console.log('Device UUID is: ' + Device.uuid);
}
Ionic2native組件雖然豐富，但是實際開發過程中，我們總是會遇到使用非官方支持cordova組件的情況，比如：微信支付、支付寶等。
以一個獲取本機IP地址的cordova插件為例，簡單講解一下非官方支持的cordova插件的用法：
1、添加插件：ionic plugin add cordova-plugin-networkinterface；
2、打開插件配置文件的my-iconic2-project\plugins\cordova-plugin-networkinterface\config.xml:
.....
<js-module src="www/networkinterface.js" name="networkinterface">
<clobbers target="window.networkinterface" />
</js-module>
......
可以看到該插件的target為window.networkinterface，所以，在app運行期該插件對象應該聲明並綁定在window對象上。那么，我們使用此類插件的方式應該為：
index.ts:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
declare var networkinterface: any;
@Component({
selector: 'page-index',
templateUrl: 'index.html'
})
export class IndexPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad IndexPage');
}
getIPAddress(){
if('undefined' != typeof networkinterface){
networkinterface.getIPAddress(function(ip){
alert(ip);
});
}
}
}
不過我還看到stackoverflow有一種實現方式：
declare var cordova: any;
....
getIPAddress(){
if('undefined' != typeof cordova){
cordova.plugins.networkinterface.getIPAddress(function(ip){
alert(ip);
});
}
}
我認為這種方式，使用config.xml為如下形式的cordova插件：
.....
<js-module src="www/networkinterface.js" name="networkinterface">
<clobbers target="cordova.plugins.networkinterface" />
</js-module>
......
不過由於時間原因，我並沒有去驗證。
另外： 測試要在模擬器或者手機環境。