文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp微信小程序左上角返回按钮的监听方法

2023-06-30 07:21

关注

这篇文章主要介绍“uniapp微信小程序左上角返回按钮的监听方法”,在日常操作中,相信很多人在uniapp微信小程序左上角返回按钮的监听方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”uniapp微信小程序左上角返回按钮的监听方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

项目场景:

uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接返回。

问题描述:

uni-app 页面生命周期中有 onBackPress ,不过不支持微信小程序。
翻看微信小程序官方文档,并未发现可以监听到左上角返回按钮的事件。
查阅相关技术文档,确认微信小程序现阶段并没有提供监听左上角返回事件的函数。

uniapp微信小程序左上角返回按钮的监听方法

原因分析:

页面A进入到页面B,用户在页面B进行了一些操作(比如到页面C选择了一些项目添加到了页面B),这时候用户从页面B返回(触发左上角返回按钮或者系统自带的返回事件)。

由于用户进行了操作,产生了滞留数据,这个数据存在了storage里面。

假设用户的返回是无意的,我们需要在用户返回页面A时进行一个确认,即弹出提示框,让用户看到这个操作会清空掉他刚才所选的项目。

如果用户确认是要返回,即返回页面A,并清空该storage。

如果用户取消返回,即误触了返回按钮等原因,这时候取消返回事件,页面停留在页面B,数据storage保留。

解决方案一:

页面A onshow 生命周期内监听 从 页面B 返回来的数据,即storage是否有值。

页面A:

onShow(){let choose = uni.getStorageSync('product'), //页面B缓存的数据obj = uni.getStorageSync('backsure'); //页面B需要用到的数据(根据实际项目开发)if(choose.length){uni.showModal({    title: '提示',content: '当前页面有未保存的数据,您确定要取消吗?',    success: function (res) {        if (res.confirm) {uni.setStorageSync('product','');        } else if (res.cancel) {uni.navigateTo({url: './pageB?data=' + obj.data})        }    }});}},methods:{topageB(){let backsure = {data : this.data //页面B需要用到的数据};uni.setStorageSync('backsure',backsure);uni.navigateTo({url: './pageB?data=' + this.data});}}

注意:此处的 backsure 仅仅是页面B所需要用到的数据(即 在onLoad()生命周期需要用到), 根据实际情况选择是否需要加上这个storage。 判断依据依然是页面B返回页面A的时候 product 这个storage是否有值。

解决方案二:

页面B 使用custom 自定义导航栏,不使用微信小程序默认的导航栏。

重写页面B 顶部的导航栏,适配所有机型,参考api :uni.getSystemInfo()。

给左上角返回按钮定义点击事件,判断是否确认返回。

为防止用户使用系统返回,页面A需要重复方案一的步骤。

页面 B:

//顶部导航栏<view class="custom_top" :><label class="iconMoney icons iconarrow-left" @click="toback"></label><text>{{thetitle}}</text></view>//生命周期中赋值导航栏高度onLoad(){let that = this;uni.getSystemInfo({success(res) {that.top_height = res.statusBarHeight; //data中 声明 top_height:0 }});}//methods方法toback(){let choose = uni.getStorageSync('product');if(choose.length){uni.showModal({    title: '提示',content: '当前页面有未保存的数据,您确定要取消吗?',    success: function (res) {        if (res.confirm) {uni.navigateBack();uni.setStorageSync('product','');        }    }});}else{uni.navigateBack();}}

页面A同方案一相同。

此方案可以实现点击左上角返回按钮的时候在当前页面(页面B)中弹框提示用户, 而方案一中仅仅是在页面B已经返回到页面A后再触发了提示。

这里页面A实现的是对用户用系统的返回按键时, 由于小程序无法监听到返回事件, 所以只能是重写需要返回的页面B的顶部导航栏, 然后给自定义的返回按钮加上点击事件, 实现当前页面弹框提示。

到此,关于“uniapp微信小程序左上角返回按钮的监听方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯