[踩坑]微信小程序加速度计——Accelerometer

背景

加速度计的接口在可发过程中可能用的不是很多，但有一个大家比较熟悉场景就是摇一摇，自从微信火了之后，摇一摇便是一个神奇的存在。本期就要来谈一谈摇一摇，利用微信小程序的加速度计接口做一个摇骰子的功能。

踩坑

主要是利用下面三个接口来做监听。

wx.startAccelerometer(OBJECT)
wx.onAccelerometerChange(CALLBACK)
wx.stopAccelerometer(OBJECT)

但实际上这三个接口是不能完全满足需求的，原因是小程序框架实现上有缺陷，害我大半夜的定位问题。

A、B两个页面，都需要摇一摇。

A页面，onReady事件后wx.onAccelerometerChange，注册一个加速度监听。然后调用startAccelerometer，开始监听。

分享B页面出去，离开A页面，stopAccelerometer停止监听。

打开B页面，同样要注册一个监听事件，然后监听。

这个时候的坑就来了，在iOS端升级到最新版本6.5.12后，A页面注册的监听并不会clear，stopAccelerometer纯粹是不监听而已，但注册事件并未clear。所以到了B页面，A页面的事件还存在。在B页面摇一摇，会触发两个页面的回调。

拿个例子来说明就是，只提供了addEventListener，但却没有提供removeEventListener，这就是设计上的缺陷。这个坑就得前端来处理。

解决办法

要依赖小程序的框架来加这removeEventListener接口不止要等到什么时候，但我们还是有办法的。
onAccelerometerChange的回调处理事件，可以给我们的每个回调分配一个pageName

class Shake{
    constructor(callback, pageName){
        this.lastTime = 0;
        this.callback = callback;
        this.pageName = pageName;
    },
    bind(){
        wx.onAccelerometerChange(function(res){
            var routePage = pages[pages.length -1].route;
            // 这里是判断条件
            if(this.pageName === xxx 
                && routePage === 'pages/index/index'){
                callback()
            }
        })
    }
}

当然终极的解决方案还是要有一个清除的接口removeEventListener，这样开发者就不用走弯路。

另外摇一摇的参数好难调试，要不就幅度太大，要不就太小，这里花了不少时间调优。如果小程序本身能够提供更加简单的摇一摇接口就好了，而不是比较简单的加速度计，这样每个小程序的摇一摇体验就会更加一致。

有兴趣的可以在小程序搜：欢乐摇骰子，或者扫码体验。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】