微信小程序导航与参数传递


// 官方开发文档
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html?t=20161122

API (wx.navigateTo(OBJECT))

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

  • url 类型(String) 必填(是) 需要跳转的应用内页面的路径,路径后可以带参数。
  • success 类型(Function) 必填(否) 接口调用成功的回调函数
  • fail 类型(Function) 必填(否) 接口调用失败的回调函数
  • complete 类型(Function) 必填(否) 接口调用结束的回调函数(调用成功、失败都会执行)

注意: 参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’

// 跳转页面
wx.navigateTo({
  // 需要跳转的应用内页面的路径 , 路径后可以带参数
  url: '../logs/logs?name=nljb&addr=www.nljb.net',
  // 接口调用成功的回调函数
  success: function (res) {
    console.log(res)
  },
  // 接口调用失败的回调函数
  fail: function (err) {
    console.log(err)
  }
})
// 目标页面
Page({
  // option 为传入参数
  onLoad: function(option){
    console.log(option.name)
    console.log(option.addr)
  }
})

注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。


API (wx.redirectTo(OBJECT))

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

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

API (wx.navigateBack(OBJECT))

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

  • delta 类型(Number) 默认值(1) 返回的页面数,如果 delta 大于现有页面数,则返回到首页。