javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 小程序事件点击跳转页面

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

作者:曦月合一

本文主要介绍了微信小程序事件点击跳转页面的五种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

<navigator url="/pages/main/main"></navigator>

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

1.前端wxml

   <button  bindtap="getCeshi" type="primary"> 测试按钮 </button>

2.js应用

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

第三种:wx.redirectTo({})

功能描述: 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

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

Page({
		data: {
		  },
	  getCeshi() {
	    wx.redirectTo({
		  url: 'test?id=1'
		})
	  }
  })

第四种:wx.switchTab({})

功能描述

跳转到 tabBar ()页面,并关闭其他所有非 tabBar 页面,该方法只能跳转tabbar页面

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

Page({
		data: {
		  },
	  getCeshi() {
	    wx.switchTab({
		  url: '/index'
		})
	  }
  })

第五种:wx.reLaunch({})

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

Page({
		data: {
		  },
	  getCeshi() {
	   wx.reLaunch({
		  url: 'test?id=1'
		})
	  }
  })

 到此这篇关于微信小程序事件点击跳转页面的五种方法小结的文章就介绍到这了,更多相关小程序事件点击跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文