微信小程序开发页面路由和跳转（微信小程序开发页面路由和跳转怎么设置）-云科研-广西壮族自治区亚热带作物研究所

微信小程序开发页面路由和跳转（微信小程序开发页面路由和跳转怎么设置）

广西热作所 • 2023年5月10日上午9:21 • 科研百科 • 阅读 316

## 问题背景

客户端和前端开发过程中，页面之间互相跳转是十分常见的场景，本文将介绍微信小程序开发过程是如何实现页面路由和跳转的。

## 问题分析

1、页面跳转相关

小程序启动，初始化第一个页面（默认是app.json中pages配置页面中的第一个页面）

跳转新页面，调用wx.navigateTo或者 <navigator />

页面重定向，调用wx.redirectTo或者 <navigator />

页面返回，调用wx.navigateBack,页面左上角返回按钮

tabBar页面切换，调用wx.switchTab实现

plus: 所有页面都必须在app.json中注册

## 问题解决

话不多说，直接上代码

（1）wx.navigateTo，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

/* navigateTo进行页面跳转 */ router1: function () { wx.navigateTo({ url: '/pages/index2/index', success: function(res) { console.log('router1 success'); }, fail: function(res) { console.log('router1 fail'); console.log(res) } }) },

（2）wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

/* redirectTo进行页面跳转 */ router2: function () { wx.redirectTo({ url: '/pages/index3/index', success: function(res) { console.log('router3 success'); }, fail: function(res) { console.log('router3 fail'); console.log(res) } }) },

（3）wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

/* switchTab进行页面跳转 */ router3: function () { wx.switchTab({ url: '/pages/index4/index' }) }

（4）wx.navigateBack返回上一页

/* 回到上个页面 */ back_before: function () { wx.navigateBack({ delta: 1, }) },

对应的app.json配置文件可参考：

{ "pages":[ "pages/index/index", "pages/index2/index", "pages/logs/logs", "pages/index3/index", "pages/index4/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "list": [ { "pagePath": "pages/index3/index", "text": "index3"}, { "pagePath": "pages/index4/index", "text": "index4"} ] }}

## 问题总结

本文初步介绍了微信小程序开发过程是实现页面路由和跳转的几种方案，有兴趣的同学可以进一步深入研究。