评论

【交互方案】针对不小心触发返回按钮的交互

一个交互设计优化不小心触发了左上角返回或者物理按键返回导致的已填写内容丢失问题。

17年 因为业务上有该类需求,所以提过一个问题。
想实现监听左上角按钮来做其他操作,比如跳转其他页面。
https://developers.weixin.qq.com/community/develop/doc/92f7cdbacdf724cba640955423a8444f

此交互优化只应对表单等内容提交回填的处理

应用场景:

某个表单提交页,页面挺多内容,用户填写完后,不小心触发了左上角返回,或者不小心点了物理按键,那么用户填写的内容就丢失了,那么最开始大家的想法都是,点击左上角返回按钮或者物理按键返回能触发监听我们再弹窗提醒用户是否退出当前页面。这个交互应该是再正常不过的了,在各种app都有见过这种交互。

网页里:

h5里都是通过监听popstate,以及设置pushstate实现。

小程序里:

然而小程序的翻遍官方文档,没找到该方法,发帖询问后也是得到官方童鞋回复,不会提供该方法。

官方童鞋给的原因是:会有某些开发者,阻止用户退出某些页面,以达到一些xxx目的,所以官方为了防止开发者滥用,并不打算开放该功能。

翻了社区大家实现方式,有大佬给了一个方案:

https://developers.weixin.qq.com/community/develop/article/doc/000844b537c230b04b999a54f56013

该监听方法的缺点:

最后确实没发现有什么好的监听方案了,那既然代码无法实现,那么我们可以优化用户体验来达到该效果。

实现操作方案如下:

// app.js下跟onLaunch同级新增个globalData字段。
globalData: {
  formData: {} // 这里需要默认填写该字段,不然其他地方使用了会报错。
}

// 首先用户填写任意字段都存储一个对象到globalData下。
<input type="text" placeholder="请输入用户昵称" bindinput="handleUserName" />
 
handleUserName(e) {
  getApp().globalData.formData.userName = e.detail.value
}

这样将用户填写的内容都存到globalData下,而我们最初的交互是,存储后用户点击返回下次进来自动回填。

onShow() {
  this.setData({
    userName: getApp().globalData.formData.userName || ''
  })
}

而最终的交互是这样操作:

如果用户填写完一整页内容,而内容我们都存到了globalData下,用户不小心返回了上一页,那么我们在用户重新进入该页面时,判断globalData的formData下是否存在内容,如果存在,弹窗提醒用户是否回填上次填写的内容,如果用户确认回填那么我们给用户自动回填上次填写的信息,如果用户取消回填,那么我们将globalData下的formData设置为空对象即可。

如此 我们即从交互上规避了不小心点击返回导致需要重新输入的问题,并且交互体验得到极大提升。。

最后一次编辑于  2020-06-04  
点赞 10
收藏
评论

5 个评论

  • 一
    10-29

    其实这儿有问题,现在安卓手机 回退不会触发popstate。需要手指跟手机产生交互之后才会触发

    10-29
    赞同
    回复 1
    • TNT
      TNT
      10-29
      不需要判断的,用户进入页面后输入就存。退出去不理会,再次进来弹窗提醒是否回填。
      10-29
      回复
  • Youngwell
    Youngwell
    2020-06-24

    大佬好久没有更新了

    看过很多小程序,主流的做法都是这样的,但是我还是使用了自定义导航栏

    2020-06-24
    赞同
    回复 7
    • TNT
      TNT
      2020-06-24
      自定义导航栏 无法阻止物理按键返回。我们以前的是返回就返回了 数据也清空。。
      2020-06-24
      1
      回复
    • 2020-07-07回复TNT
      可以做个缓存,做个存储
      2020-07-07
      回复
    • TNT
      TNT
      2020-07-07回复
      globalData就是存储全局变量的存储。当推出小程序后自动删除,而storage则不会
      2020-07-07
      1
      回复
    • Youngwell
      Youngwell
      2020-11-05回复TNT
      wx.enableAlertBeforeUnload
      2020-11-05
      2
      回复
    • TNT
      TNT
      2020-11-05回复Youngwell
      这是新出的,2.12基础库支持
      2020-11-05
      1
      回复
    查看更多(2)
  • 猛男陈阔
    猛男陈阔
    2020-06-05

    个人感觉并不是一个很好的解决方案,这样代码粘合度可维护性太差了 当一个页面有很多表单的时候 每个表单都要进行监听存储 个人感觉可以使用自定义导航 左上角返回自定义 加个确认的弹窗提示

    2020-06-05
    赞同
    回复 13
    • TNT
      TNT
      2020-06-05
      物理按键返回呢
      2020-06-05
      回复
    • TNT
      TNT
      2020-06-05
      苹果右滑返回呢
      2020-06-05
      回复
    • TNT
      TNT
      2020-06-05
      这些都阻止不了。到时候测试再提个bug,这就难受死 (🐶保命)
      2020-06-05
      1
      回复
    • 猛男陈阔
      猛男陈阔
      2020-06-05回复TNT
      哈哈 太难了
      2020-06-05
      回复
    • TNT
      TNT
      2020-06-05回复猛男陈阔
      没得办法,官方不开放监听,没有其他方案了。只能从用户体验上出发咯。
      2020-06-05
      1
      回复
    查看更多(8)
  • 小肥羊🍊
    小肥羊🍊
    2020-06-04

    优秀,遇到过同样的问题

    2020-06-04
    赞同
    回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2020-06-04

    而后重新载入页面,数据还是在的

    2020-06-04
    赞同
    回复
登录 后发表内容