最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式
一、wx.navigateTo(OBJECT)
这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面”
类似于html中的 window.location.href=" "
eg:
wx.navigateTo({
url: 'test?id=1'
})
实际效果如下:
小程序中左上角有一个返回箭头,可返回上一个页面
也可以通过方法 wx.navigateBack 返回原页面
二、wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
类似于html中的 window.open('你所要跳转的页面');
eg:
wx.redirectTo({
url: 'test?id=1'
})
效果如下:
左上角没有返回箭头,不能返回上一个页面
三、wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
eg:
{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
wx.switchTab({
url: '/index'
})
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
四、wx.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
跟wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同
这里要提到小程序中的 getCurrentPages() 方法
在wx.navigateTo中,每跳转一个新的页面,其原始页面就会被加入堆栈,通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面;
wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面
wx.reLaunch 方法则会清空当前的堆栈。
eg:
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回b页面
wx.navigateBack({
delta: 1
})
// 此处是B页面
wx.redirectTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,则会返回a页面
wx.navigateBack({
delta: 1
})
// 此处是B页面
wx.reLaunch({
url: 'C?id=1'
})
// 在C页面内 navigateBack,则无效
- 大小: 9.6 KB
- 大小: 8.7 KB
- 大小: 20 KB
分享到:
相关推荐
微信小程序是一种轻量级的应用开发平台,它允许开发者在微信内构建无需下载安装的应用,提供便捷的服务和用户体验。本项目“微信小程序-模仿QQ小程序”旨在通过模仿QQ小程序的界面和功能,帮助开发者学习和掌握微信...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,为用户提供便捷的服务体验。本资源包含2000套微信小程序的源码,对于开发者来说是一份宝贵的参考资料,可以用来学习、研究或者作为开发新...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要针对移动互联网用户,特别是微信用户。它允许开发者在微信内部构建无需下载安装即可使用的应用,提供了丰富的API接口和组件,便于快速开发出各种功能...
OneNET是中国移动旗下的物联网开放平台,集成了数据连接、处理、分析以及应用开发等功能,而微信小程序则是一种轻量级的应用开发模式,无需安装即可在微信内使用,适用于各种生活服务场景。 在这个源码包中,主要...
对于学习者来说,这个项目可以帮助理解微信小程序的开发流程,包括页面跳转、数据交互、API调用等。通过实际操作,可以提升对小程序开发的理解和应用能力,同时也可以作为毕业设计或期末大作业的一个实用案例。 六...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的应用体验。"美食列表源码"是针对微信小程序开发者,特别是初学者的一个实践项目,它可以帮助学习者...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“微信小程序淘宝个人中心页面”的示例中,开发者模仿了淘宝网的个人中心界面,...
微信小程序是一种轻量级的应用框架,它允许开发者通过编写 JavaScript、WXML(微信小程序标签语言)和WXSS(微信小程序样式语言)来构建在微信平台上运行的应用。 首先,让我们了解微信小程序的基本架构。每个小...
微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转。 1、js导航 (1)、wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的线上服务。在这个“微信小程序源码_电商简约模板.zip”压缩包中,我们可以找到一个用于构建电商...
微信小程序非跳转式组件授权登录是微信小程序中实现用户授权登录的一种方式,该方法不需要通过跳转到外部页面即可完成授权登录过程,提升了用户体验。在微信小程序中,授权登录通常用于获取用户的个人信息,比如昵称...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“微信小程序大作业”项目中,我们可以看到一个学生或者团队以此为主题完成的...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要针对移动端,特别是智能手机用户。它允许开发者在微信内创建和发布原生体验的应用,无需通过应用商店即可使用,极大地降低了移动应用的开发门槛。本资源...
微信小程序是一种轻量级的应用形态,由微信平台提供,无需下载安装即可使用。它的核心组成部分包括WXML(微信标记语言)、WXSS(微信样式表语言)和JavaScript,这三者分别负责结构、样式和逻辑处理。在源码中,你会...
微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的应用服务。在这个项目中,我们讨论的是一个基于微信小程序开发的小说阅读器源代码,它实现了小说...
1. **微信小程序开发框架**:微信小程序基于微信自家的开发工具,使用了WXML(WeChat Markup Language)和WXSS(WeChat Style Sheets)作为前端页面描述语言,结合JavaScript进行业务逻辑处理。开发者需要熟悉这三种...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要针对移动端的场景,提供无需安装即可使用的便捷体验。这个“微信小程序-新闻资讯”源码包,显然是一个用于构建新闻资讯类小程序的代码资源,适合开发者...
5. **页面路由管理**:微信小程序的页面跳转通过`wx.navigateTo`、`wx.reLaunch`等函数实现,源码中可以看到如何定义和控制页面间的导航。 6. **组件化开发**:小程序支持组件化开发,例如,可以自定义电影卡片组件...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,为用户提供便捷的、无需下载安装即可使用的线上服务。米家商城是小米公司官方的电商平台,它利用微信小程序的技术,为用户提供了浏览商品...
以上四种方式是在微信小程序中实现页面跳转的常见方法,它们各有所长,适用于不同的场景需求。开发者可以根据实际的业务逻辑和用户体验来选择合适的方法。 在学习和应用微信小程序页面跳转时,开发者需要注意小程序...