微信小程序 按钮按顺序按下，长按清除

微信小程序 按钮依次打点以及长按短按

效果预览与说明

根据导师需求做一个微信小程序用于路径规划的可视化，其中一项功能是要依次打下ABCD四个点用于记录田块的边界。根据现实需求，需要做一个功能是：必须使得ABCD点是依次下发，不能乱了顺序，即A点结束后不能再打A点了，必须BCD依次打完，按下确定按钮后。才可以下一轮打点。同时考虑到可能A点打错了，想重新打，还做了一个长按清除功能。
依次打点功能演示
不按照顺序打点报警展示（我点了AB后又返回去打A点）
长按A点触发其他事件，在现实中我是使得它可以再打点

完整代码。

// index.wxml
<text>测试顺序执行函数以及长按短按</text>
<button bindtap="event_a"   bindtouchstart="touchStart" bindtouchend="touchEnd">事件A</button>
<button bindtap="event_b" bindtouchstart="touchStart" bindtouchend="touchEnd">事件B</button>
<button bindtap="event_c" bindtouchstart="touchStart" bindtouchend="touchEnd">事件C</button>
<button bindtap="event_d" bindtouchstart="touchStart" bindtouchend="touchEnd">事件D</button>
<button bindtap="ok">确定按钮</button>

// index.js
const app = getApp()

Page({
  data: {
    x:1,
    // 触摸开始时间
  touchStartTime: 0,
  // 触摸结束时间
  touchEndTime: 0,  
  // 最后一次单击事件点击发生时间
  lastTapTime: 0, 
  // 单击事件点击后要触发的函数
  lastTapTimeoutFunc: null, 
  },
   /// 按钮触摸开始触发的事件
 touchStart: function(e) {
  this.touchStartTime = e.timeStamp
},

/// 按钮触摸结束触发的事件
touchEnd: function(e) {
  this.touchEndTime = e.timeStamp
},
//顺序测试函数
event_a:function(){
  if(this.data.x==1){
if(this.touchEndTime-this.touchStartTime<700)
    {
      console.log('触发了单击事件')
      console.log('触发A事件')
      console.log('此时x的值是',this.data.x)
      this.data.x++
      wx.showToast({
        title: '打点成功',
        duration:1500,
        icon: 'sucess',
      })
    }
  }
  else{
    wx.showToast({
      title: '请按顺序打点',
      duration:1500,
      icon: 'error',
    })
  }
  if(this.touchEndTime-this.touchStartTime>2000){
    console.log('触发了长按事件')
    wx.showToast({
      title: '清除了该点的打点',
      duration:1500
    })
    this.data.x=1
    console.log('长按a后x的值',this.data.x)
    
  }
},
event_b:function(){
  if(this.data.x==2){
    if(this.touchEndTime-this.touchStartTime<700)
    {
      console.log('触发了单击事件')
      console.log('触发B事件')
      console.log('此时x的值是',this.data.x)
      this.data.x++
      wx.showToast({
        title: '打点成功',
        duration:1500,
        icon: 'sucess',
      })
    }
  }
  else{
    wx.showToast({
      title: '请按顺序打点',
      duration:1500,
      icon: 'error',
    })
  }
  if(this.touchEndTime-this.touchStartTime>2000){
    console.log('触发了长按事件')
    wx.showToast({
      title: '清除了该点的打点',
      duration:1500
    })
    this.data.x=2
    console.log('长按b后x的值',this.data.x)
  }
},
event_c:function(){
  if(this.data.x==3){
    if(this.touchEndTime-this.touchStartTime<700)
    {
      console.log('触发了单击事件')
      console.log('触发C事件')
      console.log('此时x的值是',this.data.x)
      this.data.x++
      wx.showToast({
        title: '打点成功',
        duration:1500,
        icon: 'sucess',
      })
    }
  }
  else{
    wx.showToast({
      title: '请按顺序打点',
      duration:1500,
      icon: 'error',
    })
  }
  if(this.touchEndTime-this.touchStartTime>2000){
    console.log('触发了长按事件')
    wx.showToast({
      title: '清除了该点的打点',
      duration:1500
    })
    this.data.x=3
    console.log('长按c后x的值',this.data.x)
  }
},
event_d:function(){
  if(this.data.x==4){
    if(this.touchEndTime-this.touchStartTime<700)
    {
      console.log('触发了单击事件')
      console.log('触发D事件')
      console.log('此时x的值是',this.data.x)
      this.data.x++
      wx.showToast({
        title: '打点成功',
        duration:1500,
        icon: 'sucess',
      })
    }
  }
  else{
    wx.showToast({
      title: '请按顺序打点',
      duration:1500,
      icon: 'error',
    })
  }
  if(this.touchEndTime-this.touchStartTime>2000){
    console.log('触发了长按事件')
    wx.showToast({
      title: '清除了该点的打点',
      duration:1500
    })
    this.data.x=4
    console.log('长按d后x的值',this.data.x)
  }
},
//确认函数，只有确认后才可以把x的值回复到1，才可以进行下一次打点
ok:function(){
  //只有四个点都获取到才可以下发，确认
  if(this.data.x==5){
   console.log('触发确认事件')
   //把x重新赋值为1，以便下一次打点
   //把abcd的值
   this.data.x=1
   console.log('此时x的值',this.data.x)
   wx.showToast({
    title: '确认',
    duration:1500,
    icon: 'sucess',
  })
  }else{
    wx.showToast({
      title: '请打完四个点！'
    })
  }
},
})

QQ：3233456044
欢迎加我交流微信小程序，触碰微信小程序才一个月左右，纯小白一个，记录下手边这个项目完成过程中遇到的问题，纯属于笔记性质的博客，也是第一篇博客。