关于小程序的事件触发的坑

271 阅读2分钟

触发选择

    @mousedown @mousemove @mouseup @mouseleave    //针对鼠标         
    @pointerdown @pointeriup @pointerleave        //针对鼠标和触屏  
    @touchestart @touchmove @touchend             //小程序用
    @tap @longtap @longpress                      //小程序用

需求

实现微信语音功能同款效果,这里关注其事件触发相关的逻辑:

e72c7274249fdbd1657d667c2e02b4f.jpg

c28dda04a35e1e124f89e8d35c69d25.jpg

可以看到,相关的事件触发:

1.长按进入语音录制                    //选择什么事件触发长按?
2.松手触发语音发送                    //选择什么事件触发发送?
3.触点移动到取消按钮松开触发取消语音   //选择什么事件?

坑点

一、

对于需求1、2:我选择touchstart去做长按触发,能够触发语音录制,但是松开触发存在问题。 首先touchstart,常规是用于移动事件,一般是touchstart touchmove touchend搭配使用,我一开始想的是使用touchstart 和touchend去实现长按和松开的事件触发,然而小程序似乎并不支持,查阅相关文档有的说是touchmove触发打断使得touchend无法触发,有的说是丢失了节点无法触发touchend,总的来说就是必须按顺序在同一个节点触发这三个事件,我尝试过移除该节点的touchmove事件也无济于事,而且就算给三个事件都写了一定的逻辑处理也常常会出现模拟机上ok,真机测试不行的问题。

二、

对于需求3:像上面提到的一样,想要触发touchup必须先触发touchstart、touchmove,无法进行想象中的在 语音按钮触发touchstart进行语音录制,在取消按钮触发touchend取消语音发送。(因为不同节点需要重新触发)

最终方案

一、

全部使用tap触发,tap:开始录音,tap:发送语音,tap:取消语音 缺陷:与用户语音使用习惯不同,很low

二、

longpress/touchstart:开始录音, touchmove:取消语音, touchend:发送语音。 缺陷:无法实现需求三,且在真机测试时时时有问题!

查阅官方文档无果,也看到很多同仁遇到一样的问题,小程序到底咋做一样的语音功能?求大佬指点!