微信小程序?qū)崿F(xiàn)手機(jī)振動效果
一、微信官方文檔資料
官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/device/vibrate/wx.vibrateShort.html
1、wx.vibrateShort(Object object)
- 基礎(chǔ)庫 1.2.0 開始支持,低版本需做兼容處理。
- 以 Promise 風(fēng)格 調(diào)用:支持
- 小程序插件:支持,需要小程序基礎(chǔ)庫版本不低于 1.9.6
功能描述:
使手機(jī)發(fā)生較短時(shí)間的振動(15 ms)。僅在 iPhone 7 / 7 Plus 以上及 Android 機(jī)型生效
參數(shù):
屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
---|---|---|---|---|---|
type | string | 是 | 震動強(qiáng)度類型,有效值為:heavy、medium、light | 2.13.0 | |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | ||
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | ||
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
案例說明:
wxml代碼
<button bindtap="vibrateShortTap">振動(15ms)</button>
js代碼
vibrateShortTap: function () { // 使手機(jī)振動15ms wx.vibrateShort(); },
2、wx.vibrateLong(Object object)
- 基礎(chǔ)庫 1.2.0 開始支持,低版本需做兼容處理。
- 以 Promise 風(fēng)格 調(diào)用:支持
- 小程序插件:支持,需要小程序基礎(chǔ)庫版本不低于 1.9.6
功能描述:
使手機(jī)發(fā)生較長時(shí)間的振動(400 ms)
參數(shù):
屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
案例說明:
wxml代碼
<button bindtap="vibrateLongTap">振動(400ms)</button>
js代碼
vibrateLongTap: function () { // 使手機(jī)振動400ms wx.vibrateLong(); },
二、手機(jī)振動應(yīng)用場景(以 wx.vibrateLong() 方法為例)
1、如何實(shí)現(xiàn)一直震動?
要實(shí)現(xiàn)一直震動的效果,可以使用 wx.vibrateLong() 方法以一定的時(shí)間間隔重復(fù)調(diào)用自身來實(shí)現(xiàn)。
以下是一個示例代碼,實(shí)現(xiàn)一直震動的效果:
function vibrateContinuously() { wx.vibrateLong({ success: function () { // 在成功回調(diào)中遞歸調(diào)用自身,以實(shí)現(xiàn)震動的連續(xù)效果 vibrateContinuously(); }, fail: function (err) { console.error('震動調(diào)用失敗:', err); } }); } // 調(diào)用函數(shù)開始連續(xù)震動 vibrateContinuously();
在上述代碼中,我們定義了一個名為 vibrateContinuously 的函數(shù),在該函數(shù)中調(diào)用 wx.vibrateLong() 來觸發(fā)長震動。在成功回調(diào)函數(shù)中,我們使用遞歸的方式再次調(diào)用 vibrateContinuously() 函數(shù),從而實(shí)現(xiàn)連續(xù)震動的效果。
2、如何關(guān)閉連續(xù)震動?
要關(guān)閉連續(xù)震動,需要使用 wx.stopVibrate() 方法來停止當(dāng)前正在進(jìn)行的震動。以下是一個示例代碼,用于關(guān)閉連續(xù)震動:
// 定義標(biāo)記用于判斷是否要停止震動 let shouldStopVibrating = false; function vibrateContinuously() { // 檢查是否需要停止震動 if (shouldStopVibrating) { return; // 停止震動 } wx.vibrateLong({ success: function() { // 在成功回調(diào)中遞歸調(diào)用自身,以實(shí)現(xiàn)連續(xù)震動的效果 vibrateContinuously(); }, fail: function(err) { console.error('震動調(diào)用失敗:', err); } }); } // 調(diào)用函數(shù)開始連續(xù)震動 vibrateContinuously(); // 通過設(shè)置 shouldStopVibrating 為 true 來停止震動 shouldStopVibrating = true; // 停止當(dāng)前正在進(jìn)行的震動 wx.stopVibrate();
在上述代碼中,我們使用了一個名為 shouldStopVibrating 的標(biāo)記變量,通過將其設(shè)置為 true 來停止震動。然后在遞歸函數(shù) vibrateContinuously 中添加條件判斷,如果 shouldStopVibrating 變量為 true,就直接退出函數(shù),從而停止連續(xù)震動。最后,調(diào)用 wx.stopVibrate() 方法來停止當(dāng)前正在進(jìn)行的震動。
通過設(shè)置 shouldStopVibrating 變量為 true 可以立即停止震動,而調(diào)用 wx.stopVibrate() 方法可以停止正在進(jìn)行的震動。根據(jù)你的具體需求,可以選擇其中的一種或兩種方式來關(guān)閉連續(xù)震動。
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)手機(jī)振動效果的文章就介紹到這了,更多相關(guān)小程序手機(jī)振動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 獲取當(dāng)前日期時(shí)間 年月日 時(shí)分秒的方法
這篇文章主要介紹了JavaScript 獲取當(dāng)前日期時(shí)間年月日時(shí)分秒的方法,通過案例代碼介紹了獲取當(dāng)前日期方法,代碼簡單易懂,需要的朋友可以參考下2023-10-10簡單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析
這篇文章主要介紹了簡單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JavaScript繼承學(xué)習(xí)筆記【新手必看】
下面小編就為大家?guī)硪黄狫avaScript繼承學(xué)習(xí)筆記。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)
這篇文章主要介紹了 使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)的相關(guān)資料,需要的朋友可以參考下2017-09-09Three.js實(shí)現(xiàn)繪制字體模型示例代碼
最近在學(xué)習(xí)three.js,這篇文章屬于系列文章,下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料,通過文中介紹的方法實(shí)現(xiàn)的效果非常的贊,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法
這篇文章主要為大家詳細(xì)介紹了javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法,感興趣的小伙伴們可以參考一下2016-04-04