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

写在前面

为了能及时的将自己踩到的前端坑(包括ionic,angular,react,ReactNative,小程序,APICloud)分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(front_e_family)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!

应用场景:

通常情况下,在关闭当前页面时需要同时触发默写方法,最常见的有一下两种场景:

场景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()函数中的条件判断,这里解释一下这个判断的作用。

这个判断主要作用:如果页面中同时存在一个按钮与返回按钮的作用一样,不是返回到上一页面,而是指定到某个页面时,此时如果省略该条件处理将会发生什么事情呢?

点击我返回到home

onUnload: function () {//如果页面被卸载时被执行

this.gotoHomePage();

},

gotoHomePage: function () {//自定义页面跳转方法

wx.switchTab({

url: '../home/home',

})

},

1.如果点击返回按钮,页面会正常返回到指定页面;

2.如果点击了页面的中按钮跳转,将会变成死循环;

因此这种场景一定要添加一个条件处理。

如果你有更不事时功来这制请例在屏随会和时实于幻近支好的解决方案欢迎留言讨论,上述内容纯属个人见解,如有不当之处,能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使欢迎指教哦!

本文来源于网络:查看 >https://blog.csdn.net/li11_/article/details/81453696

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值