手势开发研究，微信小程序的单触摸电与多触摸点

在微信小程序的开发过程中，手势常常被应用在canvas、交互的开发中，所以手势对一些开发效果来说是比较重要的。本文我们探讨的是，微信小程序开发是否支持多触摸点，即多手指的触屏使用，根据官方给出的开发文档说明，我们这一次的研究需要使用到touchstart、touchmove与touchend。

  1、Demo

// index.wxml

<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" >

</view>

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

  }

  2、单触摸点、多触摸点分析

changedTouches 数据格式与touches相同，表示有变化的触摸点，如从无变有（touchstart）、位置变化（touchmove）、从有变无（touchend、touchcancel）。

"changedTouches":[{

"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14

}]

  3、真机测试效果

实现以上Demo之后，模拟器无法看到多触摸点额的相关数据，需要真机测试来查看效果。

  4、结论分析

在changedTouches中可以按顺序保存触摸点的数据，因此，小程序本身也是支持多触摸点手势开发的，而且通过这类开发可以获取到相关的路径，对相关路径也可以进行计算。这种多触摸点可以被运用在多触摸交互效果、手指绘制等方面上。

  5、触摸点的数据保存

为了能够分析触摸点的路径，需要保存起路径的所有数据。数据存储代码如下：

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;

        }

    }

}