本文實現的是微信小程序在返回上一頁時獲取通知并自定義業務。
最簡單的實現:
使用?wx.enableAlertBeforeUnload()?
優點:快速接入
缺點:手勢不能識別、無法自定義彈窗內容(僅詢問)
方法二:
page-container?+ 自定義返回點擊
page-container有個好處,能識別返回操作包括三種情形,右滑手勢、安卓物理返回鍵和調用?navigateBack
?接口
唯一的缺點就是PC端打開小程序時,點擊左上角的返回無法觸發。
直接上代碼(使用了TDesign 微信小程序組件庫,可自行替換):
wxml:
<view><page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave"></page-container><view class="block"><t-navbart-class-placeholder="t-navbar-placeholder"t-class-content="t-navbar-content"title="標題文字2"t-class-title="nav-title"><view slot="left"><t-iconsize="48rpx"bind:tap="onNavigateBack"aria-role="button"aria-label="返回"name="chevron-left"/></view></t-navbar></view><text>test</text><t-dialogvisible="{{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:
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特性,處理所有非點擊返回情況下的返回事件。