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

 更新时间: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'
		})
	  }
  })

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

相关文章

  • JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    这篇文章主要介绍了JavaScript实现的仿新浪微博原生态输入字数即时检查功能,涉及javascript事件响应及字符串的遍历、转换、判断等相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • 从JQuery源码分析JavaScript函数的apply方法与call方法

    从JQuery源码分析JavaScript函数的apply方法与call方法

    这篇文章主要介绍了从JQuery源码分析JavaScript函数的apply方法与call方法,本文结合JQuery源码和js高级程序设计再次探究apply方法与call方法,需要的朋友可以参考下
    2014-09-09
  • bootstrap模态框示例代码分享

    bootstrap模态框示例代码分享

    这篇文章主要为大家详细介绍了bootstrap模态框示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。
    2010-04-04
  • 微信小程序之小豆瓣图书实例

    微信小程序之小豆瓣图书实例

    本篇文章主要介绍了微信小程序之小豆瓣图书实例,具有一定的参考价值,有兴趣的同学可以了解一下。
    2016-11-11
  • JavaScript中对象介绍

    JavaScript中对象介绍

    这篇文章主要介绍了JavaScript中对象介绍,本文直接用实例讲解对象的创建、删除等操作,并总结了Object属性、Property属性,需要的朋友可以参考下
    2014-12-12
  • 如何用js控制frame的隐藏或显示的解决办法

    如何用js控制frame的隐藏或显示的解决办法

    如何用js控制frame的隐藏或显示的解决办法,需要的朋友可以参考一下
    2013-03-03
  • 微信开发之微信jssdk录音功能开发示例

    微信开发之微信jssdk录音功能开发示例

    这篇文章主要介绍了微信开发之微信jssdk录音功能开发示例,在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    微信小程序诞生之初,功能受限于小程序的理念,微信小程序要体现轻量级的应用特点,但在随后不断更新中,API接口很好的为小程序赋能,使其可以在不影响本质的情况下实现完善功能,这篇文章主要给大家介绍了关于微信小程序中正确使用地图的相关资料,需要的朋友可以参考下
    2021-09-09
  • 手机端js和html5刮刮卡效果

    手机端js和html5刮刮卡效果

    这篇文章主要为大家详细介绍了手机端js和html5刮刮卡效果,刮开之后是随机生成的8位码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论