声明式导航
1.导航到非tabBar页面
非tabBar页面指的是没有被当作tabBar进行切换的页面。
示例代码:
<navigator url='pages/info/info' > 点击跳转</navigator>
上述代码使用url属性置顶要跳转到的页面路径,其中页面路径应该以/开头,且路径必须提前在app.json的pages 节点下声明,才能实现正常的跳转。
2.导航到tabBar页面
tabBar页面指的是被当作tabBar进行页面切换的页面。如果navigator组件单纯使用url属性,无法导航到tabBar页面,需要结合open-type属性进行导航。
<navigator url="/pages/home/home" open-type="switchTab">点击跳转</navigator>
3.后退导航
如果要后退到上一页面或多级页面,需要把open-type设置为navigateBack, 同时使用delta属性指定后退的层数。
<navigator open-type="navigateBack" delta="1">返回上一页面</navigator>
编程式导航
1.导航到非tabBar页面
通过wx.navigateTO(Object)方法,可以跳转到应用内的某个页面,但不能跳转到tabBar页面上。其中Object参数对象的属性列表如下。
url: string,必填,需要跳转的应用非tabBar路径,路径后面可以携带参数参数与路径之间?分隔,参数键与值用=相连,不同参数用&分隔。
success: function,选填,接口调用成功的回调函数。
fail: function,选填,接口调用失败的回调函数。
complate: function,选填,接口调用结束的回调函数,调用成功和失败都会执行。
<view><button bindtap="btn">logs</button></view> btn: function () { wx.navigateTo({ url: '/pages/logs/logs', }) }
2.导航到tabBar页面
通过wx.switchTab(Object, Object)方法,可以跳转到tabBar页面,并关闭其他所有非tabBar页面,其中Object参数对象的属性如下:
url: string,必填,需要跳转的应用非tabBar路径,路径后面可以携带参数参数与路径之间?分隔,参数键与值用=相连,不同参数用&分隔。
success: function,选填,接口调用成功的回调函数。
fail: function,选填,接口调用失败的回调函数。
complate: function,选填,接口调用结束的回调函数,调用成功和失败都会执行。
3.后退导航
通过wx.navigateBack(Object) 方法,关闭当前页面,返回上一页面或多级页面参数如下:
delta: number,必填,返回的页面数,如果delta大于现有页面数,则返回首页
success: function,选填,接口调用成功的回调函数。
fail: function,选填,接口调用失败的回调函数。
complate: function,选填,接口调用结束的回调函数,调用成功和失败都会执行。
导航传参:
小程序中url传参与html 一样,可以在地址后面传递参数。
接收参数:
不论是声明式导航还是编程式导航,最终导航到的页面可以在onLoad生命周期函数中接收传递过来的参数。
onLoad: function (options) {
console.log(options)
}
自定义编译模式快速传参:
小程序每次修改代码并编译后,会默认从首页进入,但是在开发阶段,我们经常会针对特定页面进行开发,为了方便编译后直接进入对应页面,可以配置自定义编译模式,步骤如下:
1.点击工具栏的普通编译,下拉菜单,
2. 单击下拉菜单的添加编译模式选项
3. 在弹出的自定义编译条件窗口,按需添加模式名称,启动页面,启动参数。