前言
手勢對于一些效果是比較重要的，在canvas、交互等中應用非常廣，看一下微信小程序手勢是如何的。
Demo
為了研究小程序是否支持多手指，需要使用touchstart,touchmove,touchend
// index.wxml<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" ></view>
//index.jstouchstartFn: 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 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
"changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14}]真機效果
實現以上Demo后模擬器是無法看到多觸摸點的數據的，所以你需要真機來測試。
看下真機的log信息
在changedTouches中按順序保存觸摸點的數據，所以小程序本身支持多觸摸點的手勢
結論
設想: 既然小程序的手勢是支持多觸摸，而且可以獲取到相關的路徑，那么相關路徑計算也是可行的。
場景: 多觸摸交互效果，手指繪制等
觸摸點數據保存
為了能夠來分析觸摸點的路徑，最起碼是簡單的手勢，如左滑、右滑、上滑、下滑，我們需要保存起路徑的所有數據。
觸摸事件
觸摸觸發事件分為"touchstart", "touchmove", "touchend","touchcancel"四個
詳見:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20
存儲數據
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; } }}結尾
這篇文章，主要探索一下，希望你也可以提前看一下手勢的解析。
新聞熱點
疑難解答
