web移动网页摇一摇实现打开咨询连接的方法-有客帮

我们都知道微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的web页面中，很少有机会去用到这个功能，但也不代表这个功能不可以用，今天余斗就教大家如何在移动端网页利用摇一摇实现一些有趣的功能。

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

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

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

二、获取设备加速度信息 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://#”);

奉上一段模拟微信摇一摇的全部代码：点击下载

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

以商务通为例，我们可以先定义一个打开商务通的函数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 弹框\播放音乐,内置浏览器弹框\播放音乐。至于其他链接，大家可自行扩展，代入即可。

转载请注明：有客帮 » web移动网页摇一摇实现打开咨询连接的方法

与本文相关的文章