微信小程序返回上一页监听

本文实现的是微信小程序在返回上一页时获取通知并自定义业务。

最简单的实现:

使用 wx.enableAlertBeforeUnload()

优点:快速接入

缺点:手势不能识别、无法自定义弹窗内容(仅询问)

方法二:

page-container + 自定义返回点击

page-container有个好处,能识别返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口

唯一的缺点就是PC端打开小程序时,点击左上角的返回无法触发。

直接上代码(使用了TDesign 微信小程序组件库,可自行替换):

wxml:

html 复制代码
<view>
    <page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave">
        
    </page-container>
    <view class="block">
            <t-navbar
                t-class-placeholder="t-navbar-placeholder"
                t-class-content="t-navbar-content"
                title="标题文字2"
                t-class-title="nav-title"
            >
                <view slot="left">
                    <t-icon
                        size="48rpx"
                        bind:tap="onNavigateBack"
                        aria-role="button"
                        aria-label="返回"
                        name="chevron-left"
                    />
                </view>
            </t-navbar>
        </view>
        <text>test</text>
        <t-dialog
            visible="{{imageOnMiddleWithImage}}"
            confirm-btn="{{ {content: '确定', variant: 'base' } }}"
            cancel-btn="取消"
            bind:confirm="confirnDialog"
            bind:cancel="closeDialog"
            >
            <t-image slot="top" id="loading-img" shape="round" width="72" height="72" />
        </t-dialog>
</view>
  

js:

javascript 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    visible: true,
    imageOnMiddleWithImage: false,
    backTime: 0,
  },
  closeDialog() {
    this.setData({
      visible: true, // 点取消,重新展示该页面
      imageOnMiddleWithImage: false,
      backTime: 1,
    });
  },
  confirnDialog() {
    wx.navigateBack({
      delta: 1
    });
  },
  onBeforeLeave() {
    if (this.data.backTime > 0) {
      this.confirnDialog()
      return;
    }
    this.setData({
      imageOnMiddleWithImage: true,
    });
  },
  onNavigateBack() {
    this.onBeforeLeave()
  }
})

使用自定义返回键,监听点击事件;

使用page-container特性,处理所有非点击返回情况下的返回事件。

相关推荐
兰亭妙微4 小时前
从线到机:AI 与多模态交互如何重塑 B 端与 App 界面设计
人工智能·小程序·交互·用户体验设计公司
青青子衿越4 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
乔公子搬砖5 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
!win !10 小时前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app
软希网分享源码15 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域1 天前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO1 天前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)1 天前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.1 天前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
weixin_177297220691 天前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀