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


Posted in Javascript onNovember 22, 2019

微信小程序摇一摇

方法定义: 

let shakeInfo = {
 openFlag: false,// 是否开启摇一摇,*****注意:如果是小程序全局监听摇一摇,这里默认为true
 shakeSpeed: 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();
}

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

补充:下面看下微信小程序 实现摇一摇重力感应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 () {
    var that = 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;
  }
})

总结

以上所述是小编给大家介绍的微信小程序开发摇一摇功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript函数详解
Feb 27 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
vue.js的提示组件
Mar 02 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
js实现录音上传功能
Nov 22 #Javascript
解决vue自定义全局消息框组件问题
Nov 22 #Javascript
JavaScript实现省市联动效果
Nov 22 #Javascript
Vue混入mixins滚动触底的方法
Nov 22 #Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php 特殊字符处理函数
2008/09/05 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python之re操作方法(详解)
2017/06/14 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python绘图实现显示中文
2019/12/04 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
什么造成了Java里面的异常
2016/04/24 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
《神奇的克隆》教学反思
2014/04/10 职场文书
实习生个人总结范文
2015/02/28 职场文书
升职自我推荐信范文
2015/03/25 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python