微信小程序开发摇一摇功能
微信小程序摇一摇
方法定义:
letshakeInfo={ openFlag:false,//是否开启摇一摇,*****注意:如果是小程序全局监听摇一摇,这里默认为true shakeSpeed:110,//设置阈值,越小越灵敏 shakeStep:2000,//摇一摇成功后间隔 lastTime:0,//此变量用来记录上次摇动的时间 x:0, y:0, z:0, lastX:0, lastY:0, lastZ:0,//此组变量分别记录对应x、y、z三轴的数值和上次的数值 }; functionopenShakeEvent(){ shakeInfo.openFlag=true; } functioncloseShakeEvent(){ shakeInfo.openFlag=false; } functionshakeOk(){ closeShakeEvent(); setTimeout(function(){ openShakeEvent(); },shakeInfo.shakeStep); } /** *判断是否为摇一摇 */ functionshake(acceleration,successCallback){ if(!shakeInfo.openFlag){ return; } varnowTime=newDate().getTime();//记录当前时间 //如果这次摇的时间距离上次摇的时间有一定间隔才执行 if(nowTime-shakeInfo.lastTime>100){ vardiffTime=nowTime-shakeInfo.lastTime;//记录时间段 shakeInfo.lastTime=nowTime;//记录本次摇动时间,为下次计算摇动时间做准备 shakeInfo.x=acceleration.x;//获取x轴数值,x轴为垂直于北轴,向东为正 shakeInfo.y=acceleration.y;//获取y轴数值,y轴向正北为正 shakeInfo.z=acceleration.z;//获取z轴数值,z轴垂直于地面,向上为正 //计算公式的意思是单位时间内运动的路程,即为我们想要的速度 varspeed=Math.abs(shakeInfo.x+shakeInfo.y+shakeInfo.z-shakeInfo.lastX-shakeInfo.lastY-shakeInfo.lastZ)/diffTime*10000; //console.log(speed) if(speed>shakeInfo.shakeSpeed){//如果计算出来的速度超过了阈值,那么就算作用户成功摇一摇 successCallback(); } shakeInfo.lastX=shakeInfo.x;//赋值,为下一次计算做准备 shakeInfo.lastY=shakeInfo.y;//赋值,为下一次计算做准备 shakeInfo.lastZ=shakeInfo.z;//赋值,为下一次计算做准备 } }
方法调用,在小程序启动首页页面onLoad添加如下代码:
/** *生命周期函数--监听页面加载 */ onLoad:function(options){ // wx.onAccelerometerChange(function(acceleration){ Main.shake(acceleration,function(){ Main.shakeOk(); Main.openBarCodeDlg();//在这里调用摇一摇成功后执行的代码 }); }); }
如果是小程序全局都监听摇一摇,以上代码就可以实现,如果只是配置指定某几个页面监听,则需要在监听的页面做以下code:
onShow:function(){ Main.openShakeEvent(); }, onHide:function(){ Main.closeShakeEvent(); }
这样在跳转到非监听页面时就不会执行你的代码了
补充:下面看下微信小程序实现摇一摇重力感应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(){ varthat=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; } })
总结
以上所述是小编给大家介绍的微信小程序开发摇一摇功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。