需求背景

在开发过程中，总会有需求是在用户返回前做一些事情，而目前小程序提供的并没有直接支持，需要点奇淫巧技才可以。

解决方案

利用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('用户点击确认')
          // TODO
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })

  }
  ...
}

相关API

disableSwipeBack

禁止滑动返回，只能通过点击，这个时候就可以捕获到退出页面，但功能已下线

wx.enableAlertBeforeUnload

enableAlertBeforeUnload 是小程序提供的开启小程序页面返回询问对话框。功能局限性太高，且安卓手势返回并不支持。

相关阅读