微信小程序的页面导航跳转

声明式导航

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. 在弹出的自定义编译条件窗口,按需添加模式名称,启动页面,启动参数。

猜你喜欢

转载自www.cnblogs.com/liea/p/11803715.html