ionic 调用硬件设备

Ionic 调用硬件的能力。
   Ionic 调用原生 api 的能力是基于 cordova 的 ,cordova 是 Adobe 公司的一个开源的框架, 诞生于2008年,
   可以让我们用javascript调用手机原生的几乎所有的api,比如:摄像头、 麦克风等、重力感应、加速器、声音、震动、
   网络、视频、音频、地理定位等,原生能实现 的所有功能。


Ionic 调用 Device 设备 Api 获取手机的设备信息。
  https://wenku.baidu.com/view/91a10d55ba68a98271fe910ef12d2af90242a8ec
  1. 找到对应的Api: https://ionicframework.com/docs/native/device/
  2. 安装相关的设备插件
     ionic cordova plugin add cordova-plugin-device
     npm install --save @ionic-native/device
  3. 在app.module.ts中引入注册相应模块
     import { Device } from '@ionic-native/device';
     providers: [
         StatusBar,
         SplashScreen,
         Device,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]

  4,在用到的页面引入看文档使用
    ionic cordova plugin add cordova-plugin-device
    npm install --save @ionic-native/device


    import { Device } from '@ionic-native/device';
    constructor(private device: Device) { }
    ...
    console.log('Device UUID is: ' + this.device.uuid);


 Ionic 调用照相机拍照功能
   1、找到对应的 Api: https://ionicframework.com/docs/native/camera/
   2、安装相关的插件
      ionic cordova plugin add cordova-plugin-camera
      npm install --save @ionic-native/camera
   3、在 app.module.ts 中引入注册相应模块
      import { Camera } from '@ionic-native/camera';
      ...
      @NgModule({ ...
        providers: [ ...
         Camera
        ... ]
        ...
       })
      export class AppModule { }
   4、在用到的页面引入看文档使用
     import { Camera, CameraOptions } from '@ionic-native/camera';

     constructor(private camera: Camera) { }
       ...
      const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
       }

      this.camera.getPicture(options).then((imageData) => {
       // imageData is either a base64 encoded string or a file URI // If it's base64:
       let base64Image = 'data:image/jpeg;base64,' + imageData;
       }, (err) => {
      });



Ionic ZBar 扫描二维码 条形码插件的使用
   https://wenku.baidu.com/view/872cd948876fb84ae45c3b3567ec102de2bddfe8
   1. 下载安装插件
       ionic cordova plugin add cordova-plugin-cszbar
       npm install --save @ionic-native/zbar
   2. app.module.ts 引入依赖注入
       import { ZBar } from '@ionic-native/zbar';
       providers: [
           Camera,
           StatusBar,
           SplashScreen,
           ZBar,
          {provide: ErrorHandler, useClass: IonicErrorHandler}
       ]
   3. 用到的地方引入,注入使用,注意:如果返回的是对象,用JSON.stringify转换后打印
      import { ZBar, ZBarOptions } from '@ionic-native/zbar';
      doScanner(){
        let options: ZBarOptions = {
        text_title: "扫码", // Android only
        text_instructions: "请把相机对准二维码", // Android only camera: "back", // defaults to "back"
         flash: "auto", // defaults to "auto". See Quirks drawSight: true
       };
       this.zbar.scan(options)
        .then(result => {
            alert(JSON.stringify(result)); // Scanned code
        })
        .catch(error => {
           console.log(error); // Error message
        });
      }



Ionic图片上传(使用cordova-plugin-file-transfer 实现 图片上传)
   1. 下载安装插件
     ionic cordova plugin add cordova-plugin-file
     npm install --save @ionic-native/file
     ionic cordova plugin add cordova-plugin-file-transfer
     npm install --save @ionic-native/file-transfer
     或者通过直接安装
      ionic cordova plugin add cordova-plugin-file-transfer
      npm install --save @ionic-native/file-transfer
   2. app.module.ts 引入依赖注入
      import { File } from '@ionic-native/file';
      import { FileTransfer} from '@ionic-native/file-transfer';

      providers: [
         StatusBar,
         SplashScreen,
         File,
         FileTransfer,
         Device,
         Camera,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
   3. 用到的地方引入 实例化
      import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
      import { File } from '@ionic-native/file';

      constructor(public navCtrl: NavController,private device: Device, private camera: Camera,private transfer: FileTransfer, private file: File)
      {

      }
   4,拍照上传图片功能
      doCameraUpload(){
        const options: CameraOptions = {
          quality: 100, //图片质量
          destinationType: this.camera.DestinationType.FILE_URI, /*返回的类型*/
          encodingType: this.camera.EncodingType.JPEG, sourceType:this.camera.PictureSourceType.CAMERA, // mediaType: this.camera.MediaType.PICTURE, allowEdit:true,
          targetWidth:300, /*宽度高度要设置*/
          targetHeight:300
        }
        this.camera.getPicture(options).then((imageData) => { // 返回拍照的地址
          this.doUpload(imageData); }, (err) => {
          // Handle error
        });
      }
      doUpload(src){
        const fileTransfer: FileTransferObject = this.transfer.create();
        let options: FileUploadOptions = { fileKey: 'file',
          fileName: 'name.jpg', mimeType:'image/jpeg', httpMethod:"POST",
          params:{
            username : "张三", age : "20", height : "190"
          } /*附带的一些信息*/
          // headers: {}
        }
        // error
        alert('err');
        alert(JSON.stringify(err)); })
      }

要在 Ionic React 中调用原生指纹功能,可以使用 Capacitor 插件,该插件提供了访问设备本地功能的 API。 以下是一个示例,展示了如何使用 Capacitor 插件在 Ionic React 中调用原生指纹功能: 首先,需要安装 Capacitor 插件: ``` npm install @capacitor/core @capacitor/fingerprint ``` 然后,在 `src/index.tsx` 文件中初始化 Capacitor: ```javascript import { Capacitor } from '@capacitor/core'; if (Capacitor.isPluginAvailable('Fingerprint')) { // 插件可用 } else { // 插件不可用 } ``` 接下来,在需要调用指纹功能的组件中,使用 Capacitor 插件的 `Fingerprint` API: ```javascript import { Plugins } from '@capacitor/core'; import React, { useState } from 'react'; const { Fingerprint } = Plugins; function App() { const [message, setMessage] = useState(''); async function authenticate() { try { const result = await Fingerprint.authenticate(); if (result.success) { setMessage('Authentication successful'); } else { setMessage('Authentication failed'); } } catch (error) { console.error(error); setMessage('Authentication failed'); } } return ( <div> <button onClick={authenticate}>Authenticate</button> <p>{message}</p> </div> ); } export default App; ``` 在这个示例中,我们使用 Capacitor 的 Fingerprint API 来调用原生指纹功能。在 authenticate 方法中,我们调用 Fingerprint.authenticate 方法,并根据返回的结果更新 message 状态。 请注意,使用 Capacitor 插件需要进行一些配置,如在 `android/app/src/main/AndroidManifest.xml` 文件中添加权限声明等。具体细节可以参考 Capacitor 的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值