在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):danielsogl/awesome-cordova-plugins开源软件地址(OpenSource Url):https://github.com/danielsogl/awesome-cordova-plugins开源编程语言(OpenSource Language):TypeScript 98.6%开源软件介绍(OpenSource Introduction):Awesome Cordova PluginsAwesome Cordova Plugins is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic mobile app easy. Awesome Cordova Plugins 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. To learn more about the reasons why Ionic Native was renamed to Awesome Cordova Plugins, read the official Ionic blog post by Max Lyncht. Capacitor SupportIn addition to Cordova, Awesome Cordova Plugins also works with Capacitor, Ionic's official native runtime. Basic usage below. For complete details, see the Capacitor documentation. InstallationRun following command to install Awesome Cordova Plugins in your project. npm install @awesome-cordova-plugins/core --save You also need to install the Awesome Cordova Plugins package for each plugin you want to add. Please see the Awesome Cordova Plugins documentation for complete instructions on how to add and use the plugins. DocumentationFor the full Awesome Cordova Plugins documentation, please visit https://ionicframework.com/docs/native/. Basic UsageIonic/Angular appsTo use a plugin, import and add the plugin provider to your // app.module.ts
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { } import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
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/React appsReact apps must use Capacitor to build native mobile apps. However, Awesome Cordova Plugins (and therefore, Cordova plugins) can still be used. # Install Core library (once per project)
npm install @awesome-cordova-plugins/core
# Install Awesome Cordova Plugins TypeScript wrapper
npm install @awesome-cordova-plugins/barcode-scanner
# Install Cordova plugin
npm install phonegap-plugin-barcodescanner
# Update native platform project(s) to include newly added plugin
ionic cap sync Import the plugin object then use its static methods: import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner';
const Tab1: React.FC = () => {
const openScanner = async () => {
const data = await BarcodeScanner.scan();
console.log(`Barcode data: ${data.text}`);
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton onClick={openScanner}>Scan barcode</IonButton>
</IonContent>
</IonPage>
);
}; ES2015+/TypeScriptThese modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods. import { Camera } from '@awesome-cordova-plugins/camera';
document.addEventListener('deviceready', () => {
Camera.getPicture()
.then((data) => console.log('Took a picture!', data))
.catch((e) => console.log('Error occurred while taking a picture', e));
}); AngularJSAwesome Cordova Plugins generates an AngularJS module in runtime and prepares a service for each plugin. To use the plugins in your AngularJS app:
angular.module('myApp', ['ionic.native']).controller('MyPageController', function ($cordovaCamera) {
$cordovaCamera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
}); Vanilla JSTo use Awesome Cordova Plugins in any other setup:
document.addEventListener('deviceready', function () {
IonicNative.Camera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
}); Mocking and Browser Development (Ionic/Angular apps only)Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the First import the import { Camera } from '@awesome-cordova-plugins/camera/ngx'; Then create a new class that extends the class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve('BASE_64_ENCODED_DATA_GOES_HERE');
});
}
} Finally, override the previous providers: [{ provide: Camera, useClass: CameraMock }]; Here's the full example: import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
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 {} Runtime DiagnosticsSpent way too long diagnosing an issue only to realize a plugin wasn't firing or installed? Awesome Cordova Plugins lets you know what the issue is and how you can resolve it. Plugin Missing?Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. CreditsIbby Hadeed - @ihadeed Daniel Sogl - @sogldaniel Tim Lancina - @timlancina Mike Hartington - @mhartington Max Lynch - @maxlynch Rob Wormald - @robwormald |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论