H5-Seite realisiert Shake (eingebettet in WeChat + APP)

Die Anforderungen erfordern, dass die Seite auf die Schaltfläche zum Schütteln klickt oder das Telefon schüttelt, um die Lotterie auszulösen.

Die Seite wird im WeChat-Miniprogramm + APP angezeigt;

Ich habe einige Methoden im Internet gefunden. Das WeChat SDK bietet keine Shake-Methode zum Aufrufen der H5-Seite, daher habe ich die folgende Methode gewählt:

Der h5-Code bestimmt, ob es sich bei der laufenden Umgebung um eine APP oder eine Nicht-APP handelt

1.In der APP 

Um auf der sicheren Seite zu sein, rufen Sie H5 die von der APP bereitgestellte Shake-Methode auf (Sie müssen mit dem Entwickler auf der APP-Seite verhandeln). H5 ruft die Methode direkt auf. Nachdem der Shake ausgelöst wurde, muss die Shake-Methode geschlossen werden, andernfalls muss die Shake-Methode geschlossen werden Die Schüttelmethode wird nach der Ziehung gezeichnet. Durch Schütteln des Telefons wird sie weiterhin ausgelöst.

2. Nicht innerhalb der APP

Bei Verwendung von shake.js lautet der Code wie folgt:

/*
 * Author: Alex Gibson
 * https://github.com/alexgibson/shake.js
 * License: MIT license
 */

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

    // toast提示
    function showToast(str){
        $('.toast-box').html(str)
        $('.toast-box').show()
        var tempTimeOut = setTimeout(function(){
            $('.toast-box').html('')
            $('.toast-box').hide()
            clearTimeout(tempTimeOut)
        },5000)
    }

    //重置时间计时器
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };

    //开始监听 devicemotion
    Shake.prototype.start = function () {
        this.reset();
        var ua = navigator.userAgent.toLowerCase();
        console.log('~~~~this.hasDeviceMotion~~~~~~~',this.hasDeviceMotion)
        if (this.hasDeviceMotion) {
            if (ua.indexOf("like mac os x") > 0) {
                // 正则判断手机系统版本
                var reg = /os [\d._]*/gi ;
                var verinfo = ua.match(reg) ;
                var version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
                var arr=version.split(".");
                console.log('获取手机系统版本',version+'~~~~~~~'+arr[0]+"."+arr[1]+"."+arr[2]) //获取手机系统版本
                console.log('比较1111：',arr[0]>12,arr[1]>2,arr[0]>13||(arr[0]>12&&arr[1]>2))
                if (arr[0]>13||(arr[0]>12&&arr[1]>2)) {  //对13.3以后的版本处理,包括13.3
                    DeviceMotionEvent.requestPermission().then(permissionState => {
                        if (permissionState === 'granted') { //已授权
                            window.addEventListener('devicemotion', this, false);//摇一摇
                        } else if(permissionState === 'denied'){// 打开的链接不是https开头
                            showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')
                            // console.log("当前IOS系统拒绝访问动作与方向。请退出微信，重新进入活动页面获取权限。")
                        }
                    }).catch((err)=>{
                        showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')
                        // showToast('苹果设备申请摇动权限')
                        // ios13granted();
                        	// layer.open({
							// 	content: '<div style="height: 50px; text-align: center; padding-top: 20px">苹果设备申请摇动权限</div>',
							// 	btn: '允许',
							// 	// style: 'padding: 50px 30px;',
							// 	shadeClose: false,
							// 	yes: function(index){
							// 		ios13granted();
							// 		layer.close(index);
							// 	}
							// })
                    });
                }else{  //13.3以前的版本
                    console.log('ios13.3以前的版本')
                    window.addEventListener('devicemotion', this, false);
                }
            } else {
                window.addEventListener('devicemotion', this, false);
            }
        }
    };
    
    function ios13granted() {
        if (typeof DeviceMotionEvent.requestPermission === 'function') {
            DeviceMotionEvent.requestPermission().then(permissionState => {
                if (permissionState === 'granted') { //已授权
                    window.addEventListener('devicemotion', this, false);//摇一摇
                    // var myShakeEvent = new Shake({
                    //     threshold: 12
                    // });
                    // myShakeEvent.start();
                    // window.addEventListener('shake', function () {
                    //     start();
                    // }, false); //摇一摇
                } else if(permissionState === 'denied'){// 打开的链接不是https开头
                    showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')
                    console.log("当前IOS系统拒绝访问动作与方向。请退出微信，重新进入活动页面获取权限。")
                }
            }).catch((error) => {
                showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')
                console.log("请求设备方向或动作访问需要用户手势来提示")
            })
        } else {
            // 处理常规的非iOS 13+设备
            console.log("处理常规的非iOS 13+设备")
        }
    }
    //停止监听 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))) {
            //calculate time in milliseconds since last shake registered
            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;
}));

Eingeführt in die h5-Seite

<script type="text/javascript" src="shake.js"></script>

 //创建实例
    var myShakeEvent = new Shake({
        threshold: 12 // 摇动阈值
    });
    // 监听设备动作
    myShakeEvent.start();

    //添加一个监听事件
    window.addEventListener('shake', function () {
        // start();
        console.log('摇一摇')
    }, false);

Beachten:

1. Diese Methode wird beim lokalen gemeinsamen Debuggen nicht ausgelöst, da der Link zur h5-Seite zum Auslösen mit https://... beginnen muss (dies ist eine besondere Gefahr) und WeChat seine Richtlinien und den Link angepasst hat Zur h5-Seite muss eine SSL-Verschlüsselung verwendet werden. Zertifikat.

2. Shake kann in Versionen vor iOS 13.3 ausgelöst werden. Spätere Versionen müssen kompatibel sein, und ein Popup-Fenster, das es Benutzern ermöglicht, manuell anzuklicken, ist erforderlich, damit Benutzer Aktionen und Anweisungen autorisieren können. (erfordert https-Protokoll)

Wenn es wirklich nicht ausgelöst wird, bitten Sie den Designer, einen Punkt-für-Punkt-Stil hinzuzufügen. Wenn es beim Schütteln des Telefons wirklich nicht ausgelöst wird, verwenden Sie Tap-to-Dot, um es auszulösen.

3. Über den Shake-Soundeffekt

Wenn es sich um eine von der aufrufenden APP ausgelöste Methode handelt, hat sie möglicherweise eigene Soundeffekte (dies hängt davon ab, wie der APP-Entwickler die Methode definiert).

Wenn es sich nicht um eine von der aufrufenden APP ausgelöste Methode handelt, kann sie auf folgende Weise ausgelöst werden:

Soundeffekt: https://download.csdn.net/download/tt18473481961/87512465

<audio preload="" id="sing"><source src="images/sing.mp3" type="audio/mp3"></audio>

#sing {
  display: none;
}

var sing=document.getElementById("sing");

sing.play();

4. Bei einigen iOS-Telefonen ist beim Schütteln der play()-Methode kein Ton zu hören.

Binden Sie ein Touchstart-Ereignis (es kann an das erste angeklickte Element gebunden werden. Es ist am besten, es nach nur einer Verwendung zu entfernen. Die Bindung an Touchend kann theoretisch auch erfolgen, muss jedoch angeklickt werden, um wirksam zu sein. Touchend funktioniert nach dem Schieben nicht mehr . .), nennen Sie es .load()und rufen Sie es dann mit anderen Methoden auf .paly(), um den Ton reibungslos abzuspielen.

var sing=document.getElementById("sing");
$(".start").on("touchstart",function(){ // 为了解决iOS手机不点击摇一摇按钮直接调play()不发出声音
	console.log('touchstart-播放音频',document.getElementById("sing"))
	sing.load()
	sing.pause()
})
// 在其他方法中嗲用音频播放
sing.play(); // 播放声音