H5页面实现摇一摇(微信+APP内嵌入使用)

需求要求实现页面点击按钮摇一摇或者摇一摇手机触发抽奖。

页面会展示在微信小程序+APP中;

我在网络上找了一些方法,微信sdk中并未提供摇一摇的方法给H5页面调用,所以我采取以下方法:

h5代码判断运行环境是APP还是非APP

1.APP内 

保险起见,调用APP提供给H5这边的摇一摇方法(要和APP端的开发人员协商),h5直接调用方法,摇一摇触发之后要关闭这个摇一摇方法,不然抽完奖之后摇一摇手机还是会触发。

2.非APP内

使用shake.js,代码如下:

/*
 * 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: '
苹果设备申请摇动权限
', // 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; }));

在h5页面内引入

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

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

注意:

1、本地联调的时候这个方法不会触发,因为h5页面的链接开头必须是https://…才会触发(这个特别坑),而且微信调整了政策了,h5页面的链接必须使用ssl加密的证书。

2、在ios13.3之前的版本中可以触发摇一摇,之后的版本需要兼容,需要制作一个让用户能手动点击的弹框,才能使用户授权动作与方向的权限。(需使用https协议)

如果实在不触发,那就让设计师增加一个点一点的样式,晃动手机实在不触发那就通过点一点触发

3.关于摇一摇音效

如果是调用的APP抛出的方法,那可能是自带音效的(要看APP开发人员是怎么定义的方法)

不是调用的APP抛出的方法的话,那可以通过以下方式触发:

音效:https://download.csdn.net/download/tt18473481961/87512465



#sing {
  display: none;
}

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

sing.play();

4.关于部分ios手机摇一摇调用play()方法没有声音

绑定一个touchstart事件(可以绑给最先点击的元素,只用一次就移除的最佳,绑给touchend理论也可以,不过要click那样的才有效,滑动后才touchend的不起作用。。。),调用.load(),之后在其他方法中调用.paly()就可以顺利的播放声音了。

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

你可能感兴趣的:(前端)