微信小程序:wx.navigateBack()时弹窗一直显示

前言

小程序使用服务需要用户绑定手机号,在进入页面时,判断用户是否授权,未授权的话,弹窗组件(自定义的)显示

onShow(){
	let isBind = xxx
	if(!isBind){
        // 获取弹窗组件(自定义的)实例
		this.bindTip = this.selectComponent('#bindTip')
        // 调用弹窗组件的方法,显示组件
		this.bindTip.showDialog()
	}
}

弹窗图片

开始

我们希望,用户未绑定手机号时显示绑定的弹窗,已经绑定时,不显示。点击【去绑定】 跳转到绑定手机号的页面,绑定成功后,调用wx.navigateBack({delta: 1})回到上一级页面(进入绑定手机号的入口不唯一)。但是呢,现在的问题是,绑定成功后,回退到上级页面还是会显示弹窗。

实践

 一开始判断是赋值没有成功,在onShow()时isBind的值没有更新,但是呢,在onShow()中是可以输出的。所以值是可以获取到,说明在onShow中是没有调用显示弹窗的方法的。但是为什么会显示呢?

原因还是要回到我们自定义的弹窗本身,

### 实现思路 为了实现在 `onUnload` 生命周期函数触发显示弹窗,在微信小程序架内存在一定的挑战,因为当页面被卸载(`onUnload`),实际上已经进入了不可交互的状态。不过可以通过一些变通的方法来达到类似的效果。 一种常见的做法是在检测到即将离开当前页面之前展示弹窗给用户。这通常意味着要在更早的机捕获用户的操作意图并作出响应。对于某些特定场景下的退出行为(比如按下返回键),可以考虑利用 `wx.navigateBack` 或者其他导航方法中的回调机制提前做出反应[^1]。 然而,如果严格遵循需求描述——即在 `onUnload` 中执行,则可能无法完全按照预期工作,因为此页面资源已经开始释放过程。因此建议调整方案为: - 在可能导致页面关闭的操作发生前先调用自定义逻辑; - 如果确实需要依赖于 `onUnload` 的话,那么应该尝试尽可能快速地完成必要的UI更新,但这并不保证所有情况下都能成功呈现给最终用户看到。 下面提供了一个基于上述讨论修改后的例子,该实例展示了如何在一个更加合适的刻(如点击返回按钮或其他导致页面关闭的动作)激活弹窗而不是直接放在 `onUnload` 函数里: ```javascript Page({ data: { isPopupVisible: false, }, handleBeforeClose() { this.setData({isPopupVisible: true}); // 阻止默认行为, 可选 return false; }, onCloseConfirm() { this.setData({isPopupVisible: false}); wx.navigateBack(); // 或者其他的跳转方式 } }) ``` 同,在 WXML 文件中相应位置加入如下代码片段用于加载和配置弹窗组件: ```html <import src="../../components/PopupWindow/PopupWindow.wxml"/> ... <button bindtap="handleBeforeClose">返回</button> <PopupWindow visible="{{isPopupVisible}}" /> <!-- 假设 PopupWindow 支持确认关闭事件 --> ``` 此解决方案允许开发者可以在实际关闭页面之前向用户提供反馈,并给予他们选择继续或取消的机会。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值