微信小程序怎樣開(kāi)發(fā)搖一搖功能

這篇文章給大家分享的是有關(guān)微信小程序怎樣開(kāi)發(fā)搖一搖功能的內容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

微信小程序搖一搖

方法定義： 

let shakeInfo = {
 openFlag: false,// 是否開(kāi)啟搖一搖，*****注意：如果是小程序全局監聽(tīng)搖一搖，這里默認為true
 shakeSpeed: 110,//設置閾值,越小越靈敏
 shakeStep: 2000,//搖一搖成功后間隔
 lastTime: 0,//此變量用來(lái)記錄上次搖動(dòng)的時(shí)間
 x: 0,
 y: 0,
 z: 0,
 lastX: 0,
 lastY: 0,
 lastZ: 0, //此組變量分別記錄對應 x、y、z 三軸的數值和上次的數值
};
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(); //記錄當前時(shí)間
 //如果這次搖的時(shí)間距離上次搖的時(shí)間有一定間隔 才執行
 if (nowTime - shakeInfo.lastTime > 100) {
  var diffTime = nowTime - shakeInfo.lastTime; //記錄時(shí)間段
  shakeInfo.lastTime = nowTime; //記錄本次搖動(dòng)時(shí)間，為下次計算搖動(dòng)時(shí)間做準備
  shakeInfo.x = acceleration.x; //獲取 x 軸數值，x 軸為垂直于北軸，向東為正
  shakeInfo.y = acceleration.y; //獲取 y 軸數值，y 軸向正北為正
  shakeInfo.z = acceleration.z; //獲取 z 軸數值，z 軸垂直于地面，向上為正
  //計算 公式的意思是 單位時(shí)間內運動(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) { //如果計算出來(lái)的速度超過(guò)了閾值，那么就算作用戶(hù)成功搖一搖
   successCallback();
  }
  shakeInfo.lastX = shakeInfo.x; //賦值，為下一次計算做準備
  shakeInfo.lastY = shakeInfo.y; //賦值，為下一次計算做準備
  shakeInfo.lastZ = shakeInfo.z; //賦值，為下一次計算做準備
 }
}

方法調用，在小程序啟動(dòng)首頁(yè)頁(yè)面onLoad添加如下代碼：

 /**
  * 生命周期函數--監聽(tīng)頁(yè)面加載
  */
 onLoad: function(options) {
  //
  wx.onAccelerometerChange(function(acceleration) {
   Main.shake(acceleration, function() {
    Main.shakeOk();
    Main.openBarCodeDlg(); // 在這里調用搖一搖成功后執行的代碼
   });
  });
 }

如果是小程序全局都監聽(tīng)搖一搖，以上代碼就可以實(shí)現，如果只是配置指定某幾個(gè)頁(yè)面監聽(tīng)，則需要在監聽(tīng)的頁(yè)面做以下code：

onShow: function() {
 Main.openShakeEvent();
},
onHide: function() {
 Main.closeShakeEvent();
}

這樣在跳轉到非監聽(tīng)頁(yè)面時(shí)就不會(huì )執行你的代碼了

補充：下面看下微信小程序 實(shí)現搖一搖重力感應API

微信小程序并沒(méi)有提供搖一搖API接口，但是提供了一個(gè)重力感應的API 「wx.onAccelerometerChange(CALLBACK)」，我們可以用這個(gè)方法來(lái)模擬微信搖一搖功能，代碼如下：

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的話(huà)，這樣啟用重力感應API會(huì )使tabbar下面所有頁(yè)面都會(huì )監聽(tīng)到重力感應數據，導致模擬搖一搖在所有頁(yè)面都能出現搖一搖的結果，這并不是我們想要的，我們只是想在tabbar下其中一個(gè)頁(yè)面允許他獲取到重力感應數據，那么就需要我們自己加入一個(gè)是否在當前頁(yè)面的判斷，根據判斷結果來(lái)啟用監聽(tī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;
  }
})