by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/07/wxapp-accelerometer/

背景

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

[踩坑]微信小程序加速度计——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,这样开发者就不用走弯路。

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

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

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

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2017/07/wxapp-accelerometer/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号