微信小程序事件点击跳转页面的五种方法

第一种:标签

这是最常见的一种跳转方式,相当于html里的a标签

java 复制代码
<navigator url="/pages/main/main"></navigator>

第二种:wx.navigateTo({})方法

1.前端wxml

java 复制代码
   <button  bindtap="getCeshi" type="primary"> 测试按钮 </button>

2.js应用

java 复制代码
// 测试按钮点击事件处理函数
Page({
		data: {
		  },
	  getCeshi() {
	    wx.navigateTo({
	      url: '/pages/main/main',
	    })
	  }
  })

第三种:wx.redirectTo({})
功能描述: 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

类似于页面跳转时 重定向页面,类似于html中的 window.open('...');跳转后左上角出现返回小箭头,点击后可返回原本页面.

java 复制代码
Page({
		data: {
		  },
	  getCeshi() {
	    wx.redirectTo({
		  url: 'test?id=1'
		})
	  }
  })

第四种:wx.switchTab({})
功能描述 跳转到 tabBar ()页面,并关闭其他所有非 tabBar 页面,该方法只能跳转tabbar页面

TabBar,中文叫标签栏、底部tab栏、底部导航等等。TabBar 中的各个页面是并列关系,并且只能选中一个。选中时,标签会高亮。,且左上角不会出现返回箭头

![在这里插入图片描述](https://img-blog.csdnimg.cn/0695e489f142457884b7a8ac51a39231.png

java 复制代码
Page({
		data: {
		  },
	  getCeshi() {
	    wx.switchTab({
		  url: '/index'
		})
	  }
  })

第五种:wx.reLaunch({})

功能描述 关闭所有页面,打开到应用内的某个页面.且左上角不会出现返回箭头。

java 复制代码
Page({
		data: {
		  },
	  getCeshi() {
	   wx.reLaunch({
		  url: 'test?id=1'
		})
	  }
  })
相关推荐
老华带你飞4 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗5 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张12 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师12 小时前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪13 小时前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图20915 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa17 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074718 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa19 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
低代码布道师19 小时前
少儿舞蹈小程序(13)作品播放量累加及点赞
低代码·小程序