小程序中所有页面的跳转都是通过路由的方式进行页面切换,又框架进行管理。
页面栈
框架以栈的形式维护当前所有页面,当需要路由切换时,页面栈表现如下
1、初始化页面 新页面入栈 小程序打开时会自动创建
2、打开新页面 新页面入栈
3、页面重定向 当前页面出栈,新页面入栈
4、页面返面 页面不断出栈,直到返回Tab页面
5、Tab切换 页面全部出栈,只留下新的Tab页面
6、重加载 页面全部出栈,只留下新的页面
路由切换方式(.JS,.wxml)
通过在.js调用微信API者.wxml中使用微信组件实现页面的跳转。
一、.js中实现页面的跳转,可使用的方法如下:
1、wx.navigateTo(object):保留当前页面,跳转到应用的某个页面;打开新页面(新页面入栈)
2、wx.redirectTo(object):关闭当前页面,跳转到应用内的某个页面。页面重定向(当前页面出栈,新页面入栈)
3、wx.reLauch(object):关闭所有页面,打开到应用内的某个页面 。重加载 (页面全部出栈,只留下新的页面);
4、wx.navigateBack(object)关闭当前页面,返回上一页面或者多级页面。返回上一页面,页面返回(页面不断出栈)
5、wx.switchTab(object),跳转到新的tabBar页面。并关闭其他页面;(页面全部出栈,只留下新的Tabar页面)
详情请查看官方网址:https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxrelaunchobject;
示例如下:
1、页面切换
wx.navigateTo({
url: '../index/index'
})
2、页面重定向
wx.redirectTo({
url: '../index/index'
'
})
3、重加载
wx.reLaunch({
url: '../index/index' //跳转路径
})
4、页面返回
wx.navigateBack({
delta: 2 //返回页面数
})
5、tabBar页面切换:
wx.switchTab({
url: '../others/others'
})
二、、.wxml中页面跳转
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
使用navigator组件实现页面跳转,示例如下:
我的文件结构:
app.json配置如下
gitHub代码如下:
https://github.com/xiaoyaoyao/wx-xiaochengxu.git
https://github.com/xiaoyaoyao/wx-xiaochengxu.git
https://github.com/xiaoyaoyao/wx-xiaochengxu.gitggitgithttps://github.com/xiaoyaoyao/wx-xiaochengxu.gi