h5搖一搖 在公眾號和小程式都可以用了
阿新 • • 發佈：2018-12-26
html5+或者html5plus 現在會有更多新特性，而且還可以呼叫底層硬體資訊。可以去 MDN 去查查相關的事件和方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta 微信小程式 搖一搖 實現
//首先定義一下，全域性變數
var lastTime = 0; //此變數用來記錄上次搖動的時間
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0; //此組變數分別記錄對應x、y、z三軸的數值和上次的數值
var shakeSpeed = 110; //設定閾值
//編寫搖一搖方法
function shake(acceleration) {
var nowTime = new Date().getTime(); //記錄當前時間
//如果這次搖的時間距離上次搖的時間有一定間隔 才執行
if (nowTime - lastTime > 100) {
var diffTime = nowTime - lastTime; //記錄時間段
lastTime = nowTime; //記錄本次搖動時間，為下次計算搖動時間做準備
x = acceleration.x; //獲取x軸數值，x軸為垂直於北軸，向東為正
y = acceleration.y; //獲取y軸數值，y軸向正北為正
z = acceleration.z; //獲取z軸數值，z軸垂直於地面，向上為正
//計算 公式的意思是 單位時間內運動的路程，即為我們想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeSpeed) { //如果計算出來的速度超過了閾值，那麼就算作使用者成功搖一搖
wx.stopAccelerometer()
self.setData({
hasInit: false,
canvas: {}
})
audioCtx.setSrc('http://123.207.0.183/application/images/s.mp3')
audioCtx.play()
wx.showLoading({
title: '尋找大神中...'
})
config.request({
// 要請求的地址
url: config.service.taRan,
success(e) {
setTimeout(function () {
//console.log(e.data)
audioCtx.setSrc('http://123.207.0.183/application/images/r.mp3')
audioCtx.play()
self.uid = e.data
self.con = ''
self.onInitShow()
}, 2000)
}
})
}
lastX = x; //賦值，為下一次計算做準備
lastY = y; //賦值，為下一次計算做準備
lastZ = z; //賦值，為下一次計算做準備
}
}
wx.onAccelerometerChange(shake)
//wx.startAccelerometer()
//小程式的 Audio API 只能使用網路音訊資源。
var audioCtx = wx.createAudioContext('myAudio')