在开发微信小程序时，使用原生的 touchstart、touchmove、touchend 等事件实现手势操作十分麻烦。于是，我们可以使用 wx-touch-event 这个 npm 包来简化手势操作的实现。
安装
首先，我们需要在小程序项目中使用 npm，可以在小程序开发者工具中勾选“使用 npm 模块”，然后在项目根目录下执行以下命令安装 wx-touch-event：
npm install wx-touch-event
安装成功后，在小程序开发者工具中右键点击项目根目录，选择“构建 npm”，即可将 npm 包引入到小程序中。
使用
使用 wx-touch-event 的基本步骤如下：
- 在需要使用手势操作的页面中引入
wx-touch-event：
const touchEvent = require('wx-touch-event');- 监听手势操作事件，在回调函数中处理代码逻辑：
-- -------------------- ---- -------
----- ---------- - --------------------------
------
------------- ---------------- --------- -- -
------------------------- -----
---
------------ ---------------- --------- -------- -- -
------------------------ -----
---
----------- ---------------- --------- -------- -- -
----------------------- -----
---
---在上述代码中，我们分别监听了 touchstart、touchmove、touchend 三个事件，并使用 touchEvent 函数处理了事件回调函数。在回调函数中，我们可以通过事件对象 evt 来获取当前手势操作的详细信息。
操作信息
touchEvent 函数的回调函数参数包括以下三个：
evt：当前手势操作的事件对象。startEvt：手势操作的起始事件对象。prevEvt：上一个手势操作的事件对象。
在使用这三个参数时，我们需要注意以下几点：
- 回调函数里的代码逻辑应该放在
touchstart事件里写。 evt、startEvt、prevEvt都是事件对象，包含了touches数组和changedTouches数组，分别代表了手指当前的位置和上一个位置。- 如果是多手指操作，
touches和changedTouches数组都会有多个元素。此时可以通过遍历数组来处理操作信息。 changedTouches数组中的第一个元素，是当前操作的手指。所以，可以通过changedTouches[0]来获取当前手指的详细信息，例如：
const touchEvent = require('wx-touch-event');
Page({
onTouchStart: touchEvent((evt, startEvt) => {
const { clientX, clientY, identifier } = evt.changedTouches[0];
console.log('touchstart', { clientX, clientY, identifier });
}),
});上述代码中，我们通过解构赋值的方式，获取了当前手指的 clientX、clientY、identifier 信息，并将其打印到控制台上。
示例代码
下面是一个简单的示例，在页面中实现了双指缩放的功能：
-- -------------------- ---- -------
----- ---------- - --------------------------
------
----- -
------ --
--
------------- ---------------- --------- -- -
-- ------------------- --- -- -
----- - -------- --- -------- -- - - ---------------
----- - -------- --- -------- -- - - ---------------
----- -------- - --------------------- - --- -- - ----------- - --- ----
--------------
-------------- ---------
---
-
---
------------ ---------------- --------- -------- -- -
-- ------------------- --- - -- ---------------------- --- -- -
----- - -------- --- -------- -- - - ---------------
----- - -------- --- -------- -- - - ---------------
----- -------- - --------------------- - --- -- - ----------- - --- ----
----- ------------ - --------------------------------------------- - --------------------------- -- - ----------------------------------- - --------------------------- ----
----- ----- - --------------- - --------- - ------------- - ----
--------------
------
---
-
---
---在上述示例中，我们在 touchstart 事件中计算了双指之间的距离，并将其保存在 startDistance 变量中。在 touchmove 事件中，我们计算了上一次和当前的双指距离，并通过这个距离差计算出放大比例，最后将其保存到 scale 变量中，并通过 setData 更新页面状态。这样，就实现了双指缩放的功能。
总结
通过 wx-touch-event 这个 npm 包，我们可以简化微信小程序中手势操作的实现。在使用该包时，我们需要注意代码逻辑的编写，以及手势操作信息的获取方式。如果遇到多手指操作的情况，我们需要通过遍历数组来处理操作信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590881e8991b448d66a0