别再乱摇手机了！微信小程序加速度传感器(wx.onAccelerometerChange)的5个高级用法

最新推荐文章于 2026-04-16 11:33:14 发布

原创

最新推荐文章于 2026-04-16 11:33:14 发布 · 508 阅读

标签

#微信小程序 #加速度传感器 #交互设计

收录于

解锁微信小程序加速度传感器的隐藏潜力：5个超越摇一摇的高级应用

手机里的加速度传感器就像一位沉默的舞者，默默记录着设备的每一个动作。大多数开发者只让它跳最简单的"摇一摇"，却不知道它能跳出多么复杂的舞蹈。今天，我们就来探索wx.onAccelerometerChange()这个API的更多可能性，让你的小程序交互体验提升到一个全新水平。

1. 精准手势识别：从摇晃到精细控制

传统摇一摇功能简单粗暴，但加速度传感器能做的远不止于此。通过分析x、y、z三个轴向的加速度变化模式，我们可以识别出各种复杂手势。

let gestureHistory = [];
wx.onAccelerometerChange(function(res) {
    // 记录最近10次加速度数据
    gestureHistory.push({
        x: res.x,
        y: res.y,
        z: res.z,
        timestamp: Date.now()
    });
    
    if(gestureHistory.length > 10) {
        gestureHistory.shift();
        recognizeGesture(gestureHistory);
    }
});

function recognizeGesture(history) {
    // 计算各轴变化幅度
    const xDiff = history[9].x - history[0].x;
    const yDiff = history[9].y - history[0].y;
    const zDiff = history[9].z - history[0].z;
    
    // 识别上划手势
    if(yDiff < -1.5 && Math.abs(xDiff) < 0.5 && Math.abs(zDiff) < 0.5) {
        console.log('上划手势识