So implementieren Sie verschiedene Anforderungen an Gesten im WeChat-Applet

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 hauptsächlich einen Blick darauf, wie Gesten im WeChatMiniprogramm 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

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

Zunächst einmal zum Thema Single Touch Point, Multi-Touch Point

Offizielle Dokumentation: changesTouches: Das Datenformat von changesTouches ist das gleiche wie bei touches. 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).

"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, daher benötigen Sie zum Testen ein echtes Gerät.

Sehen Sie sich die Protokollinformationen der realen Maschine an

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

触摸点数据保存

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

• 触摸事件
  

触摸触发事件分为"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; 
        }
    }
}

Das obige ist der detaillierte Inhalt vonSo implementieren Sie verschiedene Anforderungen an Gesten im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!