Home > Article > WeChat Applet > 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
Plain text view Copy code
// index.wxml
##[AppleScript]
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
"changedTouches":[{
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]
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
Storage data
[AppleScript]
Plain text view
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!