微信小程序怎樣開發搖一搖功能

這篇文章給大家分享的是有關微信小程序怎樣開發搖一搖功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

微信小程序搖一搖

方法定義： 

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

方法調用，在小程序啟動首頁頁面onLoad添加如下代碼：

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

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

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

這樣在跳轉到非監聽頁面時就不會執行你的代碼了

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

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

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

感謝各位的閱讀！關于“微信小程序怎樣開發搖一搖功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！