How to use JS+H5 to implement WeChat shake-JS Tutorial-php.cn

This time I will show you how to use JS H5 to implement WeChat shake, and what are theprecautions 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

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

The first stepis to shake the phone to change the color

     HTML5 手机摇一摇  
  手机摇一摇，改变屏幕颜色。

Copy after login

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.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>      摇一摇        
          
  
   您今天还可以摇次  
  正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。

Copy after login

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!