微信小程序（十二）小程序页面跳转及传参

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

Bindtap传参的问题解决了，那么跳页的时候，也需要传递参数，毕竟，从文章列表页，跳到文章详情页，是需要文章id的。

小程序这部分到是提供了不少的方法，大概整理了一下。

微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主，tabbar的存在，有TAB页面的跳转。

为了微信小程序的简介方便，规定页面路径只能是十层，应尽量避免过多的交互方式。

1.wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

wx.navigateTo({
  url: 'test?id=1'
})

url即目标页面，保证是非tabbar的页面的路径。路径后可以带参数，参数和路径之间用?=连接，不同参数用&分开，如'path?key=value&key2=value2'。需要获取页面A的参数，代入页面B中进行操作。在生命周期函数中获取option.id并转成实体，进行操作和赋值。

Page({
    onLoad: function(option){
        console.log(option.id)
    }
})

2.wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: 'test?id=1'
})

3.wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。页面的跳转存储逻辑实际是一个栈队列，先入后出的形式，即逐层进入，如果返回会进入的页面先返回，因此wx.navigateBack()中转递的参数默认值为1，即退后一个页面，可以修改数值，进行多层的返回。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
  
// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})
  
// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})
  
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

4.wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径只允许写在app.json中tabbar配置的页面。

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

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

5.wx.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

wx.reLaunch({
  url: 'test?id=1'
})

6. 使用组件

在元素里面使用属性url就可以

Index.wxml

 <navigator url=”../test/test?id=458”> 点击跳转</navigator>

------------------------我是分割线-------------------------------

上面大概是页面跳转的六种方式，简单的传参其实在路由里写就可以了，但是要是传递数组，或者对象之类的，直接在路由里编写可能就是不行了。

我们需要处理一下：

使用JSON.stringify参数转换成string

//这里我们跳转详情界面
queryItemClick: function (e) {
    var that = this
    //拿到点击的index下标
    var index = e.currentTarget.dataset.index
    //将对象转为string
    var queryBean = JSON.stringify(that.data.queryList[index])
    wx.navigateTo({
      url: '../queryResult/queryResult?queryBean=' + queryBean,
    })
  }
接受的时候，在用JSON.parse将数据转换回来。

/***重点内容*
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    var queryBean = JSON.parse(options.queryBean);
    that.setData({
      queryBean: queryBean
    })
    //console.log(that.data.queryBean)
  }

有好的建议去，请在下方输入你的评论。

欢迎访问个人博客：guanchao.site

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”