伟大的 Cordova 插件
真棒 Cordova 插件 是一个 Cordova 插件的包装套件, 它使您需要的本地功能添加到您的 无线 移动应用程序简单.
真棒 Cordova 插件将插件的回调包在一个“承诺”或“可观察”中,为所有插件提供一个共同的界面,并方便使用带有角变化检测的插件.
要了解更多Ionic原住民 改名为 Super Cordova 插件的原因,请阅读官方网站 音响博客 由Max Lyncht撰写.
电容支持
除了Cordova之外,Super Cordova插件也与 电容Ionic官方的本土运行时间 下面的基本用途。 完整的细节, 见电容文档。 。 。 .
安装
按照命令运行, 在您的工程中安装 Super Cordova 插件 .
npm install @awesome-cordova-plugins/core --save
您还需要为您要添加的每个插件安装 Cardova 插件包 。 请看 真棒 Cordova 插件文档 对于如何添加和使用插件的完整指令.
文档
请访问所有 Cordova 插件 https://ionicframework.com/docs/native/ 互联网档案馆的存檔,存档日期2013-12-21。 。 。 .
基本用途
Ionic/Angular apps (单机)
Angular v14+默认使用独立的组件. 要使用插件, 请在您的应用程序拖带中注册为提供者, 并使用 Angular 输入 inject() 函数.
确保从 /ngx 以下示例所示目录:
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [Camera, Geolocation],
});
import { Component, OnInit } from '@angular/core';
import { inject } from '@angular/core';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-my-component',
standalone: true,
template: `<p>My Component</p>`,
})
export class MyComponent implements OnInit {
private geolocation = inject(Geolocation);
private platform = inject(Platform);
async ngOnInit() {
await this.platform.ready();
// get position
const pos = await this.geolocation.getCurrentPosition();
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
// watch position
const watch = this.geolocation.watchPosition().subscribe((pos) => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
});
// to stop watching
watch.unsubscribe();
}
}
Ionic/反应应用程序
React App必须使用Capacitor来构建本土移动应用. 然而,Super Cordova插件(并因此被Cordova插件)仍然可以被使用.
# 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 { 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+/TypeScript (不含Angular) (中文(简体) )
这些模块也可以不使用Angular,直接调用静态方法:
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));
});
模拟和浏览器开发(仅Ionic/Angular apps)
惊人的 Cordova 插件可以模拟插件, 并在浏览器或浏览器中开发几乎完整的应用程序 ionic serve。 。 。 .
要做到这一点,您需要提供您想要使用的插件的模拟执行 。 这里有一个嘲弄 Camera 开发时返回库存图像的插件 :
首先创建一个模拟类,扩展 Camera 类 :
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve('BASE_64_ENCODED_DATA_GOES_HERE');
});
}
}
然后覆盖 Camera 应用程序拖网中的提供者 :
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { AppComponent } from './app/app.component';
class CameraMock extends Camera {
getPicture(options) {
return Promise.resolve('BASE_64_ENCODED_DATA_GOES_HERE');
}
}
bootstrapApplication(AppComponent, {
providers: [{ provide: Camera, useClass: CameraMock }],
});
运行时间诊断
花了太长的时间诊断一个问题 只意识到一个插件没有发射或安装? 伟大的克多瓦 插件可以让你知道问题所在,以及如何解决问题.
插件丢失吗 ?
告诉我们或者提交公关! 看看这个 开发者指南 更多关于如何贡献。 :心脏 :
贷项
伊比・哈迪德.. {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你应该知道
丹尼尔・索格 链接
蒂姆・兰西娜 @timlancina (英语)
迈克・哈廷顿 @mhartington (英语)
马克思·林奇 - @ maxlynch (英语)
罗布·沃默德 @ robdrobtromard (英语)