Décrivez brièvement comment l'applet WeChat réalise les différents besoins de gestes

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 implémentés dans l'applet WeChat. 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

[AppleScript] Vue en texte brut Copier le code

// index.wxml

[AppleScript] Affichage en texte brut Copier le 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);
  }

Tout d'abord, à propos des points de contact uniques, des points multi-touch

Document officiel : 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).

[AppleScript] Vue en texte brut Copier le code

"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

Enregistrez les données des points de contact dans l'ordre dans changesTouches, de sorte que l'applet elle-même prenne en charge les gestes multi-points de contact

• Conclusion
  

Imagination : puisque les gestes du mini programme prennent en charge le multi-touch , et Si le chemin pertinent peut être obtenu, alors le calcul du chemin pertinent est également réalisable.
Scénario : effets d'interaction multi-touch, dessin au doigt, etc.

Sauvegarde des données des points de contact

Afin de pouvoir analyser le chemin du point tactile. Au moins pour les gestes simples, tels que le balayage vers la gauche, le balayage vers la droite, vers le haut et vers le bas, nous devons enregistrer toutes les données du chemin.

• Les événements tactiles
  

Les événements de déclenchement tactile sont divisés en "touchstart", "touchmove " , "touchend", "touchcancel" quatre

• stocker les données
  

[AppleScript] Affichage en texte brut Copier le 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; 
        }
    }
}

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!