Beschreiben Sie kurz, wie das WeChat-Applet die verschiedenen Anforderungen von Gesten erkennt

Gesten sind immer noch sehr wichtig für das Bedienerlebnis von Mobiltelefonbenutzern, insbesondere für diejenigen, die einige Effekte erzielen möchten, verwenden wir häufig Canvas-, interaktive und andere Anwendungen Heute werfen wir vor allem einen Blick darauf, wie Gesten im WeChat-Applet implementiert werden. Wir stellen die Implementierung von WeChat-Miniprogrammgesten hauptsächlich unter den folgenden zwei Aspekten vor.

• Teil 1: Single Touch Point und Multi-Touch Point: Werfen wir einen Blick auf die Gestendaten und die Multi-Touch-Point-Unterstützung des WeChat-Applets

• Weiter: Schreiben einer wxGesture-Analyseklasse: Analysieren der linken Folie, der rechten Folie, der oberen Folie, der unteren Folie und der Erweiterung (nächster Artikel)
  

Demo

Um zu untersuchen, ob das Miniprogramm mehrere Finger unterstützt, müssen Sie touchstart, touchmove, touchend verwenden

[AppleScript] Einfache Textansicht Code kopieren

// index.wxml

[AppleScript] Einfache Textansicht Code kopieren

//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);
  }

Zunächst einmal über Single Touch Points, Multi-Touch Points

Offizielles Dokument: changesTouches: Das Datenformat von changesTouches ist das gleiche wie bei Berührungen. Zeigt einen geänderten Berührungspunkt an, z. B. den Wechsel von nichts zu etwas (touchstart), den Wechsel der Position (touchmove) und den Wechsel von etwas zu nichts (touchend, touchcancel).

[AppleScript] Einfache Textansicht Code kopieren

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

• Echter Maschineneffekt
  

Nach der Implementierung der obigen Demo kann der Simulator die Daten mehrerer Berührungspunkte nicht sehen, sodass Sie zum Testen ein echtes Gerät benötigen.

Sehen Sie sich die Protokollinformationen der realen Maschine an

Speichern Sie Berührungspunktdaten nacheinander in changesTouches, damit das Applet selbst Multi-Touchpunkt-Gesten unterstützt

• Fazit
  

Vorstellung: Da die Gesten des Miniprogramms Multi-Touch unterstützen , und Wenn der relevante Pfad ermittelt werden kann, ist die Berechnung des relevanten Pfads ebenfalls möglich.
Szenario: Multi-Touch-Interaktionseffekte, Fingerzeichnen usw.

Speicherung von Berührungspunktdaten

Um dies zu können Analysieren Sie den Pfad des Berührungspunkts. Zumindest für einfache Gesten wie Wischen nach links, Wischen nach rechts, nach oben und unten müssen wir alle Daten des Pfads speichern.

• Berührungsereignisse
  

Berührungsauslöserereignisse werden in „Touchstart“ und „Touchmove“ unterteilt " , "touchend", "touchcancel" vier

• Daten speichern
  

[AppleScript] Nur-Text-Ansicht Code kopieren

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; 
        }
    }
}

Das obige ist der detaillierte Inhalt vonBeschreiben Sie kurz, wie das WeChat-Applet die verschiedenen Anforderungen von Gesten erkennt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!