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


    声明式导航

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

  • 相关阅读:
    Stm32高级定时器(一)
    AES算法简介
    vsim仿真VHDL输出fsdb格式文件
    ncsim仿真VHDL
    云贵高原骑行
    触发器(笔记)
    几种常见的十进制代码(笔记)
    时序电路分类
    组合逻辑电路和时序逻辑电路比较
    数字电路基础(网络整理)
  • 原文地址:https://www.cnblogs.com/liea/p/11803715.html
Copyright © 2020-2023  润新知