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

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

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

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跳转方法,我也会在视频里给大家做演示。

相关文章
|
移动开发 编解码 小程序
(H5小程序页面html)页面跳转参数丢失
在 URL 参数字符串中用 key=value 这种键值对的形式进行传递参数,多个键值对中间用 & 连接。如果在 value 中也存在 & 这个符号的话,不对其进行编码,就会引起歧义,就会发生参数丢失问题。
282 0
|
5月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
|
5月前
|
存储 小程序 JavaScript
微信小程序(十二)小程序页面跳转及传参
Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。 小程序这部分到是提供了不少的方法,大概整理了一下。
144 0
|
移动开发 小程序 安全
微信公众号开发之H5页面跳转到指定的小程序
微信公众号开发之H5页面跳转到指定的小程序
945 0
微信公众号开发之H5页面跳转到指定的小程序
|
18天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
28天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
28天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
28天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
28天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
28天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。