Ionic - 使用原生组件开发提示震动+音效

官网震动插件地址:

https://ionicframework.com/docs/native/vibration/

安装震动插件

ionic cordova plugin add cordova-plugin-vibration

npm install --save @ionic-native/vibration

 app.module.ts

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


providers: [

Vibration

]

ts文件注入插件

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


constructor(private vibration: Vibration) { }

然后在本地通知的方法里面加入震动的代码

 this.vibration.vibrate(1000);

 

 

官网原生音频插件地址:

https://ionicframework.com/docs/native/native-audio/

安装

ionic cordova plugin add cordova-plugin-nativeaudio

npm install --save @ionic-native/native-audio


app.module.ts 

import { NativeAudio } from '@ionic-native/native-audio';


providers: [

NativeAudio

]

ts文件注入插件


import { NativeAudio } from '@ionic-native/native-audio';


constructor(private nativeAudio: NativeAudio) { }

找一个声音文件,然后在ts文件里面先加载声音

private onSuccess: any;

private onError: any;

constructor(private nativeAudio: NativeAudio) {

//uniqueId1为音频文件的唯一ID

//assetPath音频资产的相对路径或绝对URL(包括http://)

//官网还有更多的配置,这里只需要两个参数就行了,后面的回调记得带上

this.nativeAudio.preloadSimple('uniqueId1', 'assets/dd.mp3').then(this.onSuccess, this.onError);

}
然后再本地通知里面加上声音代码
this.nativeAudio.play('uniqueId1').then(this.onSuccess,this.onError);

最后,调用方式封装成工具类

public sucSound(){
    this.vibration.vibrate(300);
    this.nativeAudio.play('sucSound').then(this.onSuccess, this.onError);
  }
  public errSound(){
    this.vibration.vibrate(1000);
    this.nativeAudio.play('errSound').then(this.onSuccess, this.onError);
  }

 

你可能感兴趣的:(Ionic,hybird,APP,WebApp,Ionic专栏)