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

方法定义: 

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cmake 如何添加依赖库

1 说明 cmake 经常需要添加依赖库,但是不知如何确定依赖的库名称,如何编写 2 环境 ubuntu 机器 3 依赖方法 以 dbus 为例 3.1、确定库的名字 通过dpkg 命令搜索库名,如下所示,确定libdbus-1-dev 为自己需要的版本 usereba…

MySQL 事务

目录 一、事务的概念 二、事务的ACID特点 1)事务的原子性 2)事务的一致性 3)事务的隔离性 (1)脏读 (2)不可重复读 (3)幻读 (4) 丢失更…

测试开发之前端篇-Web前端简介

自从九十年代初,人类创造出网页和浏览器后,Web取得了长足的发展,如今越来越多的企业级应用也选择使用Web技术来构建。 前面给大家介绍网络协议时讲到,您在阅读这篇文章时,浏览器是通过HTTP/HTTPS协议向服务器发送请求…

MyBatisPlus

一、MyBatis-Plus 1、简介 [MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 我们的愿景是成为 MyBatis 最好的搭档,就像魂斗罗中的 1P、2P&#…

探索ES高可用:滴滴自研跨数据中心复制技术详解

Elasticsearch 是一个基于Lucene构建的开源、分布式、RESTful接口的全文搜索引擎,其每个字段均可被索引,且能够横向扩展至数以百计的服务器存储以及处理TB级的数据,其可以在极短的时间内存储、搜索和分析大量的数据。 滴滴ES发展至今&#xf…

Telink泰凌微TLSR8258蓝牙开发笔记(一)

一、开发环境搭建 1.1、软件开发环境: 1.1.1、开发的IDE: IDE下载链接 1.1.2、烧录工具 DBT下载地址 1.1.3、蓝牙SDK 蓝牙SDK下载地址 1.2、硬件开发环境 8258开发板烧录工具一套 二、运行例程,并使能打印调试信息功能 File-->Impo…

c#学习记录-文件操作

文件操作/文件夹操作 文件夹会创建在\bin\Debug\net6.0 namespace _23_文件操作 {internal class Program{static void Main(string[] args){-------------------文件操作File--------------//复制方法1FileInfo myFile new FileInfo("E:\\VScodes\\第四季-高级编程\\2…

状态模式(C++)

定义 允许一个对象在其内部状态改变时改变它的行为。从而使对象看起来似乎修改了其行为。 应用场景 在软件构建过程中,某些对象的状态如果改变,其行为也会随之,而发生变化,比如文档处于只读状态,其支持的行为和读写…

xshell新建文件传输失败-使用sftp如何上传及下载数据

问题描述 我在使用xshell时,点击操作栏中的新建文件传输,报错为:要继续使用此程序,您必须应用最新的更新或使用新版本,然后就给我跳到了sftp界面,界面上显示的是当前目录,我要下载数据到本地。 …

C++中动态数组的使用

C中动态数组的使用 假设要在应用程序中存储医院的病历,程序员将无法知道需要处理的病历数上限。就小医院而言,为稳妥起见,程序员可对上限做合理的假设。在这种情况下,程序员将预留大量的内存,进而降低系统的性能。 为…

仅使用 CSS 创建打字机动画效果

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript,但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中,我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScrip…

全球互联网步入IPv6时代,IPv4逐渐告别历史舞台

随着互联网技术的飞速发展,全球互联网正迎来IPv6与IPv4并存转型阶段。IPv6, 新一代互联网协议,以其更大的地址空间和更高的效率正逐渐取代IPv4成为互联网的主导。 全球互联网开始全面实施IPv6这意味着IPv4时代正在逐渐走向尾声。IPv4与IPv6为互联网协议版…

【Spring Boot】了解Spring Boot 的日志文件

目录 一、日志的作用 二、日志文件的简单使用 1、Spring Boot中的默认日志 2、自定义日志打印 三、日志级别 1、日志级别分类 2、日志级别的设置 3、日志持久化 四、基于LomBok的日志输出 1、安装Lombok插件 2、使用Lombok添加日志 3、使用Lombok添加getter和setter…

Java关键字:final解析

目录 一、final变量 二、final方法 三、final类 final是Java语言中的一个关键字,凡是被final关键字修饰过的内容都是不可改变的。 一、final变量 final关键字可用于变量声明,一旦该变量被设定,就不可以再改变该变量的值。通常&#xff0…

C++STL简介

1.STL简介 1.1.STL的概念 STL(standard template libaray即:“标准模板库”)是C标准库的重要组成部分,不仅是一个可复用的组件库,而且是一个包罗数据结构与算法的软件框架。 1.2.STL的版本 原始版本:Alexander Stepanov、Meng …

SAM 大模型Colab快速上手【Segment Anything Model】

Google Colab 是一个基于云的 Jupyter 笔记本环境,允许您通过浏览器编写、运行和共享 Python 代码。 它就像 Google 文档,但用于代码。 通过免费版本的 Google Colab,你可以获得带有约 16GPU VRAM 的 Nvidia Tesla T4 GPU,这对于…

centos手动离线安装php,nginx

1、CentOS 7上安装并配置Nginx https://www.cnblogs.com/xujiecnblogs/p/16843984.html /usr/local/nginx/sbin/nginx #启动 /usr/local/nginx/sbin/nginx -s stop #关闭 /usr/local/nginx/sbin/nginx -s reload #重启 增加h…

解决K8S集群设置污点后,污点不生效,下发应用的问题

问题:在集群中部署了三个daemonset,一开始加了容忍Toleration,后边去掉Toleration后,还是一直往边缘节点上部署应用,非常离谱 解决:删掉Toleration后,需要把annotations一起删掉,因为…

区块链媒体发稿:区块链媒体宣发常见问题解析

据统计,由于区块链应用和虚拟货币的兴起,越来越多媒体对区块链领域开展报导,特别是世界各国媒体宣发全是热火朝天。但是,随着推卸责任媒体宣发的五花八门,让很多人因而上当受骗,乃至伤害一大笔资产。身为投…

打破雇佣思想 云畅科技CIO曾颖博士浅析零雇工模式

作者简介 INTRO 曾 颖 工商管理博士 云畅科技高级合伙人、CIO 产业咨询&企业数字化转型落地专家 2018年,“零雇工”企业组织创新2018全球创新创业教育高峰论坛在西安举行,我当时作为上海沐新众创空间的导师和分会场“企业家如何创建零雇工…