微信小程序开发摇一摇功能

方法定义：

let shakeInfo = {openFlag: false,// 是否开启摇一摇，*****注意：如果是小程序全局监听摇一摇，这里默认为trueshakeSpeed: 110,//设置阈值,越小越灵敏shakeStep: 2000,//摇一摇成功后间隔lastTime: 0,//此变量用来记录上次摇动的时间x: 0,y: 0,z: 0,lastX: 0,lastY: 0,lastZ: 0, //此组变量分别记录对应 x、y、z 三轴的数值和上次的数值
};
function openShakeEvent() {shakeInfo.openFlag = true;
}
function closeShakeEvent() {shakeInfo.openFlag = false;
}
function shakeOk() {closeShakeEvent();setTimeout(function () {openShakeEvent();}, shakeInfo.shakeStep);
}
/*** 判断是否为摇一摇*/
function shake(acceleration, successCallback) {if (!shakeInfo.openFlag) {return;}var nowTime = new Date().getTime(); //记录当前时间//如果这次摇的时间距离上次摇的时间有一定间隔 才执行if (nowTime - shakeInfo.lastTime > 100) {var diffTime = nowTime - shakeInfo.lastTime; //记录时间段shakeInfo.lastTime = nowTime; //记录本次摇动时间，为下次计算摇动时间做准备shakeInfo.x = acceleration.x; //获取 x 轴数值，x 轴为垂直于北轴，向东为正shakeInfo.y = acceleration.y; //获取 y 轴数值，y 轴向正北为正shakeInfo.z = acceleration.z; //获取 z 轴数值，z 轴垂直于地面，向上为正//计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度var speed = 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();
}

这样在跳转到非监听页面时就不会执行你的代码了

微信小程序开发摇一摇功能_javascript技巧相关推荐

微信小程序开发类似微博回复功能自带云开发数据库（无限回复）
注意事项:本文放置了关键代码和全部该页的全部代码,按需自取.html中存在少许图片,大家加上自己喜欢的即可.数据库结构内容也会展示给大家. 效果: 第一条回复的是帖子,第二条回复的是第三条,第三条回复 ...
配置微信小程序开发分享朋友圈功能
在微信开发者平台上,可以按照以下步骤正确配置分享相关的参数: 登录微信开发者平台在浏览器中访问微信开发者平台(https://mp.weixin.qq.com/),使用微信公众号的管理员账号登录. ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...
微信小程序开发工具介绍及安装（下）
开发工具的基本功能介绍微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建.调试和发布微信小程序.它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
农家乐微信小程序开发功能
对于农家乐旅游行业的微信小程序开发,重点还是应该放在功能上,比如:为游客提供最便捷的路线,帮助使用者制定好相应的旅游景点,当然要有旅游费用的预估功能,帮助游客更好的了解出行的所有,让游客在进行农家乐旅 ...
微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法
微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示人才招聘微信小程序企业入驻及 ...

微信小程序开发摇一摇功能_javascript技巧

微信小程序开发摇一摇功能_javascript技巧相关推荐

最新文章

热门文章