H5调用手机振动实现

最近在开发微信公众平台时，有一个需求是通过摇一摇进行互动活动，刚开始以为要用微信内的摇一摇功能，但是微信根本没有提供接口（摇一摇是调用手机硬件，根本不能调用），所以只能换一种思路，微信可以跟我们的服务器端对接，所以只能通过一些前端的脚本语言去解决。幸运的是：H5 + 提供了对手机硬件资源访问的封装API，这样的话，实现摇一摇和震动就有了途径，不止这些，通过这些ＡＰＩ的调用对系统其他功能也可以访问 ，今天就介绍两个功能。

一、加速器的调用  

通过widow对象中DeviceMotionEvent 来判断 浏览器（手机）是否支持访问硬件资源，window.addEventListener('devicemotion', deviceMotionHandler, false);通过上一句代码来对该事件进行监听，第一个参数是事件类型，第二个参数是一个Handler 进行对事件的处理，通过var acceleration = eventData.accelerationIncludingGravity; 获得加速器对象，x = acceleration.x;y = acceleration.y;z = acceleration.z; 分别获取传感器三个分量的参数，这样就完成了对摇一摇参数的获取。

二、 手机震动的实现

    振动事件 同样是封装在widow.navigation对象中，通过 var vibrateSupport  = 'vibrate' in navigation  来检测浏览器是否支持调用手机振动事件。如果支持 为了兼容不通的浏览器 需要进行对vibrate 进行做不同的选择。navigator.vibrate = navigator || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; 然后在需要的地方 调用navigator.vibrate(3000), 就可以实现手机震动的了（该处震动三秒），同时期支持数组 如 navigator.vibrate.([300,200,300,200,300]),300是表示震动的毫秒数，200表示两次震动的时间间隔。

     同样对其他操作，通过对API的调用，实现也都十分简单，这样以来，我们完全可以通过H5来实现不通的功能，来实现跨平台了，关键代码如下

[javascript]  view plain  copy

1. if (window.DeviceMotionEvent) {  
2.         window.addEventListener('devicemotion', deviceMotionHandler, false);  
3.     }  
4.     var vibrateSupport = "vibrate" in navigator  
5.     if (vibrateSupport) { //兼容不同的浏览器  
6.         navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;  
7.     }  

[javascript]  view plain  copy

1. function deviceMotionHandler(eventData) {  
2.     var acceleration = eventData.accelerationIncludingGravity;  
3.     var currTime = new Date().getTime();  
4.     var diffTime = currTime - last_update;  
5.     console.info(diffTime);  
6.     if (diffTime > 100) {  
7.         last_update = currTime;  
8.         x = acceleration.x;  
9.         y = acceleration.y;  
10.         z = acceleration.z;  
11.         var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;  
12.         console.info(speed);  
13.         if (speed > SHAKE_THRESHOLD) {  
14.             //要一摇之后进行业务逻辑处理  
15.             doResult();  
16.         }  
17.           
18.           
19.         last_x = x;  
20.         last_y = y;  
21.         last_z = z;  
22.   
23.     }