uni做微信小程序 tab栏 禁止重复点击跳转页面路径

本文介绍了在uni-app中如何优化页面间的跳转,避免使用uni.navigateTo导致的问题,并提供了一个公共tab组件示例,通过判断禁止重复跳转到当前页,同时采用uni.redirectTo来解决频繁跨页面跳转可能引发的问题。

uni.navigateTo 保留当前页。(不会关闭当前页)跳转到某个页面内。它会进行叠加,在h5与小程序上频繁互跳,就会出现不能跳转问题。所以跳转时用 uni.redirectTo

1. 公共tab组件,点击跳转时 加判断禁止

  props: {
			banclick:{
				type: '',
				default: ''
			}
    	},
changeItem(item) {
	// item 要跳转的路径 this.banclick 父组件传的值,当前所处的页面路径
	if(this.banclick == item.path){
			console.log('禁止')
			return false;
	}
	let _this = this;
	// 用redirectTo 避免navigateTo 频繁跳转出现问题
	uni.redirectTo({
		url: item.path
	});
},

2. tab 页面 ,传当前页面所处的路径url

	<!-- tab组件上绑定 banclick 传 值 -->
   <zdy-tabbar :current-page="1" ref="tabBar" :banclick='route'></zdy-tabbar>
onLoad(){
	 let curPage = getCurrentPages();
	 let route = curPage[curPage.length - 1].route; //获取当前页面的路由
	 this.route = '/'+ route;
}
微信小程序中,如果你通过 `web-view` 组件加载了一个 H5 页面,并希望从 H5 页面返回到小程序的上一个页面或关闭当前 H5 页面并返回到小程序的主页或其他页面,可以使用微信小程序提供的 **JSSDK** 和 **小程序与 H5 的通信机制** 来实现。 --- ### ✅ 实现思路 1. 小程序通过 `web-view` 加载 H5 页面。 2. H5 页面中通过微信 JSSDK 调用小程序的 API,比如 `navigateBack` 或 `switchTab` 等。 3. 微信提供了 `wx.miniProgram` 对象供 H5 页面调用小程序功能。 --- ### ✅ 示例代码 #### 1. 小程序页面中使用 `web-view` 加载 H5 页面 ```html <!-- pages/webview/webview.wxml --> <web-view src="https://yourdomain.com/h5page.html"></web-view> ``` #### 2. H5 页面(https://yourdomain.com/h5page.html) ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5 Page</title> <script> function backToMiniProgram() { if (typeof wx !== 'undefined' && wx.miniProgram) { // 返回上一级页面 wx.miniProgram.navigateBack({ delta: 1, success: function (res) { console.log("返回成功"); }, fail: function (err) { console.error("返回失败", err); } }); } else { alert("当前不在微信小程序环境中"); } } </script> </head> <body> <h1>这是 H5 页面</h1> <button onclick="backToMiniProgram()">返回小程序</button> </body> </html> ``` --- ### 🔍 说明 - `wx.miniProgram.navigateBack({ delta: 1 })`:返回小程序的上一页。 - 你也可以使用 `wx.miniProgram.switchTab({ url: '/pages/index/index' })` 跳转到指定 tab 页面。 - 如果 H5 页面需要与小程序通信(如传递参数),可以通过 URL 参数或者使用 `postMessage` 接口进行双向通信。 --- ### ✅ 注意事项 - H5 页面必须在小程序的 **业务域名白名单** 中,否则 `web-view` 无法加载。 - 微信 JSSDK 需要配置权限签名,但如果是通过小程序的 `web-view` 加载,`wx` 对象已经注入,可以直接使用 `wx.miniProgram`。 - H5 页面不能直接调用小程序的非白名单 API。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值