uniapp微信小程序端通过分享进入的页面,判断左上角返回按钮,是返回首页还是返回上一个页面

效果:

当他人分享至群聊或者聊天的时候,自定义的导航栏怎么实现原生的左上角返回首页的功能呢?

实现这一步的关键功能在于在onLoad监听进入分享页面的层数,即分享页面进入之后,getCurrentPages()的获取的数组长度为1,所以在onLoad里面判断如果数组长度为1的话,就显示可以直接返回首页的按钮;如果不为1的话,就显示返回上一个页面的按钮。

<nav-bar backState="2000">
				<view slot="left" class="address_select">
					<uni-icons v-if="!isShowBackHome" type="back" size="24" style="padding-right: 10rpx;" @click="goBack"></uni-icons>
					<uni-icons v-if="!isShowBackHome" color="#47ddd9" type="location-filled" size="24"></uni-icons>
					<view v-if="!isSh
### uniapp 开发的微信小程序中阻止返回首页的方法 对于uniapp开发的微信小程序而言,在尝试阻止返回首页的操作时存在一定的局限性。具体来说,关于左上角返回按钮的行为处理,`uni-app`页面生命周期中的`onBackPress`钩子虽然可用于部分平台,但在微信小程序环境下并不受支持[^1]。 鉴于此情况,如果希望实现类似于阻止返回首页的功能,则需考虑其他间接方式来达成目的: #### 使用自定义导航栏替代默认导航栏 通过移除默认顶部带有返回箭头的小程序自带导航条,并利用`<navigation-bar>`组件构建自定义版本。这样做的好处在于能够完全掌控左侧图标点击后的逻辑走向,从而有效管理用户的回退行为而不受限于原生限制。 ```html <!-- 自定义导航栏 --> <navigation-bar class="custom-nav"> <!-- 左侧返回按钮 --> <button @click="handleCustomBack">返回</button> <!-- 中间标题区域 --> <text>当前页名称</text> <!-- 右边操作项可选 --> </navigation-bar> ``` ```javascript // 对应js文件内定义相应事件处理器 export default { methods: { handleCustomBack() { // 实现特定业务逻辑而非直接调用wx.navigateBack() console.log('触发了自定义返回'); // 如果满足条件允许离开则执行实际跳转动作;反之给出提示或保持现状 const canLeave = false; // 假设此处依据某些规则判定能否退出 if (canLeave) { wx.navigateBack({ delta: 1, }); } else { uni.showToast({ title: '无法在此处返回', icon: 'none' }) } }, }, }; ``` 值得注意的是,采用这种方法会改变应用外观的一致性和用户体验一致性,所以在决定前务必权衡利弊并测试不同场景下的表现效果。 另外一种思路是在每次进入页面之前检查是否应该显示返回按钮以及其对应的响应行为。这可以通过全局前置守卫配合路由参数传递的方式来完成,但同样适用于非标准路径控制之外的情况有限制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值