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


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 相关文章推荐
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JS实现一个简单的日历
Feb 22 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
Vue关于组件化开发知识点详解
May 13 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php防攻击代码升级版
2010/12/29 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python使用递归解决全排列数字示例
2014/02/11 Python
列举Python中吸引人的一些特性
2015/04/09 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python对json的相关操作实例详解
2017/01/04 Python
python入门教程之识别验证码
2017/03/04 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
高中生自我评价个人范文
2013/11/09 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
自主招生推荐信范文
2014/05/10 职场文书
安全生产工作汇报
2014/10/28 职场文书
乒乓球比赛通知
2015/04/27 职场文书
不同意离婚代理词
2015/05/23 职场文书
小学班长竞选稿
2015/11/20 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Python如何配置环境变量详解
2021/05/18 Python