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

更新時間：2019年11月22日 15:31:03 作者：xiao朋

這篇文章主要介紹了微信小程序搖一搖功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

微信小程序搖一搖

方法定義：

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

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

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

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

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

這樣在跳轉(zhuǎn)到非監(jiān)聽頁面時就不會執(zhí)行你的代碼了

補充：下面看下微信小程序實現(xiàn)搖一搖重力感應(yīng)API

微信小程序并沒有提供搖一搖API接口，但是提供了一個重力感應(yīng)的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的話，這樣啟用重力感應(yīng)API會使tabbar下面所有頁面都會監(jiān)聽到重力感應(yīng)數(shù)據(jù)，導致模擬搖一搖在所有頁面都能出現(xiàn)搖一搖的結(jié)果，這并不是我們想要的，我們只是想在tabbar下其中一個頁面允許他獲取到重力感應(yīng)數(shù)據(jù)，那么就需要我們自己加入一個是否在當前頁面的判斷，根據(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ā)搖一搖功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: