uni-app怎么实现App端内的类似于微信的摇一摇功能 uni-app重力感应API应用【代码】

小杰君_6410

小杰君_6410

2026-06-07

563人浏览

原创

uni-app App端需调用uni.startAccelerometer后,用uni.onAccelerometerChange监听加速度模长突变(如currAcc>2.0且增量>1.8g),配合isShaking防抖与1500ms锁定期实现稳定摇一摇,禁用uni.onDeviceMotionChange因其响应线性晃动弱。

uni-app怎么实现app端内的类似于微信的摇一摇功能 uni-app重力感应api应用【代码】

uni-app App端怎么用uni.onAccelerometerChange监听摇一摇

App端摇一摇本质是检测加速度突变,uni-app 提供了 uni.onAccelerometerChange,但直接监听原始数据容易误触发、漏触发——关键不在“有没有”,而在“怎么滤波和判定”。

  • 必须调用 uni.startAccelerometer 才能开始接收数据,否则监听器注册了也收不到回调
  • Android 和 iOS 对采样频率支持不同:interval 参数设为 "game"(最快)在 iOS 上可能被降频,实际建议用 "ui" 平衡灵敏度与耗电
  • 摇一摇不是看单次数值大小,而是看连续几个采样点的矢量模长变化率;推荐计算 Math.sqrt(x*x + y*y + z*z) 得到合加速度,再对比前后差值
  • 示例逻辑:记录上一时刻的合加速度 lastAcc,当前为 currAcc,若 currAcc - lastAcc > 1.8(单位:g)且 currAcc > 2.0,才视为一次有效“起始抖动”

为什么uni.onDeviceMotionChange不适合做摇一摇

uni.onDeviceMotionChange 返回的是姿态角(alpha/beta/gamma),反映设备朝向变化,对快速小幅旋转敏感,但对沿任意轴的线性晃动(比如手掌带动手机前后甩)响应弱——而真实摇一摇动作主要是线性加速度突变。

  • 实测中,用户握着手机左右快速摆手,onDeviceMotionChange 可能只触发 1–2 次,而 onAccelerometerChange 能稳定捕获 5+ 个峰值
  • 微信、QQ 等原生 App 全部基于加速度计实现摇一摇,非陀螺仪或磁场数据
  • 如果你在真机调试时发现完全没回调,请先检查是否调用了 uni.startAccelerometer,以及 manifest.json 中 Android 的 ACCESS_BACKGROUND_LOCATION 权限是否误开(它不相关,但会干扰传感器初始化)

防抖与连续触发控制:别让用户摇一下弹出三次

原始加速度数据噪声大,一次真实摇动常触发多个符合条件的峰值,必须加时间窗口和状态锁。

微信公众号发文助手
微信公众号发文助手

微信公众号产业研究发文助手,支持原文读取、分层摘要、产业链标的梳理、image2 海报与封面生成、正文排版、微信草稿保存、回读校验和发布前确认。

下载
  • 检测到一次有效抖动后,立即设置标志位 isShaking = true,并启动 setTimeout 在 1500ms 后重置
  • 在 isShaking 为 true 期间,所有新触发都忽略
  • 不要依赖 clearTimeout 去取消旧定时器——摇动持续时长不可控,固定窗口比动态重置更稳
  • 示例节选:
    let isShaking = false;<br>uni.onAccelerometerChange(res => {<br>  const acc = Math.sqrt(res.x**2 + res.y**2 + res.z**2);<br>  if (!isShaking && acc > 2.0 && acc - lastAcc > 1.8) {<br>    isShaking = true;<br>    setTimeout(() => isShaking = false, 1500);<br>    uni.showToast({ title: '摇到了', icon: 'none' });<br>  }<br>  lastAcc = acc;<br>});

App真机调试时onAccelerometerChange无响应的常见原因

模拟器永远返回假数据,必须真机测试;但即使真机,也有几个硬性条件卡住。

  • iOS 需在 manifest.json → App SDK 配置 → iOS 设置 中勾选「加速度计」,否则 API 直接静默失效
  • Android 9+ 要求 targetSdkVersion ≥ 29 时,默认禁止后台传感器访问,确保 uni-app 的 AndroidManifest.xml 中没有禁用 android.permission.ACTIVITY_RECOGNITION(HBuilderX 3.7+ 已默认添加)
  • 某些定制 ROM(如华为 EMUI、小米 MIUI)会限制后台传感器,需手动在系统设置里给 App 开启「运动传感器」权限,位置通常在「应用管理 → 权限管理 → 运动与健康」
  • 调用 uni.startAccelerometer 后,务必检查回调里的 err 字段,失败时 err.errMsg 可能是 "startAccelerometer:fail not support"(说明权限或配置未生效)

实际写的时候最容易卡在权限配置和防抖时机上,尤其是 iOS 打包前漏勾那个开关,或者 Android 上没手动开系统级运动权限——这些地方不报错,但就是不动。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

uni-app 微信

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2763

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6023

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6970

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6738

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

963

5

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

80

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

60

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

220

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习