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

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

第一种:标签这是最常见的一种跳转方式,相当于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'
		})
	  }
  })

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

相关文章

  • TypeScript 映射类型详情

    TypeScript 映射类型详情

    这篇文章主要介绍了TypeScript 映射类型详情,一个类型需要基于另外一个类型, 又不想拷贝一份,这个时候可以考虑使用映射类型,映射类型建立在索引签名的语法上,下面文章我们就从回顾下索引签名展开TypeScript 映射类型的相关资料,需要的朋友可以参考一下
    2021-12-12
  • JavaScript合并两个数组并去除重复项的方法

    JavaScript合并两个数组并去除重复项的方法

    这篇文章主要介绍了JavaScript合并两个数组并去除重复项的方法,涉及javascript操作数组的合并与去重的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript中展开运算符及应用的实例代码

    JavaScript中展开运算符及应用的实例代码

    这篇文章主要介绍了JavaScript中展开运算符及应用的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 一文详解requestAnimationFrame请求动画帧

    一文详解requestAnimationFrame请求动画帧

    requestAnimationFrame是一个用于动画效果的 API,它使用浏览器的刷新率来执行回调函数,通常每秒钟执行60次,这篇文章主要给大家介绍了关于requestAnimationFrame请求动画帧的相关资料,需要的朋友可以参考下
    2023-12-12
  • JavaScript 保护变量不被随意修改的实现代码

    JavaScript 保护变量不被随意修改的实现代码

    本文通过实例代码给大家分享JavaScript 保护变量不被随意修改的实现方法,需要的朋友参考下吧
    2017-09-09
  • JS版元素周期表实现方法

    JS版元素周期表实现方法

    这篇文章主要介绍了JS版元素周期表实现方法,可实现基于javascript动态生成元素周期表的功能,点击元素项可以在下方显示对应元素的各种常用属性,需要的朋友可以参考下
    2015-08-08
  • Next.js使用getServerSideProps进行服务器端渲染demo

    Next.js使用getServerSideProps进行服务器端渲染demo

    这篇文章主要为大家介绍了Next.js使用getServerSideProps进行服务器端渲染demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 自己使用js/jquery写的一个定制对话框控件

    自己使用js/jquery写的一个定制对话框控件

    自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中
    2014-05-05
  • JS基于面向对象实现的拖拽功能示例

    JS基于面向对象实现的拖拽功能示例

    这篇文章主要介绍了JS基于面向对象实现的拖拽功能,涉及javascript面向对象与页面元素动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • 在JS方法中返回多个值的方法汇总

    在JS方法中返回多个值的方法汇总

    本文给大家汇总了在javascript方法中返回多个值的方法,都是在个人项目中检验过的,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-05-05

最新评论