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

Cris

PC端撤回消息功能是用右击事件即contextmenu出现popover,移动端使用长按事件出现popover来实现撤回消息功能,但是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;
}

问题:给body添加此样式后,导致其他页面,长按也不出现默认菜单,这个默认菜单,用户也是需要用到的,里面有复制功能

解决方案:只有进入消息页时才给body添加此样式document.body.className,离开消息页面移除此样式,进入其他页面不加此样式

第三步:添加对两分钟内的消息才可进行撤回的逻辑判断

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

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

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

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

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

img{
  pointer-events:none
}

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

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

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

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

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

阅读 1.4k
36 声望
0 粉丝
0 条评论
36 声望
0 粉丝
文章目录
宣传栏