@alitajs/cordova-native

@alitajs/cordova-native

Usage no npm install needed!

<script type="module">
  import alitajsCordovaNative from 'https://cdn.skypack.dev/@alitajs/cordova-native';
</script>

README

@alitajs/cordova-native

由于这个包不常用，又和 native 冲突，因此将这个包改名为 @alitajs/cordova-native ，相应的配置和命令也修改为 cordovanative。

支持配置的插件

camera, device, dialogs, file, geolocation, inappbrowser, media, media-capture, keyboard, secure-storage, network, screen-orientation, statusbar, vibration, document-viewer, file-opener, fingerprint-aio, native-storage, qr-scanner, sqlite-storage,

用法

config/config.ts

export default {
  appType: 'cordova',
  cordovanative: ['file', 'device', 'camera', 'qr-scanner'],   // 数组里的名字只能用上面的插件名
};

在项目根目录运行

alita cordovanative

各插件用法

camera

相机组件，可用来拍照等

对应的 cordova 插件: cordova-plugin-camera

config.xml 配置

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>need camera access to take pictures</string>
</edit-config>

<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
    <string>need photo library access to get pictures from there</string>
</edit-config>

<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
    <string>need location access to find things nearby</string>
</edit-config>

<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
    <string>need photo library access to save pictures there</string>
</edit-config>

用法

import { Camera, CameraOptions } from '@ionic-native/camera';
const options: CameraOptions = {
  quality: 100,
  destinationType: Camera.DestinationType.FILE_URI,
  encodingType: Camera.EncodingType.JPEG,
  mediaType: Camera.MediaType.PICTURE,
};
Camera.getPicture(options).then(
  (imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    let base64Image = 'data:image/jpeg;base64,' + imageData;
  },
  (err) => {
    // Handle error
  },
);

device

用于获取设备信息，比如 platform, uuid, version 等

对应的 cordova 插件: cordova-plugin-device

用法

import { Device } from '@ionic-native/device';

...

console.log('Device UUID is: ' + Device.uuid);

dialogs

弹窗组件

对应的 cordova 插件: cordova-plugin-dialogs

用法

import { Dialogs } from '@ionic-native/dialogs';
Dialogs.alert('Hello world')
  .then(() => console.log('Dialog dismissed'))
  .catch((e) => console.log('Error displaying dialog', e));

file

文件组件，用于读写原生文件系统

对应的 cordova 插件: cordova-plugin-file

用法

import { File } from '@ionic-native/file';
File.checkDir(File.dataDirectory, 'mydir').then(_ => console.log('Directory exists')).catch(err =>
  console.log('Directory doesn't exist'));

secure-storage

调原生方法加密保存数据

对应的 cordova 插件: cordova-plugin-secure-storage

config.xml 配置

<platform name="ios">
    <preference name="KeychainAccessibility" value="WhenUnlocked"/>
</platform>

支持的配置:

AfterFirstUnlock
AfterFirstUnlockThisDeviceOnly
WhenUnlocked (default)
WhenUnlockedThisDeviceOnly
WhenPasscodeSetThisDeviceOnly (this option is available only on iOS8 and later)

用法

import {
  SecureStorage,
  SecureStorageObject,
} from '@ionic-native/secure-storage';

SecureStorage.create('my_store_name').then((storage: SecureStorageObject) => {
  storage.get('key').then(
    (data) => console.log(data),
    (error) => console.log(error),
  );

  storage.set('key', 'value').then(
    (data) => console.log(data),
    (error) => console.log(error),
  );

  storage.remove('key').then(
    (data) => console.log(data),
    (error) => console.log(error),
  );
});

geolocation

获取当前位置组件

对应的 cordova 插件: cordova-plugin-geolocation

  • ios
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
    <string>need location access to find things nearby</string>
</edit-config>

用法

import { Geolocation } from '@ionic-native/geolocation';

Geolocation.getCurrentPosition()
  .then((resp) => {
    // resp.coords.latitude
    // resp.coords.longitude
  })
  .catch((error) => {
    console.log('Error getting location', error);
  });

let watch = Geolocation.watchPosition();
watch.subscribe((data) => {
  // data can be a set of coordinates, or an error (if an error occurred).
  // data.coords.latitude
  // data.coords.longitude
});

inappbrowser

应用内浏览器组件

对应的 cordova 插件: cordova-plugin-inappbrowser

import { InAppBrowser } from '@ionic-native/in-app-browser';

const browser = InAppBrowser.create('https://ionicframework.com/');

browser.executeScript(...);

browser.insertCSS(...);
browser.on('loadstop').subscribe(event => {
   browser.insertCSS({ code: "body{color: red;" });
});

browser.close();

media

音频播放、录制组件

对应的 cordova 插件: cordova-plugin-media

用法

import { Media, MediaObject } from '@ionic-native/media';

// Create a Media instance.  Expects path to file or url as argument
// We can optionally pass a second argument to track the status of the media

const file: MediaObject = Media.create('file.mp3');

// to listen to plugin events:

file.onStatusUpdate.subscribe((status) => console.log(status)); // fires when file status changes

file.onSuccess.subscribe(() => console.log('Action is successful'));

file.onError.subscribe((error) => console.log('Error!', error));

// play the file
file.play();

// pause the file
file.pause();

// get current playback position
file.getCurrentPosition().then((position) => {
  console.log(position);
});

// get file duration
let duration = file.getDuration();
console.log(duration);

// skip to 10 seconds (expects int value in ms)
file.seekTo(10000);

// stop playing the file
file.stop();

// release the native audio resource
// Platform Quirks:
// iOS simply create a new instance and the old one will be overwritten
// Android you must call release() to destroy instances of media when you are done
file.release();

// Recording to a file
const file: MediaObject = Media.create('path/to/file.mp3');

file.startRecord();

file.stopRecord();

media-capture

照片、音频、视频录制组件

对应的 cordova 插件: cordova-plugin-media-capture

  • ios 配置
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge">
    <string>need microphone access to record sounds</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
    <string>need to photo library access to get pictures from there</string>
</edit-config>

用法

import {
  MediaCapture,
  MediaFile,
  CaptureError,
  CaptureImageOptions,
} from '@ionic-native/media-capture';

let options: CaptureImageOptions = { limit: 3 };
MediaCapture.captureImage(options).then(
  (data: MediaFile[]) => console.log(data),
  (err: CaptureError) => console.error(err),
);

keyboard

键盘插件，支持键盘弹起或隐藏，需要安装 ionic webview

对应的 cordova 插件: cordova-plugin-ionic-keyboard

用法

import { Keyboard } from '@ionic-native/keyboard';

Keyboard.show();

Keyboard.hide();

network

网络连接监听插件，可以获取网络连接状态，连接变化

对应的 cordova 插件: cordova-plugin-network-information

用法

import { Network } from '@ionic-native/network';

// watch network for a disconnection
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
});

// stop disconnect watch
disconnectSubscription.unsubscribe();

// watch network for a connection
let connectSubscription = Network.onConnect().subscribe(() => {
  console.log('network connected!');
  // We just got a connection but we need to wait briefly
  // before we determine the connection type. Might need to wait.
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (Network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

// stop connect watch
connectSubscription.unsubscribe();

screen-orientation

控制屏幕旋转

对应的 cordova 插件: cordova-plugin-screen-orientation

用法

import { ScreenOrientation } from '@ionic-native/screen-orientation';

// get current
console.log(ScreenOrientation.type); // logs the current orientation, example: 'landscape'

// set to landscape
ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE);

// allow user rotate
ScreenOrientation.unlock();

// detect orientation changes
ScreenOrientation.onChange().subscribe(() => {
  console.log('Orientation Changed');
});

statusbar

状态栏组件

对应的 cordova 插件: cordova-plugin-statusbar

import { StatusBar } from '@ionic-native/status-bar';

// let status bar overlay webview
StatusBar.overlaysWebView(true);

// set status bar to white
StatusBar.backgroundColorByHexString('#ffffff');

vibration

震动控制

对应的 cordova 插件: cordova-plugin-vibration

用法

import { Vibration } from '@ionic-native/vibration';

// Vibrate the device for a second
// Duration is ignored on iOS.
Vibration.vibrate(1000);

// Vibrate 2 seconds
// Pause for 1 second
// Vibrate for 2 seconds
// Patterns work on Android and Windows only
Vibration.vibrate([2000, 1000, 2000]);

// Stop any current vibrations immediately
// Works on Android and Windows only
Vibration.vibrate(0);

file-opener

使用系统默认软件打开文件

对应的 cordova 插件: cordova-plugin-file-opener2

用法

import { FileOpener } from '@ionic-native/file-opener';

FileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch((e) => console.log('Error opening file', e));

FileOpener.showOpenWithDialog('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch((e) => console.log('Error opening file', e));

document-viewer

pdf 查看组件

对应的 cordova 插件: cordova-plugin-document-viewer

用法

import {
  DocumentViewer,
  DocumentViewerOptions,
} from '@ionic-native/document-viewer';

const options: DocumentViewerOptions = {
  title: 'My PDF',
};

DocumentViewer.viewDocument('assets/myFile.pdf', 'application/pdf', options);

fingerprint-aio

生物识别组件

对应的 cordova 插件: cordova-plugin-fingerprint-aio

配置

  • iOS - 需要 XCode 9.2 及以上版本，Please set <preference name="UseSwiftLanguageVersion" value="4.0" />，在 config.xml 里设置 <preference name="UseSwiftLanguageVersion" value="4.0" />
  • 如果使用 Face ID，在 info.plist 里添加 NSFaceIDUsageDescription

用法

import { FingerprintAIO } from '@ionic-native/fingerprint-aio';

FingerprintAIO.show({
    clientId: 'Fingerprint-Demo', //Android: Used for encryption. iOS: used for dialogue if no `localizedReason` is given.
    clientSecret: 'o7aoOMYUbyxaD23oFAnJ' //Necessary for Android encrpytion of keys. Use random secret key.
    disableBackup:true,  //Only for Android(optional)
    localizedFallbackTitle: 'Use Pin', //Only for iOS
    localizedReason: 'Please authenticate' //Only for iOS
})
.then((result: any) => console.log(result))
.catch((error: any) => console.log(error));

native-storage

使用原生存储，Sharedpreferences in Android and NSUserDefaults in iOS.

对应的 cordova 插件: cordova-plugin-nativestorage

用法

import { NativeStorage } from '@ionic-native/native-storage';

NativeStorage.setItem('myitem', {
  property: 'value',
  anotherProperty: 'anotherValue',
}).then(
  () => console.log('Stored item!'),
  (error) => console.error('Error storing item', error),
);

NativeStorage.getItem('myitem').then(
  (data) => console.log(data),
  (error) => console.error(error),
);

qr-scanner

二维码识别组件

对应的 cordova 插件: cordova-plugin-qrscanner

用法

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

// Optionally request the permission early
QRScanner.prepare()
  .then((status: QRScannerStatus) => {
    if (status.authorized) {
      // camera permission was granted

      // start scanning
      let scanSub = QRScanner.scan().subscribe((text: string) => {
        console.log('Scanned something', text);

        QRScanner.hide(); // hide camera preview
        scanSub.unsubscribe(); // stop scanning
      });
    } else if (status.denied) {
      // camera permission was permanently denied
      // you must use QRScanner.openSettings() method to guide the user to the settings page
      // then they can grant the permission from there
    } else {
      // permission was denied, but not permanently. You can ask for permission again at a later time.
    }
  })
  .catch((e: any) => console.log('Error is', e));

sqlite-storage

sqlite 数据库插件

对应的 cordova 插件: cordova-sqlite-storage

用法

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

SQLite.create({
  name: 'data.db',
  location: 'default',
})
  .then((db: SQLiteObject) => {
    db.executeSql('create table danceMoves(name VARCHAR(32))', [])
      .then(() => console.log('Executed SQL'))
      .catch((e) => console.log(e));
  })
  .catch((e) => console.log(e));