在这个数字化时代，小程序功能的改进一直是个热门话题。尤其是抖音那样的双击点赞、单击暂停功能，对改善用户感受极为关键。然而，小程序本身不支持双击事件，这让开发者面临了不小的难题。
前置与基础绑定
小程序开发初期，页面绑定是基础技能。这就像盖房子得先打好地基，至关重要。在这一环节，开发者要精确设置参数，保证后续功能顺畅。这要求精确和耐心，稍有不慎，后续操作可能受影响。开发者需参照开发文档和经验操作。不同项目，页面绑定可能因功能需求而异。看似简单，实则凝聚了开发者的众多思考和努力。
// 全局变量
let lastClickTimeStamp = 0; // 用户最后一次点击的时间戳
let isDouble = false;
let nClickNum = 0;
要达到抖音视频那样的互动效果，页面一旦完成绑定，就得着手处理双击功能，这可是让小程序拥有更丰富用户体验的关键环节。
touchstart="touchStart"
bind:touchend="touchEnd"
>
简单时间戳思路及问题
开发者们通常首先会考虑采用基于时间戳的简单方法。这种方法的基本做法是记录每次点击的具体时间，然后通过比较两次点击之间的时间差来判断是单次点击还是双击。尽管这种方法看起来合理，但它实际上存在不足。它以简单直接的方式处理双击，但即便实际是双击，每次点击也会先触发一个单次点击的事件。这就像一台机器，原本应该一次性完成两个动作，却分成了两个步骤，导致操作流程混乱。特别是在那些需要快速交互的小程序场景中，这种误触发的单次点击可能会影响用户体验，甚至可能导致数据记录不准确。
记录用户首次点击的行为变得至关重要。若无法妥善解决这一问题，即便方案构思新颖，其应用效果也将大受影响。
时间戳和标志位方案
isDoubleClick() {
let currentTime = Date.now();
let timeInterval = currentTime - lastClickTimeStamp;
if (timeInterval && timeInterval < 1500) {
return true; // 如果间隔在1500ms内就是快速重复点击
}
lastClickTimeStamp = currentTime;
return false; // 单击事件
},
touchEnd(){
if(this.isDoubleClick()){
// 双击
}else{
// 单击
}
}
第二种方法涉及运用时间标记和标识符。用户点击按钮后，首先只更新最后点击时间，接着静待1500毫秒，期间留意用户是否再次点击。这可以比作在路口安排了观察者，等待接下来的动作。然而，此方案存在不足，需对标志位重置的时间加以限制，即1500毫秒。若用户恰在标志位重置时点击，可能额外引发一次点击事件。在电商小程序等实际应用中，用户可能频繁快速点击商品互动按钮，若恰逢标志位重置，可能会引起操作上的混乱。
这就意味着开发者需要考虑如何在不同种类的小程序里，合理安排等待时间的设定，力求降低误操作的风险。
时间戳和点击次数方案
这种做法是结合时间标记和点击频次来进行的。用户点击按钮后，计数便启动，首次松开按钮时，启动一个计时器，在特定时间内统计点击次数，以此区分单次点击和快速连续点击。这就像解决一道复杂的数学问题，依靠精确的计算逻辑来判定操作种类。但这种方法在实际运用中也有其难点。比如在一些小型游戏应用中，玩家可能会展现出各种不规则的点击模式，若时间设定不当，就可能导致判断出现错误。
touchStart() {
let currentTime = Date.now()
if (currentTime - lastClickTimeStamp > 0 && currentTime - lastClickTimeStamp < 150) {
// 多次点击，每次点击间隔不超过150ms的，视为双击
console.log("双击")
this.clearTimeout()
isDouble = true
//在用户发生点击后，继续监听1500ms内所有的点击事件，并视为同一批事件，超时恢复标志位
setTimeout(() => {
isDouble = false
}, 1500)
}
},
touchEnd() {
this.clearTimeout();
// 当用户按下之后，先停止150ms，监听用户后续操作
if (!isDouble) {
timer = setTimeout(() => {
// 单击
console.log("单击")
isDouble = false // 初始化双击标志位
}, 150)
}
let currentTime = Date.now()
lastClickTimeStamp = currentTime
},
clearTimeout(){
if (timer) {
clearTimeout(timer)
}
},
该方案要求开发者针对小程序的目标用户及特定功能要求，对定时器的时长等关键参数进行精心调整，以确保效果更佳。
方案的权衡与选择
三种技术方案各有特点，尽管它们都得在缺乏原生双击事件支持的情况下，运用编程手段来达到类似效果。开发者知道，没有哪种方案是完美无缺的，每种方案在不同场合都有其长处和短处。比如，在那些强调内容展示、用户操作直观的小程序里，简单的时间戳方案可能就足够了。但在那些对用户操作精确度要求高，不能容忍频繁误操作的小程序里，可能就得更加小心地挑选时间戳与点击次数，或是时间戳与标志位的组合方案。
开发者需全面思考，考虑项目需求、用户操作习惯、小程序运作机制等多方面因素，评估每个方案与自身小程序的匹配度。
touchStart() {
++nClickNum;
},
touchEnd() {
if (nClickNum === 1) // 第一次点击
{
setTimeout(() => {
if (nClickNum >= 2) {
console.log("双击")
}
else {
console.log("单击")
}
nClickNum = 0 // 一旦定时到期就重新来过
}, 1000)// 监听1s内用户的点击操作
}
},
未来展望
目前虽然已有方法在小程序上模仿抖音的双击单击效果，但技术持续进步，我们期望小程序能原生支持双击事件。这将使开发者开发交互功能更加方便，降低自行实现可能带来的错误。用户对交互体验的要求日益提升，这也推动开发者寻求优化功能的更好途径。我们期待未来，小程序在用户交互功能上能有显著提升。
在制作小程序时，你是否遇到过类似的功能实现困难？欢迎留言、点赞和转发。
