移动端网页实现摇一摇打开咨询连接的方法

文章热词:移动端网页摇一摇

日期:2019-03-07 09:49 by 杨国伟 555 0 收藏
我要分享

摘要: 我们都知道微信的摇一摇功能很强大,这个利用了手机的运动传感器装置的功能可以做很多有趣的事情,而在一般的web页面中,很少有机会去用到这个功能,但也不代表这个功能不可以用。

在HTML5,devicemotion事件deviceorientation特性的运动传感器的封装时间装置,你可以通过改变运动时间获取设备的状态,加速和其他数据(有另一个角度deviceorientation事件提供设备,定位等信息)。

而我们可以在前端通过DeviceMotion对设备运动状态的判断,帮助我们在网页上就实现“摇一摇”的交互效果。

一、首先把监听时间绑定给 deviceMotionHandler

//先判断设备是否支持HTML5摇一摇功能
if (window.DeviceMotionEvent) {
//获取移动速度,得到device移动时相对之前某个时间的差值比
window.addEventListener('devicemotion', deviceMotionHandler, false);
}else{
alert('您好,你目前所用的设置好像不支持重力感应哦!');
}

二、获取设备加速度信息  accelerationIncludingGravity

function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity,
x, y, z;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
document.getElementById("status").innerHTML = "x:"+x+"<br/>y:"+y+"<br/>z:"+z;
}

“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。

三、 而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值

//设置临界值,这个值可根据自己的需求进行设定,默认就3000也差不多了
var shakeThreshold = 3000;
//设置最后更新时间,用于对比
var lastUpdate = 0;
//设置位置速率
var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;

我们在这里设置100毫秒进行一次位置判断,若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值,则判断设备进行了摇晃操作。

以上三点就可以实现在web端的摇一摇功能,那么我们就通过这个功能来实现摇一摇打开新的链接,这里打开新链接的代码我们用:

//链接自行替换
window.open(
"http://www.yudouyudou.com"
);

奉上一段模拟微信摇一摇的全部代码:点击下载(解压密码为yudouyudou)

这个代码能帮我们实现什么呢?最常见的莫过于企业站和医疗站在移动端摇一摇打开咨询窗口了,但是在使用的过程中,余斗发现,通过上面打开新连接方法是无法正确返回到上一页的,也就是一旦摇一摇打开聊天窗口,就无法返回网站了,这算是一个用户体验极差的设定,我们继续优化。

以商务通为例,我们可以先定义一个打开商务通的函数swt()

//商务通引用(启用商务通时开启,商务通自带js请自行引用
function swt(e)
{   
    if(e!="" && e!=null){
        openZoosUrl('chatwin','&e='+escape(e));
        LR_HideInvite();
        return false;
    }else{
        openZoosUrl();
        LR_HideInvite();
        return false;
    }
}

在摇一摇时,直接执行此函数(完整js代码):

            //先判断设备是否支持HTML5摇一摇功能
            if (window.DeviceMotionEvent) {
           //获取移动速度,得到device移动时相对之前某个时间的差值比
           window.addEventListener('devicemotion', deviceMotionHandler, false);
            }else{
                alert('您好,你目前所用的设置好像不支持重力感应哦!');
            }
            //设置临界值,这个值可根据自己的需求进行设定,默认就3000也差不多了
            var shakeThreshold = 3000;
            //设置最后更新时间,用于对比
            var lastUpdate = 0;
            //设置位置速率
            var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;
            function deviceMotionHandler(event){
               //获得重力加速
                var acceleration =event.accelerationIncludingGravity;
                //获得当前时间戳
                var curTime = new Date().getTime();
                if ((curTime - lastUpdate)> 100) {
                    //时间差
                    var diffTime = curTime -lastUpdate;
                    lastUpdate = curTime;
                    //x轴加速度
                    curShakeX = acceleration.x;
                    //y轴加速度
                    curShakeY = acceleration.y;
                    //z轴加速度
                    curShakeZ = acceleration.z;
                    var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ)/ diffTime * 10000;
                    if (speed > shakeThreshold) {
                        //播放音效
                          shakeAudio.play();
                        //商务通传参
                          swt('M站通用-摇一摇-咨询');
                    }
                    lastShakeX = curShakeX;
                    lastShakeY = curShakeY;
                    lastShakeZ = curShakeZ;
                }
            }
            //预加摇一摇声音
            var shakeAudio = new Audio();
           //摇一摇声音路径
            shakeAudio.src = '/sound/shake_sound.mp3';
            var shake_options = {
                    preload : 'auto'
            }
            for(var key in shake_options){
                    if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){
                    shakeAudio[key] = shake_options[key];
                    }
            }

这样就完美实现摇一摇打开咨询连接了,十分方便。经过测试发现IOS:Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐。Andriod:UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器 弹框\播放音乐。至于其他链接,大家可自行扩展,代入即可。


余斗

上一篇:商务通链接传递参数的扩展使用

下一篇:HTTP协议三次握手过程详解


评论