JavaScript+H5实现微信摇一摇功能

程序员文章站 2022-06-06 17:26:09

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的...

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。

其实h5+javascript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果。

第一步，实现手机摇动改变颜色

<!doctype html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 
 <title>html5 手机摇一摇</title> 
  <script type="text/javascript"> 
   var color = new array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff'); 
   if(window.devicemotionevent) { 
    var speed = 25; 
    var x = y = z = lastx = lasty = lastz = 0; 
    window.addeventlistener('devicemotion', function(){ 
     var acceleration =event.accelerationincludinggravity; 
     x = acceleration.x; 
     y = acceleration.y; 
     if(math.abs(x-lastx) > speed || math.abs(y-lasty) > speed) { 
      document.body.style.backgroundcolor = color[math.round(math.random()*10)%6]; 
     } 
     lastx = x; 
     lasty = y; 
    }, false); 
   } 
  </script> 
 </head> 
 <body> 
    手机摇一摇，改变屏幕颜色。 
 </body> 
</html>

主要是手机的devicemotionevent事件

第二步，微信摇一摇手势

相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个controller事件都可以。

<%@ page contenttype="text/html;charset=utf-8" language="java" %> 
<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> 
 <title>摇一摇</title> 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" > 
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/mydialog.css" rel="external nofollow" > 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script> 
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/mydialog.js"></script> 
 
 <script type="text/javascript"> 
   var shake_threshold = 1000; 
   var last_update = 0; 
   var last_time = 0; 
   var x; 
   var y; 
   var z; 
   var last_x; 
   var last_y; 
   var last_z; 
   var sound = new howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load(); 
   var findsound = new howl({ urls: ['/shake/sound/shake_match.mp3'] }).load(); 
   var curtime; 
   var isshakeble = true; 
 
   function init() { 
    if (window.devicemotionevent) { 
     window.addeventlistener('devicemotion', devicemotionhandler, false); 
    } else { 
     $("#cantshake").show(); 
    } 
   } 
 
   function devicemotionhandler(eventdata) { 
    curtime = new date().gettime(); 
    var difftime = curtime - last_update; 
    if (difftime > 100) { 
     var acceleration = eventdata.accelerationincludinggravity; 
     last_update = curtime; 
     x = acceleration.x; 
     y = acceleration.y; 
     z = acceleration.z; 
     var speed = math.abs(x + y + z - last_x - last_y - last_z) / difftime * 10000; 
  
     if (speed > shake_threshold && curtime - last_time > 1100 && $("#loading").attr('class') == "loading" && isshakeble) { 
      shake(); 
     } 
     last_x = x; 
     last_y = y; 
     last_z = z; 
    } 
   } 
 
   function shake() { 
    last_time = curtime; 
    $("#loading").attr('class','loading loading-show'); 
    $("#shakeup").animate({ top: "10%" }, 700, function () { 
     $("#shakeup").animate({ top: "25%" }, 700, function () { 
      $("#loading").attr('class','loading'); 
  
      findsound.play(); 
        //在此为摇动之后的事件，这里为调用controllergoshakeresult方法 
      window.location.href = "shakecontroller.do?goshakeresult&phonenumber=${phonenumber}&hdid=${hdid}&openid=${openid}"; 
     }); 
    }); 
    $("#shakedown").animate({ top: "40%" }, 700, function () { 
     $("#shakedown").animate({ top: "25%" }, 700, function () { 
     }); 
    }); 
    sound.play(); 
   } 
 
   //各种初始化 
   $(document).ready(function () { 
    howler.iosautoenable = false; 
    fastclick.attach(document.body); 
    init(); 
   }); 
 </script> 
</head> 
<body> 
 <table id="container"> 
   <tbody> 
       <tr> 
        <td class="container" colspan="2"> 
       <div id="shake"> 
        <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup"> 
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown"> 
         </div><div id="loading" class="loading"></div> 
        </td> 
     </tr> 
     <tr> 
      <td> 
       您今天还可以摇<input id="shakecount" name="shakecount" value="${leftcount}">次 
      </td> 
     </tr> 
     <tr> 
      <td>正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。</td> 
     </tr> 
    </tbody> 
 </table> 
</body> 
</html>

有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:

JavaScript+H5实现微信摇一摇功能