微信小程序“搖一搖”實現

原文鏈接：http://www.webexp.cn/wxapp-paikeng.html

微信小程序並沒有提供搖一搖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;
    }
})

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