How to use JS+H5 to implement WeChat shake

This time I will show you how to use JS H5 to implement WeChat shake, and what are the precautions for using JS H5 to implement WeChat shake. The following is a practical case, let's take a look.

The project was finally launched as scheduled, but there is a new activity to be done before the Spring Festival, similar to WeChat’s shake activity. We have also been working on WeChat public accounts, but it is still a bit difficult to call the WeChat Shake interface, because it only provides Shake peripherals, nearby people and a series of red envelope pages. Compared to our needs, we only need to shake The action of shaking is completely different.

In fact, the page written in H5

JavaScript can achieve the shaking effect by getting the screen length and width of the mobile phone and adding sound.

The first step is to shake the phone to change the color

nbsp;html> 
 
  
 <meta> 
 <meta> 
 <title>HTML5 手机摇一摇</title> 
  <script> 
   var color = new Array(&#39;#fff&#39;, &#39;#ff0&#39;, &#39;#f00&#39;, &#39;#000&#39;, &#39;#00f&#39;, &#39;#0ff&#39;); 
   if(window.DeviceMotionEvent) { 
    var speed = 25; 
    var x = y = z = lastX = lastY = lastZ = 0; 
    window.addEventListener(&#39;devicemotion&#39;, 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> 
  
  
    手机摇一摇，改变屏幕颜色。 
  

Mainly the DeviceMotionEvent

event of the phone

The second step, WeChat shake gesture

Compared with the first step, the shake gesture is added and the shake event is changed. Just add the method you want after the shake action, whether you want to enter the next page you create or trigger a Controller event.

 
 
 
 <meta> 
 <meta> 
 <meta> 
 <title>摇一摇</title> 
 <link> 
 <link> 
 <script></script> 
 <script></script> 
 <script></script> 
 <script></script> 
 
 <script> 
   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: [&#39;/shake/sound/shake_sound.mp3&#39;] }).load(); 
   var findsound = new Howl({ urls: [&#39;/shake/sound/shake_match.mp3&#39;] }).load(); 
   var curTime; 
   var isShakeble = true; 
 
   function init() { 
    if (window.DeviceMotionEvent) { 
     window.addEventListener(&#39;devicemotion&#39;, 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(&#39;class&#39;) == "loading" && isShakeble) { 
      shake(); 
     } 
     last_x = x; 
     last_y = y; 
     last_z = z; 
    } 
   } 
 
   function shake() { 
    last_time = curTime; 
    $("#loading").attr(&#39;class&#39;,&#39;loading loading-show&#39;); 
    $("#shakeup").animate({ top: "10%" }, 700, function () { 
     $("#shakeup").animate({ top: "25%" }, 700, function () { 
      $("#loading").attr(&#39;class&#39;,&#39;loading&#39;); 
  
      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> 
 
 
 

                                                                                    

         

                                         

          

         您今天还可以摇次        

正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。

    Sometimes you can really use another method to achieve the function you want. Attached picture: The original effect of the demo is:

           

   

After the revision

I believe that after reading the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vue key modifier event processing steps

##JS CSS3 to make image binding mouse move event amplification

The above is the detailed content of How to use JS+H5 to implement WeChat shake. For more information, please follow other related articles on the PHP Chinese website!