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