介紹
這個插件是用於連接到設備的振動功能。
安裝插件
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 ignored(3000被忽略)
Windows and Blackberry Quirks
時間:最大時間是5000ms(5S)和最小時間是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秒。