前言
WebApp的开发想和系统底层硬件打交道怎么能少了Cordova插件的支持呢?本节我们讲一下 Ionic2里面Cordova插件的使用。
Ionic2的Cordova插件分为两种,1、官方包装过的,2、第三方的。
使用方式有很大的不同。
官方Cordova插件使用方式
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);
}
第三方Cordova插件使用方式
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);
});
}
}
}