How WeChat mini programs implement various needs for 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 mainly look at how 微信小program gestures are implemented. 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

// index.wxml

//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 and multiple touch points

##Official documentation: changedTouches: changedTouches The data format 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).

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

• Real machine effect
  

realization After 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

设想: 既然小程序的手势是支持多触摸，而且可以获取到相关的路径，那么相关路径计算也是可行的。
场景: 多触摸交互效果，手指绘制等

触摸点数据保存

为了能够来分析触摸点的路径，最起码是简单的手势，如左滑、右滑、上滑、下滑，我们需要保存起路径的所有数据。

• 触摸事件
  

触摸触发事件分为"touchstart", "touchmove", "touchend","touchcancel"四个

• 存储数据

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 How WeChat mini programs implement various needs for gestures. For more information, please follow other related articles on the PHP Chinese website!