微信小程序開發(fā)搖一搖功能
微信小程序搖一搖
方法定義:
let shakeInfo = {
openFlag: false,// 是否開啟搖一搖,*****注意:如果是小程序全局監(jiān)聽搖一搖,這里默認(rèn)為true
shakeSpeed: 110,//設(shè)置閾值,越小越靈敏
shakeStep: 2000,//搖一搖成功后間隔
lastTime: 0,//此變量用來記錄上次搖動(dòng)的時(shí)間
x: 0,
y: 0,
z: 0,
lastX: 0,
lastY: 0,
lastZ: 0, //此組變量分別記錄對(duì)應(yīng) x、y、z 三軸的數(shù)值和上次的數(shù)值
};
function openShakeEvent() {
shakeInfo.openFlag = true;
}
function closeShakeEvent() {
shakeInfo.openFlag = false;
}
function shakeOk() {
closeShakeEvent();
setTimeout(function () {
openShakeEvent();
}, shakeInfo.shakeStep);
}
/**
* 判斷是否為搖一搖
*/
function shake(acceleration, successCallback) {
if (!shakeInfo.openFlag) {
return;
}
var nowTime = new Date().getTime(); //記錄當(dāng)前時(shí)間
//如果這次搖的時(shí)間距離上次搖的時(shí)間有一定間隔 才執(zhí)行
if (nowTime - shakeInfo.lastTime > 100) {
var diffTime = nowTime - shakeInfo.lastTime; //記錄時(shí)間段
shakeInfo.lastTime = nowTime; //記錄本次搖動(dòng)時(shí)間,為下次計(jì)算搖動(dòng)時(shí)間做準(zhǔn)備
shakeInfo.x = acceleration.x; //獲取 x 軸數(shù)值,x 軸為垂直于北軸,向東為正
shakeInfo.y = acceleration.y; //獲取 y 軸數(shù)值,y 軸向正北為正
shakeInfo.z = acceleration.z; //獲取 z 軸數(shù)值,z 軸垂直于地面,向上為正
//計(jì)算 公式的意思是 單位時(shí)間內(nèi)運(yùn)動(dòng)的路程,即為我們想要的速度
var speed = Math.abs(shakeInfo.x + shakeInfo.y + shakeInfo.z - shakeInfo.lastX - shakeInfo.lastY - shakeInfo.lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeInfo.shakeSpeed) { //如果計(jì)算出來的速度超過了閾值,那么就算作用戶成功搖一搖
successCallback();
}
shakeInfo.lastX = shakeInfo.x; //賦值,為下一次計(jì)算做準(zhǔn)備
shakeInfo.lastY = shakeInfo.y; //賦值,為下一次計(jì)算做準(zhǔn)備
shakeInfo.lastZ = shakeInfo.z; //賦值,為下一次計(jì)算做準(zhǔn)備
}
}
方法調(diào)用,在小程序啟動(dòng)首頁(yè)頁(yè)面onLoad添加如下代碼:
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function(options) {
//
wx.onAccelerometerChange(function(acceleration) {
Main.shake(acceleration, function() {
Main.shakeOk();
Main.openBarCodeDlg(); // 在這里調(diào)用搖一搖成功后執(zhí)行的代碼
});
});
}
如果是小程序全局都監(jiān)聽搖一搖,以上代碼就可以實(shí)現(xiàn),如果只是配置指定某幾個(gè)頁(yè)面監(jiān)聽,則需要在監(jiān)聽的頁(yè)面做以下code:
onShow: function() {
Main.openShakeEvent();
},
onHide: function() {
Main.closeShakeEvent();
}
這樣在跳轉(zhuǎn)到非監(jiān)聽頁(yè)面時(shí)就不會(huì)執(zhí)行你的代碼了
補(bǔ)充:下面看下微信小程序 實(shí)現(xiàn)搖一搖重力感應(yīng)API
微信小程序并沒有提供搖一搖API接口,但是提供了一個(gè)重力感應(yīng)的API 「wx.onAccelerometerChange(CALLBACK)」,我們可以用這個(gè)方法來模擬微信搖一搖功能,代碼如下:
Page({
onShow: function () {
wx.onAccelerometerChange(function (e) {
console.log(e.x)
console.log(e.y)
console.log(e.z)
if (e.x > 1 && e.y > 1) {
wx.showToast({
title: '搖一搖成功',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
}
})
但如果小程序需要啟用tabbar的話,這樣啟用重力感應(yīng)API會(huì)使tabbar下面所有頁(yè)面都會(huì)監(jiān)聽到重力感應(yīng)數(shù)據(jù),導(dǎo)致模擬搖一搖在所有頁(yè)面都能出現(xiàn)搖一搖的結(jié)果,這并不是我們想要的,我們只是想在tabbar下其中一個(gè)頁(yè)面允許他獲取到重力感應(yīng)數(shù)據(jù),那么就需要我們自己加入一個(gè)是否在當(dāng)前頁(yè)面的判斷,根據(jù)判斷結(jié)果來啟用監(jiān)聽重力感應(yīng)API,代碼修改如下:
Page({
isShow: false,
onShow: function () {
var that = this;
this.isShow = true;
wx.onAccelerometerChange(function (e) {
if(!that.isShow){
return
}
console.log(e.x)
console.log(e.y)
console.log(e.z)
if (e.x > 1 && e.y > 1) {
wx.showToast({
title: '搖一搖成功',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
this.isShow = false;
}
})
總結(jié)
以上所述是小編給大家介紹的微信小程序開發(fā)搖一搖功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
理清apply(),call()的區(qū)別和關(guān)系
如果沒接觸過動(dòng)態(tài)語言,以編譯型語言的思維方式去理解javaScript將會(huì)有種神奇而怪異的感覺,因?yàn)橐庾R(shí)上往往不可能的事偏偏就發(fā)生了,甚至覺得不可理喻.2011-08-08
如何在JavaScript中使用map()迭代數(shù)組詳細(xì)步驟
在JavaScript中循環(huán)迭代數(shù)組的方法有很多種,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中使用map()迭代數(shù)組的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象(示例代碼)
本篇文章主要介紹了JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象示例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
Fetch超時(shí)設(shè)置與終止請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Fetch超時(shí)設(shè)置與終止請(qǐng)求的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Fetch具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript?函數(shù)表達(dá)式與函數(shù)聲明的用法及區(qū)別
這篇文章主要介紹了JavaScript?函數(shù)表達(dá)式與函數(shù)聲明詳析,函數(shù)表達(dá)式和函數(shù)聲明是JavaScript中創(chuàng)建函數(shù)的兩種方法,下面文章具體的相關(guān)內(nèi)容介紹,需要的小伙伴可以參考一下2022-06-06
JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JS使用setInterval實(shí)現(xiàn)的簡(jiǎn)單計(jì)時(shí)器功能示例
這篇文章主要介紹了JS使用setInterval實(shí)現(xiàn)的簡(jiǎn)單計(jì)時(shí)器功能,涉及javascript基于setInterval的定時(shí)觸發(fā)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
JavaScript實(shí)現(xiàn)忘記密碼功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用HTML、CSS和JavaScript實(shí)現(xiàn)一個(gè)完整的忘記密碼功能,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-01-01

