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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 目前的微信小程序所不能及的三个方面

    微信小程序从上线至今大约半年,腾讯官方不断地在调整优化其功能设置,尽量让小程序的开发体验与使用体验做到令人满意的程度。可是,至今有三个方面仍是小程序所不能及的,这三个方面也限制了小程序的在某些方面的推广与发展,目前来看是不利的。

  • 微信小程序开发,参数取值方法介绍

    一个微信小程序开发项目,在整个开发流程中,必要用到的就是参数取值,一般来说,常见的参数取值有列表index下标取值与form表单取值

  • 广州微信小程序定制开发报价规则

    微信上的每一种产品都有定制开发,小程序也一样,但不是所有产品的制定开发报价规则都相同,每一种产品根据其开发特色的不同与所处地区不同

  • 广州微信小程序开发,是否会颠覆应用格局

    微信小程序被开发后,不管以后会不会给应用界带来颠覆性的影响,但首先我们能确定

  • 微信小程序开发能为企业品牌策划起到什么作用?

    任何行业在微信平台中去做品牌策划的时候,可以从品牌的创新度、体验效果以及触发分享的效果这三个方面去考虑。

  • 微信小程序商城开发报价问题

    定制开发微信小程序商城,就会面对报价的问题,怎样的报价才是准确的、符合市场现状的?这是想要开发小程序商城的商家需要去了解的问题。站在外包开发公司的立场,小编跟大家说说一些与开发报价相关的东西。

河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三