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设置为空对象即可。
其实这儿有问题,现在安卓手机 回退不会触发popstate。需要手指跟手机产生交互之后才会触发
大佬好久没有更新了
看过很多小程序,主流的做法都是这样的,但是我还是使用了自定义导航栏
个人感觉并不是一个很好的解决方案,这样代码粘合度可维护性太差了 当一个页面有很多表单的时候 每个表单都要进行监听存储 个人感觉可以使用自定义导航 左上角返回自定义 加个确认的弹窗提示
优秀,遇到过同样的问题
而后重新载入页面,数据还是在的