小程序里页面跳转的两种方式

简介: 小程序里页面跳转的两种方式

我们在小程序里做页面跳转有两种方式

1,借助navigator组件2,借助wx.自带方法,在点击的时候做页面跳转 如下图所示的几个wx.方法


19-1,navigator实现页面跳转


navigator其实和我们html里的a标签有点像,也是为了实现页面跳转的。官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

我们想用navigator来跳转到别的页面,其实很简单,只需要如上图所示,做简单配置即可。当然了我们使用navigator来跳转页面时,分下面几种情况。当然这些跳转方式都是通过配置open-type属性来定义的。


19-2,navigator的跳转方式


下面我把一些常用的open-type属性列出来给大家,方便大家以后使用。


open-type值 说明 对应wx方法
navigate 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 对应wx.navigateTo
redirect 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 对应 wx.redirectTo
switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 对应 wx.switchTab
reLaunch 关闭所有页面,打开到应用内的某个页面 对应 wx.reLaunch
navigateBack 关闭当前页面,返回上一页面或多级页面 对应 wx.navigateBack
exit 退出小程序,target="miniProgram"时生效

如我们使用navigate做页面跳转,只写个url属性,open-type的值默认就是navigate



这样我们跳转到新页面后,会有一个返回按钮。我们可以通过这个返回按钮返回上一个页面。



我会在视频里为大家一个个演示其余的方法和功能。


19-3,点击事件结合wx方法实现跳转


我们做页面跳转除了使用navigate组件外,还可以通过点击事件借助wx方法实现页面跳转。

常用的wx方法:

wx方法 说明
wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch 关闭所有页面,打开到应用内的某个页面
wx.navigateBack 关闭当前页面,返回上一页面或多级页面
我这里给大家举个简单的例子

在wxml里设置点击事件



然后再js里设置点击后跳转页面



这样我们就可以实现页面跳转了,和使用navigate做跳转一样的效果。其余的几个wx跳转方法,我也会在视频里给大家做演示。

相关文章
|
小程序 JavaScript
微信小程序 页面跳转 传递参数
微信小程序 页面跳转 传递参数
49 0
|
5月前
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
364 3
|
3月前
|
小程序 JavaScript
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
这篇文章讲解了微信小程序中页面跳转的方法,包括使用按钮点击事件和调用方法实现跳转,以及推荐使用`this.pageRouter.navigateTo`代替`wx.navigateTo`的方式。
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
47 0
|
4月前
|
JavaScript 小程序 前端开发
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
140 0
|
4月前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
117 0
|
小程序
微信小程序从零开始开发步骤(六)4种页面跳转的方法
微信小程序从零开始开发步骤(六)4种页面跳转的方法
228 0
|
6月前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
小程序
微信小程序-页面跳转Tabbar
首先我们需要搭建一个 Tabbar,在搭建之前我们将需要跳转的页面创建一下待会需要使用到。
92 0
|
6月前
|
小程序
微信小程序页面跳转三种方式
微信小程序页面跳转三种方式
114 0