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

2018/4/3 18:37:24
摘要: 在微信小程序的开发过程中,手势常常被应用在canvas、交互的开发中,所以手势对一些开发效果来说是比较重要的

在微信小程序的开发过程中,手势常常被应用在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;

        }

    }

}


声明:文章"手势开发研究,微信小程序的单触摸电与多触摸点"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序新增四项能力,信息展示开发越强大

    微信官方在小程序功能的开放之路真的是越走越远,现在又就着信息展示模块来开放了四项新能力,来提升用户的体验以及小程序运营者的管理体验,小编只能说这次的事情搞得依旧深得人心。按照写作流程,在夸完新能力深得人心之后,小编就要来介绍一下这四项新能力了。

  • 微信小程序后台返回json出现报错的解决方法

    微信小程序与java后台进行交互,需要获取json数据显示到页面,但是有时候会出现小程序链接java后台,但调用起来后台并不能获取到

  • 目前微信小程序开发的市场反应如何

    对于微信小程序开发的市场反应可以分为三个阶段:过去、目前与未来。过去式作为已经发生过的事情,小程序低迷的市场反应大家也已经看在眼中

  • 关于降低微信小程序定制开发成本的两点建议

    虽然说微信小程序定制开发的价格比APP开发低了很多倍,但是一些不必要的费用还是需要去避免的,特别是对于微信小程序定制开发成本把控比较严格的一些企业商家来说,更加需要去降低开发成本,把钱花在刀刃上。对此,小编有几点关于

  • 广州企业开发微信小程序后有什么优势?

    小程序开发可谓是现下的一股时尚热潮,不仅是因为小程序的新兴与潮流

  • 微信小程序开发,线程架构与开发步骤解析

    在进入到微信小程序开发阶段之前,首先我们可以通过了解它的线程架构,来分析得出创建一个小程序功能也大概的开发