如何监听小程序返回按钮事件?

应用场景:

通常情况下,在关闭当前页面时需要同时触发默写方法,最常见的有一下两种场景
场景1.点击返回按钮时,发送广播,刷新某个页面的值或者触发某个页面的结果,重新刷新;
场景2.点击返回按钮,返回到指定页面,而非上个页面;

目前实现:

翻阅所有小程序的官方文档,尚未给出监听返回按钮的事件,因此如果想让
上述场景1中的刷新其他指定页面、或者请求其他页面接口,不过也可采用其他方法实现这个功能。
上述场景2中点击返回按钮时返回到指定页面就不能像原生那样自定义返回按钮的事件那样自由。不过也可采用其他方法实现这个功能。请继续阅读下文

方案思路:

场景1的思路: 只能将该接口提出到公共JS文件中,再利用微信数据的双向绑定特点进行处理。
场景2的思路:结合页面的生命周期事件实现跳转指定页面

示例代码:

场景1刷新指定页面数据,就不在详细说明,如果还没有思路的请在下方留言哈。
场景2示例代码,及讲解

  /**
   * 页面的初始数据
   */
  data: {
    clickFlag:false,
  },

  onUnload: function () {//如果页面被卸载时被执行
    this.gotoHomePage();
  },
  gotoHomePage: function () {//自定义页面跳转方法
    let that = this;
    //------------------
    if (that.data.clickFlag) {
      return;
    } else {
      that.setData({ clickFlag: true });
    }
    //------------------
    wx.switchTab({
      url: '../home/home',
    })
  },

代码解析:

大家看了上述代码最有疑问的地方可能是gotoHomePage()函数中的条件判断,这里解释一下这个判断的作用。
这个判断主要作用:如果页面中同时存在一个按钮与返回按钮的作用一样,不是返回到上一页面,而是指定到某个页面时,此时如果省略该条件处理将会发生什么事情呢?

<!--pages/home/home.wxml-->
<view class='home-view'>
  <botton class='btn-view' bindtap='gotoHomePage'>
   点击我返回到home
  </botton>
</view>

onUnload: function () {//如果页面被卸载时被执行
  this.gotoHomePage();
},
gotoHomePage: function () {//自定义页面跳转方法
  wx.switchTab({
    url: '../home/home',
  })
},

1.如果点击返回按钮,页面会正常返回到指定页面;
2.如果点击了页面的中按钮跳转,将会变成死循环;
因此这种场景一定要添加一个条件处理。

如果你有更好的解决方案欢迎留言讨论,上述内容纯属个人见解,如有不当之处,欢迎指教哦!


为了能及时的将自己踩到的前端坑分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(front_e_family)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!
这里写图片描述

猜你喜欢

转载自blog.csdn.net/li11_/article/details/81453696