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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序之间相互跳转功能可以怎么运用

    前阵子微信官方又开放了一个小程序新功能,就是不同的小程序之间可以相互跳转,这可谓是一石激起千成浪,一下子微信小程序这个圈子又像炸开了锅一样欢欣鼓舞。这是为什么?最主要的还是因为,这个功能又带来一些商机,所以看到了这些商机的企业商家,当然就会欢欣鼓舞了。下面就由互诚科技半桶水小编来为大家揭秘,

  • 分享:微信小程序开发过程中,常用的功能代码总结

    开发者进行微信小程序开发的时候,有一些比较常用的功能代码是可以学习使用的,根据基础的功能代码进行小调小整,就能调整成自己想要的代码

  • 开发微信小程序,用“社交+购物”模式促爆发式发展

    微信小程序从面世以来,官方就不断在朝服务直达搜索、公众号串联小程序、线上线下打通、好友社交传播等方向努力开发

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

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

  • 广州小程序开发公司总结微信小程序最近升级了哪些新能力

    微信官方通过微信公开课向外界宣布,他们在微信小程序开发上又有新动作,各种新能力说升级就升级

  • 广州微信小程序开发骗局:模板开发骗局泛滥

    在广州微信小程序的开发上,不是每一个企业都是真正有需求要涉及小程序开发的