微信浏览器移动端长按撤回消息

PC端撤回消息功能是用右击事件即contextmenu,移动端使用长按事件来实现撤回消息功能,但是js并没有提供长按事件,那该怎么解决呢?

相关环境:微信浏览器+React+腾讯TIMsdk

第一步:使用onTouchStart,onTouchEnd模拟移动端的长按事件

在onTouchStart事件里添加一个定时器,时间设置为700ms(多长时间自己定),定时器回调函数的逻辑是打开一个菜单,菜单有撤回选项;
在onTouchEnd事件里的逻辑是移除定时器,因为如果长按事件未超过700ms,那么此时不用显示菜单,清除掉定时器是符合逻辑的,如果长按时间超过了700ms,此时,回调函数已经执行了,菜单已经显示出来了,此时清楚掉定时器已经没有关系了。

onTouchStart() {
   this.timerId = setTimeout(() => { 
      // 打开菜单的逻辑
   }, 700)
}
  
onTouchEnd() {
  clearTimeout(this.timerId)
}
第二步:给body添加样式,以去掉移动端长按会出现的默认菜单
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
第三步:添加对两分钟内的消息才可进行撤回的逻辑判断

这一步没有遇到什么技术问题,计算一下即可

第四步:撤回的文本消息支持重新编辑

这一步也没有遇到什么技术问题,计算一下即可

第五步:img图片添加样式,已去掉移动端长按会出现的默认选项

如果是图片消息,长按会出现默认的菜单,类似于保存图片等,因此要给img添加样式来禁掉

img{
  pointer-events:none
}

但是由于pointer-events:none禁止了一切手指事件,因此需要在外层套一层div来触发点击查看大图事件

第六步:对撤回的消息进行特别处理

例如:我撤回了一条消息,对方撤回了一条消息等,我们参考了微信的交互。

第七步:当消息被撤回时,要主动修改isRevoked字段为true

我们调腾讯的TIMsdk的接口获取完消息列表后,是存在redux里面的,因此当有消息被撤回时,要主动修改该消息的isRevoked字段为true,TIMsdk提供了MESSAGE_REVOKED事件用于监听对方消息的撤回。

你可能感兴趣的