WeChat アプレットがジェスチャのさまざまなニーズをどのように実現するかを簡単に説明します

携帯電話ユーザー、特に何らかの効果を求めるユーザーの操作エクスペリエンスにとって、ジェスチャーは依然として非常に重要です。ジェスチャーの効果を実現するために、現在主に広く使用されているキャンバスやインタラクションなどがよく使用されます。 WeChat アプレットのジェスチャがどのように実装されているかを見てみましょう。 WeChatミニプログラムジェスチャーの実装を主に以下の2つの側面から紹介します。

• 上: シングルタッチポイントとマルチタッチポイント: WeChat アプレットのジェスチャーデータとマルチタッチポイントのサポートを見てみましょう

• 下: wxGesture 解析クラスの作成: 左スワイプの解析右スワイプ、上スワイプ、スライドと展開 (次の記事)
  

デモ

ミニプログラムが複数の指をサポートしているかどうかを調べるには、touchstart、touchmove、touchendを使用する必要があります

[AppleScript] プレーンテキストビュー コードをコピー

// index.wxml

[AppleScript] プレーンテキストビュー コードをコピー

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

まずはシングルタッチポイント、マルチタッチポイントについて

公式ドキュメント:changedTouches:changedTouchesのデータ形式はタッチと同じです。 無から何かへの変化(touchstart)、位置の変更(touchmove)、何かから無への変化(touchend、touchcancel)など、変化したタッチポイントを示します。

[AppleScript] プレーンテキストビュー コードをコピー

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

• 実機エフェクト
  

上記のデモを実装した後、シミュレーター複数のタッチポイントからのデータを確認できるため、テストするには実機が必要です。

実機のログ情報を見てください

タッチポイントデータはchangedTouchesに順番に保存されるため、アプレット自体がマルチタッチポイントジェスチャをサポートします

• 結論
  

想像力: ミニプログラムのジェスチャはマルチタッチをサポートしており、関連するパスを取得できるため、関連するパスの計算も可能です。
シナリオ: マルチタッチ インタラクション効果、指の描画など

タッチ ポイント データ ストレージ

タッチ ポイントの経路を分析できるようにするには、少なくとも次のような単純なジェスチャが必要です。左スワイプ、右スワイプ、上スワイプ、下スワイプ、パスのすべてのデータを保存する必要があります。

• タッチイベント
  

タッチトリガーイベントは、「touchstart」、「touchmove」、「touchend」、「touchcancel」の4種類に分かれています

• ストレージデータ
  

[AppleScript] プレーンテキストビュー コードをコピー

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

以上がWeChat アプレットがジェスチャのさまざまなニーズをどのように実現するかを簡単に説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。