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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序与公众号的区别是什么?

    微信事业群在微信开发的过程中,孵化出微信小程序与微信公众号这两个方向,然后目前微信小程序开发

  • 读懂广州微信小程序开发公司开发流程,识破微信开发骗局

    目前光柱市场上的微信小程序开发公司层出不穷,其中有正规的,当然相应的也存在骗局

  • 企业在开发微信小程序之前,要如何做需求分析

    每个企业,在确定开发微信小程序之前,都必须要做好需求分析,将精准的开发需求文档交付到开发者

  • 微信小程序开发基础知识说明

    微信小程序开发之前,需要申请注册一个小程序账号,并下载开发工具;而在开发完成之后,则需要对开发效果进行测试

  • 影响广州微信小程序定制开发费用的因素

    在目前的广州微信圈市场上,不会存在每一个定制开发的小程序费用都一样的情况,不同的功能需求、不同的开发主体以及市场环境都有可能成为影响开发价格的因素。

  • 微信小程序定制开发时一定要知道的几个功能

    微信官方开放的小程序功能越来越多,每个功能都有自己的用处,其中有几个功能对于小程序