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

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

最简单的实现:

使用 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特性,处理所有非点击返回情况下的返回事件。

相关推荐
weixin_lynhgworld3 小时前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
落雪小轩韩15 小时前
微信小程序性能优化与内存管理
微信小程序
徐礼昭|商派软件市场负责人1 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww2 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发2 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发2 天前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php
七七软件开发2 天前
打车小程序 app 系统架构分析
java·python·小程序·系统架构·交友