微信小程式中實現搖一搖功能的方法介紹

微信小程式並沒有提供搖一搖API接口，但是提供了一個重力感應的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;
  }
})

#修改以後重新編譯預覽就達到我們想要的效果了。

總結

#

以上是微信小程式中實現搖一搖功能的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！