最近在开发微信公众平台时,有一个需求是通过摇一摇进行互动活动,刚开始以为要用微信内的摇一摇功能,但是微信根本没有提供接口(摇一摇是调用手机硬件,根本不能调用),所以只能换一种思路,微信可以跟我们的服务器端对接,所以只能通过一些前端的脚本语言去解决。幸运的是:H5 + 提供了对手机硬件资源访问的封装API,这样的话,实现摇一摇和震动就有了途径,不止这些,通过这些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来实现不通的功能,来实现跨平台了,关键代码如下




1. if (window.DeviceMotionEvent) {  
2. '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.     }



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.     }