首页 新闻 会员 周边 捐助

js如何监听苹果手机浏览器的摇一摇？

0
悬赏园豆：5 [已解决问题] 解决于 2020-10-21 16:05

网上找了很多这方面的代码，

测试结果：很多都只支持安卓浏览器，对苹果浏览器都不起作用

大da脸的主页 大da脸 | 初学一级 | 园豆：73
提问于：2020-10-20 11:00
< >
分享
最佳答案
0

蘋果瀏覽器是指Safari？

收获园豆：5
RosonJ | 老鸟四级 |园豆：4910 | 2020-10-20 14:14

也不一定，我翻遍了网上js摇一摇的脚本，基本上安卓都有效果，唯独苹果系统没有效果，苹果手机上不管什么浏览器都不行，不仅仅是Safari，似乎是苹果系统关闭了跟摇一摇相关的接口啥的

大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:16

@大da脸:
你用的是哪個H5 接口，我查查，很有可能是Apple手機上的實作方式不同

RosonJ | 园豆：4910 (老鸟四级) | 2020-10-21 15:21

@RosonJ: 稍等

大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:22 
这是写的一个简单页面：安卓测试有效，苹果手机浏览器全部无效，所用到的js我下面再贴一个<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<p>摇一摇!</p>

<script src="/Scripts/Shake.js"></script>

<script>
//创建实例
var myShakeEvent = new Shake({
    threshold: 10, // 摇动阈值
    timeout: 500 // 事件发生频率，是可选值
});
// 监听设备动作
myShakeEvent.start();
 
//添加一个监听事件
window.addEventListener('shake', shakeEventDidOccur, false);
 
//摇动回调函数
function shakeEventDidOccur() {
    alert('摇了一次');
}
</script>
</body>
</html>
大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:23 
Shake.js：
(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Shake = factory(global, global.document);
    }
} (typeof window !== 'undefined' ? window: this,
function(window, document) {
    'use strict';
    function Shake(options) {
        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;
        this.options = {
            threshold: 15,
            //默认摇动阈值
            timeout: 1000 //默认两次事件间隔时间
        };
        if (typeof options === 'object') {
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this.options[i] = options[i];
                }
            }
        }
        //使用date防止重复调用
        this.lastTime = new Date();
        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
        //创建自定义事件
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }
    }
    //重置时间计时器
    Shake.prototype.reset = function() {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };
    //开始监听 devicemotion
    Shake.prototype.start = function() {
        this.reset();
        if (this.hasDeviceMotion) {
            window.addEventListener('devicemotion', this, false);
        }
    };
    //停止监听 devicemotion
    Shake.prototype.stop = function() {
        if (this.hasDeviceMotion) {
            window.removeEventListener('devicemotion', this, false);
        }
        this.reset();
    };
    //计算是否触发摇动
    Shake.prototype.devicemotion = function(e) {
        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;
        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }
        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);
        if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
            //计算上次触发摇动到现在的间隔时间
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();
            if (timeDifference > this.options.timeout) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }
        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;
    };
    //事件处理
    Shake.prototype.handleEvent = function(e) {
        if (typeof(this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };
    return Shake;
}));
大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:25

@RosonJ: 这是第二个js方法：

<script>
var jsonObject=null;
        // 当页面加载完以后会执行window.onload
        window.onload = function() {
            var times = -1; // 记录摇动次数
            var last_time = 0;
            var borderSpeed = 800;  // 加速度变化临界值
            var x = y = z = last_x = last_y = last_z = 0;
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion',shake,false);
            }
            else
            {
                alert('您的设备不支持摇一摇哦');
            }
            // 每次手机移动的时候都会执行下面shake函数的代码
            function shake(eventData)
            {
                var acceleration = eventData.accelerationIncludingGravity;
                var curTime = new Date().getTime();
                var diffTime  = curTime-last_time;
                // 每隔100ms进行判断
                if (diffTime>100) {
                    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>borderSpeed) {
                        times++;
                        document.getElementById("text").innerHTML=times+" times";
                        // 用户的微信昵称和头像连接发送一次即可，不需要每次都发送
                        if (times==0)
                        {
                            document.forms["insertForm"].headimg.value =img ;
                            document.forms["insertForm"].user.value = nickname;
                        }
                        document.forms["insertForm"].time.value = times;
                    }
                    last_time = curTime;
                    last_x = x;
                    last_y = y;
                    last_z = z;
                }
            }
        }

</script>
大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:30

你这边应该可以搜到国外的资料，可以查下国外的资料有没有相关H5摇一摇的代码

大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:44

@大da脸:
恩，我確認一下

RosonJ | 园豆：4910 (老鸟四级) | 2020-10-21 15:45

@大da脸:
查詢瀏覽器對"ondevicemotion"這個API的支援如下圖，只有列出IOS Safari，沒有IOS的其他瀏覽器資訊，而IOS Safari是不支援的

另一個資訊是下圖，有開發者分享，必須是HTTPS的站，IOS才會啟用"ondevicemotion"，這個我認為可能性較小，你的站是HTTPS嗎？
(下面NodeJS的語法可以忽略)

RosonJ | 园豆：4910 (老鸟四级) | 2020-10-21 15:58

@RosonJ:

第一个图里绿色代表支持的是吧？红色和灰色是怎么？

第二个https的这边也测试了 ，无效

大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:59

@大da脸:
紅色是不支援
灰色是未測試(未知)

RosonJ | 园豆：4910 (老鸟四级) | 2020-10-21 16:03

@RosonJ: ok,非常感谢

大da脸 | 园豆：73 (初学一级) | 2020-10-21 16:05
其他回答(1)
0

我记得得给位置权限？实现应该是位置晃来晃去吧？无非是灵敏度问题。

顾晓北 | 园豆：10898 (专家六级) | 2020-10-21 13:49

这个我真的不清楚了

支持(0) 反对(0) 大da脸 | 园豆：73 (初学一级) | 2020-10-21 15:17

@大da脸: 我记得之前搞摇一摇的时候，安卓确实没问题，但4s和5当时是5正常，但4得摇很大幅度才行。。。

支持(0) 反对(0) 顾晓北 | 园豆：10898 (专家六级) | 2020-10-21 16:25

@顾晓北: 那当时用苹果测试的时候你记得是哪种浏览器吗？

支持(0) 反对(0) 大da脸 | 园豆：73 (初学一级) | 2020-10-21 17:36

@大da脸: 4s那时候还没chrome吧？所以理论上应该是safri

支持(0) 反对(0) 顾晓北 | 园豆：10898 (专家六级) | 2020-10-21 20:46
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。