如何使用Ionic 3

Question

我似乎无法绕过这些警告＆amp;使用Ionic DevApp在Pixel 2上运行时出错：

警告和错误：

[09:54:00]  lint finished in 2.37 s
[09:54:24]  console.log: deviceready has not fired after 5 seconds.
[09:54:24]  console.log: Channel not fired: onDOMContentLoaded
[09:54:24]  console.log: Channel not fired: onFileSystemPathsReady
[09:54:28]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the productionmode.
[09:54:33]  console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an
            inconsistent state. Try removing plugins from plugins/ and reinstalling them.
[09:54:33]  console.log: Start Recording
[09:54:33]  console.warn: Native: tried calling MediaCapture.captureImage, 
            but the MediaCapture plugin is not installed.
[09:54:33]  console.warn: Install the MediaCapture 
            plugin: 'ionic cordova plugin add cordova-plugin-media-capture'
[09:54:33]  console.error: plugin_not_installed

重现步骤：

安装Ionic

npm install -g cordova ionic

启动App并执行以下操作：

1. $ ionic start

2. 项目名称：mediacapture

3. 选择＆＃39;空白＆＃39;离子角项目

4. ＆＃39; Y＆＃39; - 将您的新应用与Cordova集成......

5. ＆＃39; Y＆＃39; - 安装免费的Pro SDK ......

6. cd ./mediacapture

7. 安装Cordova和Ionic Native插件：

8. $ npm install @ ionic-native / core --save

9. $ ionic cordova插件添加cordova-plugin-media-capture

10. $ npm install --save @ ionic-native / media-capture

11. 编辑app.module.ts，home.html和＆amp; home.ts文件如下所示

12. $ ionic serve -lcs

将以下内容添加到app.module.ts文件

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

providers: [
   ...
   MediaCapture,

将以下内容添加到home.html文件

<ion-content padding>
  <button ion-button (click)="startrecording()">Start</button>
</ion-content>

将以下内容添加到home.ts文件

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   constructor(public navCtrl: NavController,private mediaCapture: MediaCapture) {

}

startrecording(){
   console.log('Start Recording');
   let options: CaptureImageOptions = { limit: 3 };
   this.mediaCapture.captureImage(options)
     .then(
       (data: MediaFile[]) => console.log(data),
       (err: CaptureError) => console.error(err)
     );
   }
}

列表插件显示已安装Media Capture插件：

$ ionic cordova plugin list
   > cordova plugin ls

  You have been opted out of telemetry. To change this, run: cordova telemetry on.
  cordova-plugin-media-capture 3.0.1 "Capture"

参考文献：

https://ionicframework.com/getting-started

https://ionicframework.com/docs/native/media-capture/

Answer 1

MediaCapture插件在Ionic DevApp中不起作用，因为它目前不受支持。 Here is a list of the currently supported DevApp plugins.

为了测试MediaCapture插件，您需要在平台或模拟器上运行该应用程序。