需求背景
在开发过程中,总会有需求是在用户返回前做一些事情,而目前小程序提供的并没有直接支持,需要点奇淫巧技才可以。
解决方案
利用page-component
的bind:beforeleave
来捕获到页面返回。整体思路:
- 在页面插入一个
page-container
, z-index
设置成-1,把页面其他元素设置定位,覆盖在该组件上,将page-container
隐藏起来。
- 添加
bind:beforeleave
事件监听,再用户触发返回时可以捕获到。
- 用户触发返回后,
page-container
组件会被销毁,需要重新插入。可以利用setDate
和 wx:if
来实现。
这有就实现了对返回操作的监听
代码实现
1 2 3 4 5 6 7
| <page-container wx:if="{{isHackGobackTrackPageComponent}}" show="{{true}}" bind:beforeleave="beforeleave" z-index="{{-1}}" > </page-container>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| { data: { ... isHackGobackTrackPageComponent: true ... }, ... beforeleave() { this.setData( { isHackGobackTrackPageComponent: false }, () => { setTimeout(() => { this.setData({ isHackGobackTrackPageComponent: true }) }, 100) } ) wx.showModal({ title: '提示', content: '确认要退出吗?', success: res => { if (res.confirm) { console.log('用户点击确认') } else if (res.cancel) { console.log('用户点击取消') } } })
} ... }
|
相关API
disableSwipeBack
禁止滑动返回,只能通过点击,这个时候就可以捕获到退出页面,但功能已下线
wx.enableAlertBeforeUnload
enableAlertBeforeUnload
是小程序提供的开启小程序页面返回询问对话框。功能局限性太高,且安卓手势返回并不支持。
相关阅读