WeChat開発入門 (4) タッチイベント

》》》イベントとは

• イベントはビュー層からロジック層への通信手段です。

• イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。

• イベントはコンポーネントにバインドでき、トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。

• イベント オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

》》》イベント分類

• touchstart 指タッチ

• touchmove タッチ後の指の動き

• touchcancel ポップアップや通話リマインダーなど、指タッチ操作が中断される

• touchend 指touch 動作終了

• tap 指に触れたら離れる

• longtap 指に触れたら350ms以上離れる

》》》イベントバインディング

イベントバインディングの書き方は同じですキーと値の形式を持つコンポーネントの属性。

• keyはbindまたはcatchで始まり、bindtap、catchtouchstartなどのイベントのタイプが続きます

• 値はstringであり、同じ名前の関数が対応するページで定義されている必要があります。そうしないと、イベントがトリガーされたときにエラーが報告されます。 binding イベント バインディングはバブリング イベントの上方へのバブリングを妨げませんが、catch イベント バインディングはバブリング イベントの上方へのバブリングを防ぐことができます。

ミニプログラムイベントの基本は上で簡単に紹介しましたが、ここで「イベント」の力を示します:

• クリック(タップ)

• ダブルクリック(dbtap)

• (ロングタップ)

• スライディング

• マルチタッチ

1. クリック

クリックイベントはタッチスタートとタッチエンドで構成され、タップイベントはタッチエンドの後にトリガーされます。

rree

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

2. ダブルクリック

2 つのクリック イベント間の間隔が 300 ミリ秒未満の場合、WeChat 公式ドキュメントにはダブルクリックとみなされます。ダブルクリックイベントが発生するため、開発者は独自の処理を定義する必要があります。

mytouchstart: function(e){    console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){    console.log(e.timeStamp + '- touch end')
},mytap: function(e){    console.log(e.timeStamp + '- tap')
}

3.長押し

長押しイベント 指をタッチした後、350ms以上放置します。

<view>
  <button type="primary" bindtap="mytap">点我吧</button>
</view>

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

クリック、ダブルクリック、長押しはタッチ イベントで、タッチスタート、タッチエンド、タップ イベントがトリガーされます。タッチキャンセル イベントは実際のデバイスでのみシミュレートできるため、これ以上は説明しません。

イベント	トリガーシーケンス
クリック	タッチスタート→タッチエンド→タップ
ダブルクリック	タッチスタート→タッチエンド→タップ→タッチスタート→タッチエンド→タップ
	タッチスタート → ロングタップ→タッチエンド→タップ

4. スライド

指が画面に触れて移動します。以下では、簡単のため、水平方向のスライドと垂直方向のスライドを例に挙げます。 スライディング イベントは、touchstart、touchmove、touchend で構成されます。

座標図:

1. 画面の左上隅を原点とする直交座標系を確立します。第 4 象限は携帯電話の画面で、Y 軸が低いほど座標値が大きくなります (数学的な象限との違いに注意してください)。

2. 点 A が touchstart イベントのタッチ点であり、座標が A(ax,ay) であると仮定し、指が点 B(bx,by) までスライドすると、条件は < になります。

3. も同様に満たされます。 cx > ax を満たす C(cx, cy) まで下にスライドします。 dy > E( を満たす) ex, ey)、ex < ax を満たす

4. Y 軸上の線分 AB の投影された長さを m として計算し、X 軸上の投影された長さを n として計算します

5. r = m/n、r > 1 の場合、上にスライドするとみなします。

6. 同様に、線分AC、AD、AEのY軸への投影長とX軸への投影長の比を計算し、右、下、左へのスライド量を求めます。

上記はrが1の場合を考慮していません。

mytouchstart: function(e){    console.log(e.timeStamp + '- touch start')
},//长按事件mylongtap: function(e){    console.log(e.timeStamp + '- long tap')
  },mytouchend: function(e){    console.log(e.timeStamp + '- touch end')
},mytap: function(e){    console.log(e.timeStamp + '- tap')
}

5. マルチタッチ

シミュレータはまだマルチタッチをサポートしていないため、内部ベータ版がオープンした後もさらに追加していきます。

【関連推奨事項】

1. WeChatパブリックアカウントプラットフォームのソースコードダウンロード

2. WeChat投票ソースコード

3. WeChat Lala Takeaway 2.2.4の復号化されたオープンソースバージョンWeChatルービックキューブのソースコード

以上がWeChat開発入門 (4) タッチイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。