cordova vibration插件——震動


介紹

這個插件是用於連接到設備的振動功能。

  

 

 

 

安裝插件

cordova plugin add cordova-plugin-vibration

 

 

 

 

 

使用方法

這個插件定義了全局的對象包含着navigator.vibrate雖然在全局範圍內,但是他們需要在deviceready事件之後纔可用

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    console.log(navigator.vibrate);

}

 

 

 

 

支持的平臺Supported Platforms

· Amazon Fire OS

· Android

· BlackBerry 10

· Firefox OS

· iOS

· Windows Phone 7 and 8

· Windows (Windows Phone 8.1 devices only)

 

 

 

 

 

方法

navigator.vibrate,
navigator.notification.vibrate

navigator.notification.vibrateWithPattern
navigator.notification.cancelVibration

 

 

 


  

 

目前cordova 7.0+ 新版本

震動 (推薦)

這個函數有三個不同的功能,根據傳遞給它的參數。

 

標準振動Standard vibrate

爲振動裝置給定一個時間。

時間:毫秒數給振動裝置(數 

navigator.vibrate(time)

or

navigator.vibrate([time])

  

 

平臺特性
iOS 特性

時間:忽略指定的時間和振動在預先設定的時間。

navigator.vibrate(3000); // 3000 is ignored3000被忽略

Windows and Blackberry Quirks

時間:最大時間是5000ms5S)和最小時間是1ms

navigator.vibrate(8000); // will be truncated to 5000變成5000

 

 

 

震動模式Vibrate with a pattern (Android and Windows only)

該裝置與一個給定的模式振動

navigator.vibrate(pattern);

pattern:序列的持續時間(毫秒),打開或關閉振動器。(數字數組

 

 
平臺特性
Windows Phone 8 特性

振動(模式)依靠振動與默認的持續時間

 

 

 

Cancel vibration (not supported in iOS)

立即取消所有當前正在運行的振動。

navigator.vibrate(0)

or

navigator.vibrate([])

or

navigator.vibrate([0])

通過在0個參數,一個空數組,或者一個價值0個元素的數組將取消任何振動。

 

 


 

cordova 版本

*notification.vibrate (不推薦使用)

振動裝置給定一個時間。

navigator.notification.vibrate(time)

time:毫秒數給振動裝置(數

 

 

平臺特性

iOS 特性

time:忽略指定的時間和振動在預先設定的時間。

navigator.notification.vibrate();

navigator.notification.vibrate(2500);   // 2500 is ignored 忽略

 

 

  

 

 

*notification.vibrateWithPattern (不推薦使用)

該裝置與一個給定的模式振動。

navigator.notification.vibrateWithPattern(pattern, repeat)

pattern:序列的持續時間(毫秒),打開或關閉振動器。(數字數組

repeat:可選指標納入圖案陣列,開始重複(重複直至取消),或1不重複(默認)。(數字)

 

  

 

 

*notification.cancelVibration (不推薦使用)

立即取消所有當前正在運行的振動。

navigator.notification.cancelVibration()

 

 

 

  

 

 

示例

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id = "vibrate">標準震動</button></div>
    <div class="line"><button id = "vibrationPattern">自定義震動</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

  

index.js

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   // 震動插件
   receivedEvent: function(){
      this.$$("vibrate").addEventListener("click", vibration);
      this.$$("vibrationPattern").addEventListener("click", vibrationPattern);

      // 此參數用於設置的震動的持續時間,震動3秒。
      function vibration() {
            var time = 3000;
            navigator.vibrate(time);
            console.log("觸發了標準震動")
      }

      // 震動1秒,等待1秒,震動3秒,等待1秒,震動5秒。
      function vibrationPattern() {
            var pattern = [1000, 1000, 3000, 1000, 5000];
            navigator.vibrate(pattern);
            console.log("觸發了自定義震動")
      }

   }
};

app.initialize();

 

 

運行:

必須要使用真機測試!

點擊“標準震動”,震動3秒鐘。

點擊“自定義震動”,震動1秒,等待1秒,震動3秒,等待1秒,震動5秒。




發佈了99 篇原創文章 · 獲贊 374 · 訪問量 149萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章