Briefly describe how the WeChat applet realizes the various needs of gestures

Gestures are still very important for the operating experience of mobile phone users, especially those who want some effects! In order to achieve some effects of gestures, we often use canvas, interactive and other applications. Guang, today we will mainly take a look at how gestures are implemented in the WeChat applet. We mainly introduce the implementation of WeChat mini program gestures from the following two aspects.

• Previous: Single touch point and multi-touch point: Let’s take a look at the gesture data and multi-touch point support of the WeChat applet

• Next: Writing wxGesture parsing class: parsing left slide, right slide, up slide, slide down and expansion (next article)
  

Demo

In order to study whether the mini program supports multiple fingers, you need to use touchstart, touchmove, touchend

#[AppleScript]

Plain text view Copy code

// index.wxml

##[AppleScript]

Plain text view

Copy code

//index.js
touchstartFn: function(event){
    console.log(event);
  },
  touchmoveFn: function(event){
    console.log(event);
    // console.log("move: PageX:"+ event.changedTouches[0].pageX);
  },
  touchendFn: function(event){
    console.log(event);
    // console.log("move: PageX:"+ event.changedTouches[0].pageX);
  }

First of all, about single touch points, multi-touch points

# #Official document: changedTouches: The data format of changedTouches is the same as touches. Indicates a changed touch point, such as changing from nothing to something (touchstart), changing position (touchmove), and changing from something to nothing (touchend, touchcancel).

#[AppleScript]

Plain Text View

Copy code

"changedTouches":[{ 
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]

Real machine effect

• 
  

  ##After implementing the above Demo, the simulator cannot see the data of multiple touch points, so you need a real device to test.

Look at the log information of the real machine

##Save touch point data in sequence in changedTouches, so the applet itself supports multi-touch point gestures Conclusion

• ##Imagination: Since the gestures of the mini program support multi-touch, and If the relevant path can be obtained, then the calculation of the relevant path is also feasible.
  Scenario: Multi-touch interaction effects, finger drawing, etc.

Touch point data storage
In order to be able to analyze the path of the touch point, At least for simple gestures, such as left swipe, right swipe, up, and down, we need to save all the data of the path.

Touch events

• ##Touch trigger events are divided into "touchstart", "touchmove" , "touchend", "touchcancel" four

  
  

Storage data

• [AppleScript]
  Plain text view

Copy code

var _wxChanges = [];
var _wxGestureDone = false;
const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];
// 收集路径
function g(e){
    if(e.type === "touchstart"){
        _wxChanges = [];
        _wxGestureDone = false;
    }
    if(!_wxGestureDone){
        _wxChanges.push(e);
        if(e.type === "touchend"){
            _wxGestureDone = true;  
        }else if(e.type === "touchcancel"){
            _wxChanges = [];
            _wxGestureDone = true; 
        }
    }
}

The above is the detailed content of Briefly describe how the WeChat applet realizes the various needs of gestures. For more information, please follow other related articles on the PHP Chinese website!