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来实现不通的功能，来实现跨平台了，关键代码如下

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

function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity;var currTime = new Date().getTime();var diffTime = currTime - last_update;console.info(diffTime);if (diffTime > 100) {last_update = currTime;x = acceleration.x;y = acceleration.y;z = acceleration.z;var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;console.info(speed);if (speed > SHAKE_THRESHOLD) {//要一摇之后进行业务逻辑处理doResult();}last_x = x;last_y = y;last_z = z;}