Eric Foster d5378345de connection between front end and database | 6 年之前 | |
---|---|---|
.. | ||
README.md | 6 年之前 | |
bootstrap.d.ts | 6 年之前 | |
bootstrap.js | 6 年之前 | |
bootstrap.js.map | 6 年之前 | |
bootstrap.metadata.json | 6 年之前 | |
decorators.d.ts | 6 年之前 | |
decorators.js | 6 年之前 | |
decorators.js.map | 6 年之前 | |
decorators.metadata.json | 6 年之前 | |
index.d.ts | 6 年之前 | |
index.js | 6 年之前 | |
index.js.map | 6 年之前 | |
index.metadata.json | 6 年之前 | |
ionic-native-plugin.d.ts | 6 年之前 | |
ionic-native-plugin.js | 6 年之前 | |
ionic-native-plugin.js.map | 6 年之前 | |
ionic-native-plugin.metadata.json | 6 年之前 | |
package.json | 6 年之前 | |
plugin.d.ts | 6 年之前 | |
plugin.js | 6 年之前 | |
plugin.js.map | 6 年之前 | |
plugin.metadata.json | 6 年之前 | |
util.d.ts | 6 年之前 | |
util.js | 6 年之前 | |
util.js.map | 6 年之前 | |
util.metadata.json | 6 年之前 |
Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic mobile app easy.
Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.
Run following command to install Ionic Native in your project.
npm install @ionic-native/core --save
You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.
For the full Ionic Native documentation, please visit https://ionicframework.com/docs/native/.
To use a plugin, import and add the plugin provider to your @NgModule
, and then inject it where you wish to use it.
// app.module.ts
import { Camera } from '@ionic-native/camera';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';
@Component({ ... })
export class MyComponent {
constructor(private geolocation: Geolocation, private platform: Platform) {
this.platform.ready().then(() => {
// get position
this.geolocation.getCurrentPosition().then(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// watch position
const watch = geolocation.watchPosition().subscribe(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// to stop watching
watch.unsubscribe();
});
}
}
Ionic Native 3.x makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in ionic serve
.
To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the Camera
plugin to return a stock image while in development:
First import the Camera
class in your src/app/app.module.ts
file:
import { Camera } from '@ionic-native/camera';
Then create a new class that extends the Camera
class with a mock implementation:
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve("BASE_64_ENCODED_DATA_GOES_HERE");
})
}
}
Finally, override the previous Camera
class in your providers
for this module:
providers: [
{ provide: Camera, useClass: CameraMock }
]
Here's the full example:
import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { MyApp } from './app.component';
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve('BASE_64_ENCODED_DATA_GOES_HERE');
});
}
}
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
{ provide: Camera, useClass: CameraMock }
]
})
export class AppModule {}
Spent way too long diagnosing an issue only to realize a plugin wasn't firing or installed? Ionic Native lets you know what the issue is and how you can resolve it.
Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. :heart:
For Ionic v1 (AngularJS, Angular 1.x) support, please use version 2 of Ionic Native. See the 2.x README for usage information.
Ibby Hadeed - @ihadeed
Daniel Sogl - @sogldaniel
Tim Lancina - @timlancina
Mike Hartington - @mhartington
Max Lynch - @maxlynch
Rob Wormald - @robwormald