热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这篇文章主要介绍了微信小程序摇一摇功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

微信小程序摇一摇

方法定义: 

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;
  }
})

总结

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


推荐阅读
  • 据《经济参考报》报道,微信即将推出新版小程序,预计将在近期正式上线。此次更新将新增支付功能,进一步提升用户体验。此外,新版小程序还将提供“附近门店”接口,用户可通过定位功能轻松查找周边门店,享受更加便捷的服务。这一系列改进旨在为用户提供更加丰富和高效的使用体验。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 经过短暂的休整,我们再次推出新的小程序功能,进一步提升用户体验。现在,小程序页面不仅支持放置转发按钮,还新增了长按快速转发的功能,让用户能够更加便捷地分享页面内容。这一更新将为开发者提供更多创意空间,同时也大幅提升了用户的互动性和使用便利性。 ... [详细]
  • Java 点餐系统源代码附带管理后台(免费提供)
    本项目提供了一套基于 Java 的点餐系统,包括前端小程序和后端管理平台。采用 Spring Boot 和 SSM 框架,结合 MySQL 和 Redis 数据库技术,适用于学习和二次开发。有需要源代码的开发者可以通过私信联系,免费获取下载链接。 ... [详细]
  • 基于Java的微信小程序:Spring Boot驱动的中小学家校互动与电子作业管理平台
    基于Java的微信小程序,采用Spring Boot作为后端框架,构建了一个高效的中小学家校互动与电子作业管理平台。前端使用了uni-app框架,确保跨平台兼容性。该平台集成了家校沟通、作业发布与管理、学生成绩查询等功能,旨在提升教育管理效率和家长参与度。后端开发环境配置完善,采用Spring Boot、MyBatis等技术栈,确保系统的稳定性和扩展性。 ... [详细]
  • 微信小程序图片上传功能详解:wx.chooseImage与wx.uploadFile的使用方法与注意事项
    在微信小程序中,图片上传功能是开发者常用的功能之一。本文详细介绍了 `wx.chooseImage` 和 `wx.uploadFile` 的使用方法及注意事项。通过 `wx.chooseImage`,用户可以选择本地图片或拍摄新照片,而 `wx.uploadFile` 则用于将选中的图片上传到服务器。文章还提供了代码示例,帮助开发者更好地理解和应用这两个 API。此外,文中还讨论了常见的错误处理和性能优化技巧,确保图片上传过程的稳定性和高效性。 ... [详细]
  • 【Linux】CentOS 7 远程连接指南:高效安全的远程管理方法
    在 CentOS 7 中实现高效且安全的远程管理,本文详细介绍了如何检查和安装配置 OpenSSH。首先,通过 `yum list installed` 命令检查系统是否已安装 OpenSSH,若未安装,则使用 `yum install openssh-server` 进行安装。随后,配置 SSH 服务以确保其安全性和稳定性,包括修改默认端口、禁用 root 登录等关键步骤。此外,还提供了常见问题的解决方案,帮助用户顺利进行远程连接。 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 经过半年的精心整理,我们汇总了当前市场上最全面的Android面试题解析,为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题,帮助读者全面提升技术实力和面试表现。章节目录包括:- 第一章:Android基础面试题- 第二章:... ... [详细]
  • 本文介绍了如何在 Windows 系统上利用 Docker 构建一个包含 NGINX、PHP、MySQL、Redis 和 Elasticsearch 的集成开发环境。通过详细的步骤说明,帮助开发者快速搭建和配置这一复杂的技术栈,提升开发效率和环境一致性。 ... [详细]
  • IDEA 2019.2 中 SFTP 部署功能无法成功连接至服务器的问题分析与解决 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
  • 在搭建Hadoop集群以处理大规模数据存储和频繁读取需求的过程中,经常会遇到各种配置难题。本文总结了作者在实际部署中遇到的典型问题,并提供了详细的解决方案,帮助读者避免常见的配置陷阱。通过这些经验分享,希望读者能够更加顺利地完成Hadoop集群的搭建和配置。 ... [详细]
  • 基于SSH框架的高校学生宿舍管理平台设计与实现
    本研究基于SSH(Struts、Spring、Hibernate)框架,设计并实现了一套高校学生宿舍管理平台。该平台采用Eclipse MyEclipse作为开发工具,运行环境为Tomcat 8服务器,使用JDK 1.8进行开发,数据库选用MySQL。系统功能涵盖学生信息管理、宿舍分配、费用结算等模块,旨在提高宿舍管理的效率和准确性,适用于高校宿舍管理的课程设计项目。 ... [详细]
author-avatar
手机用户2502939987
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有