失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 小程序监听android返回键 如何监听小程序返回按钮事件?

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

时间:2018-08-18 14:42:42

相关推荐

小程序监听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移和泉果动标实效使欢迎指教哦!

本文来源于网络:查看>/li11_/article/details/81453696

如果觉得《小程序监听android返回键 如何监听小程序返回按钮事件?》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。