Comment mettre en œuvre divers besoins de gestes dans l'applet WeChat

Les gestes sont toujours très importants pour l'expérience de fonctionnement des utilisateurs de téléphones mobiles, en particulier ceux qui souhaitent certains effets. Afin d'obtenir certains effets de gestes, nous utilisons souvent des applications canevas, interactives et autres ! , aujourd'hui, nous examinerons principalement comment les gestes sont mis en œuvre dans WeChatMini Programme. Nous présentons principalement la mise en œuvre des gestes du mini-programme WeChat sous les deux aspects suivants.

• Partie 1 : Point de contact unique et point multi-touch : Jetons un coup d'œil aux données gestuelles et à la prise en charge des points multi-touch de l'applet WeChat

• Suivant : Écriture du cours d'analyse wxGesture : analyse de la diapositive gauche, de la diapositive droite, de la diapositive supérieure, de la diapositive inférieure et de l'expansion (article suivant)
  

Démo

Afin d'étudier si le mini programme prend en charge plusieurs doigts, vous devez utiliser 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);
  }

Tout d'abord, à propos du point de contact unique, du point multi-touch

Documentation officielle : changesTouches : Le format de données des changesTouches est le même que celui des touches. Indique un point de contact modifié, par exemple passer de rien à quelque chose (touchstart), changer de position (touchmove) et passer de quelque chose à rien (touchend, touchcancel).

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

• Véritable effet machine
  

Après avoir implémenté la démo ci-dessus, le simulateur ne peut pas voir les données de plusieurs points de contact, vous avez donc besoin d'un véritable appareil pour tester.

Regardez les informations du journal de la vraie 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; 
        }
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!