html5之摇一摇

描述

项目初始阶段调研了摇一摇功能，看了下设备传感器API，在此贴上调研结果，方便后续开发参考和绕坑。

实现原理

1.微信摇一摇事件需要有硬件支撑，必须要求手机中有陀螺仪
2.在JS中给window添加ondevectionmotion事件。该事件在手机晃动，即手机中的陀螺仪发生旋转，该事件会触发
3.触发ondevectionmotion事件，会产生一个事件对象，通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象
4.重力加速器对象中含有陀螺仪的坐标，通过重力加速器对象.x - .y - .z 获取陀螺仪当前的坐标

---

核心代码：

//需要判断设备是否支持
if (window.DeviceMotionEvent) {
    window.addEventListener(´devicemotion´, deviceMotionHandler, false);
    alert('摇一摇');
} else {
    alert('抱歉，你的手机配置实在有些过不去，考虑换个新的再来试试吧');
}

var SHAKE_THRESHOLD = 3000;//摇动的阀值
var lastUpdate = 0;//变量保存上次更新的时间
var x, y, z, last_x, last_y, last_z;// x、y、z记录三个轴的数据以及上一次出发的时间
var count = 0;//计数器
 
function deviceMotionHandler(eventData) {
   var acceleration = eventData.accelerationIncludingGravity;// 获取含重力的加速度
   var curTime = new Date().getTime();// 获取当前时间
   var diffTime = curTime -lastUpdate;//时间差

   // 固定时间段
   if (diffTime > 100) {
      lastUpdate = curTime;
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;
     var speed = Math.abs(x+y+z-last_x-last_y-last_z) / diffTime * 10000;//速度
     //在阀值内
     if(speed  > SHAKE_THRESHOLD){
        count++;
        alert('摇的很给力');
     }
     last_x = x;
     last_y = y;
     last_z = z;
 }
}

看到一些较好的案例，源码贴上来：

源码在此
源码在此

经过测试，安卓大部分手机已经可以实现摇一摇功能，并触发音频效果，而在ios13以上的苹果系统和最新版本的微信（7.0.12）重力感应失效，无法触发devicemotion。这是由于，在IOS13+系统，苹果为了手机的安全性，导致重力感应需要用户主动进行触发后才可以正常使用。所以必须满足下面两个条件：

1. 需要使用https协议，http下不工作
2. 苹果陀螺仪的授权

需要一个按钮之类的调用授权，允许摇一摇代码：

function permission () {
    if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
        // (optional) Do something before API request prompt.
        DeviceMotionEvent.requestPermission()
            .then( response => {
            // (optional) Do something after API prompt dismissed.
            if ( response == "granted" ) {
                window.addEventListener( "devicemotion", (e) => {
                    // do something for 'e' here.
                })
            }
        })
            .catch( console.error )
    } else {
        alert( "DeviceMotionEvent is not defined" );
    }
}

• 苹果授权时候，会弹出comfirm弹窗，确认是否授权重力感应，暂时有三个返回值。
• 如果在http下，授权只会返回denied，所以确认在!!#ff0000 https!! 下
• 这里需要注意，如果用户取消了授权，将在短时间内无法再次授权使用，因此可以在授权前进行提示，提高用户体验性
• 目前确认主动触发的事件可以是click，touch等

贴上官方回复：
https://developers.weixin.qq.com/community/develop/doc/000a00388a80681abc1af91f156000?jumpto=comment&commentid=000604015c01a001df1a4cc67578

本文参考文章：
https://www.cnblogs.com/qieguo/p/5448786.html
https://blog.csdn.net/yuyang2013/article/details/21547557
https://blog.csdn.net/weixin_41635750/article/details/107710753