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

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

微信小程序搖一搖

方法定義： 

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)首頁頁面onLoad添加如下代碼：

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

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

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

這樣在跳轉(zhuǎn)到非監(jiān)聽頁面時(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下面所有頁面都會(huì)監(jiān)聽到重力感應(yīng)數(shù)據(jù)，導(dǎo)致模擬搖一搖在所有頁面都能出現(xiàn)搖一搖的結(jié)果，這并不是我們想要的，我們只是想在tabbar下其中一個(gè)頁面允許他獲取到重力感應(yīng)數(shù)據(jù)，那么就需要我們自己加入一個(gè)是否在當(dāng)前頁面的判斷，根據(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;
  }
})

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