微信小程序> 小程序开发之路由navigateTo、reLaunch、redirectTo、switchTab及传值问题

小程序开发之路由navigateTo、reLaunch、redirectTo、switchTab及传值问题

浏览量:1138 时间: 来源:钢丝球 M.Siebel

页面路由

在小程序中所有页面的路由全部由框架进行管理。

注:路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
小程序
注:堆是先进先出,栈是先进后出

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意:

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

路由方式

对于路由的触发方式以及页面生命周期函数如下:
小程序

wx.navigateTo(Object object)  – 打开新页面

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面
参数
小程序)

例如
完整形式

wx.navigateTo({      url: '/pages/index/index',      success:function(){        //接口调用成功的回调函数      },      fail:function(){        //接口调用失败的回调函数      },      complete:function(){        //接口调用结束的回调函数(调用成功、失败都会执行)      }    })

使用中我们通常简写为

wx.navigateTo({      url: '/pages/index/index',  })

navigateTo传值问题

传单个值

Page({  data: {    value:1  },  //跳转  skipClick() {    wx.navigateTo({      url: '/pages/index1/index1?value=' + this.data.value    })  },})

接收端index1.js

onLoad: function (options) {    console.log(options.value) },

传多个值

Page({  data: {    value1: 1,    value2: 2,    value3: 3  },  //跳转  skipClick() {    var array = new Array()    array = [this.data.value1, this.data.value2, this.data.value3]    wx.navigateTo({      url: '/pages/index1/index1?array=' + JSON.stringify(array),    })  },})

接收端index1.js

onLoad: function (options) {    var array = new Array()    array = JSON.parse(options.array);    console.log(array[0])    console.log(array[1])    console.log(array[2])  },

注:多值传值时一定要传加上JSON.parse()
传值端JSON.stringify(array),
接收端JSON.parse(options.array);
否则传过的将字符串的形式接收,无法正常解析

wx.switchTab(Object object) – 跳转到 tabBar 页面

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
参数
小程序
例如

wx.switchTab({      url: '/pages/index/index'    })

传值同navigateTo一样

wx.reLaunch(Object object)

关闭所有页面,打开到应用内的某个页面,可以跳转到tabbar的页面
参数
小程序
例如:

wx.reLaunch({      url: '/pages/index/index'    })

传值同navigateTo一样

wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
参数
小程序

例如:

wx.redirectTo({      url: '/pages/index/index'    })

传值同navigateTo一样

wx.navigateBack(Object object) – 返回上一页面或多级页面

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

参数
小程序
例如
注:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而redirectTo 方法则不会。所以只要navigateTo的跳转才可以使用wx.navigateBack方法

wx.navigateBack({  delta: 1})

参数:delta为返回的层数,如果为1,则返回上一层,如果返回层数大于进栈的层数,则按照最大层数算

注:

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。




版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎