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

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设置为空对象即可。