[踩坑]微信小程序加速度计——Accelerometer
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
背景
加速度计的接口在可发过程中可能用的不是很多,但有一个大家比较熟悉场景就是摇一摇,自从微信火了之后,摇一摇便是一个神奇的存在。本期就要来谈一谈摇一摇,利用微信小程序的加速度计接口做一个摇骰子的功能。
踩坑
主要是利用下面三个接口来做监听。
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
欢迎关注公众号【入门游戏开发】
楼主源代码在哪里?
楼主你在腾讯工作呀
楼主分享一下源码啊
别说我杠,因为我也是在开发的时候发现了个bug,解决不了,想看看你们的有没有这个问题,然后也是有的。复现步骤:进入到这个页面之后,手机息屏,开始摇晃手机,也是可以摇一摇的,且可以开奖。