微信小程序 页面跳转传参的介绍

1.微信小程序 页面跳转传参介绍

在微信小程序开发中，页面跳转是一个不可或缺的功能。而在跳转时有时需要传一些参数给下一个页面进行处理，因此页面跳转传参也是小程序中常用的操作之一。本文将详细介绍微信小程序中页面跳转传参的方法。

1.1 页面跳转方法

微信小程序中页面跳转主要有两种方法：

使用navigateTo方法跳转

使用redirectTo方法跳转

navigateTo方法用于保留当前页面，跳转到应用内的某个页面，用户可以使用左上角的返回箭头返回到原页面。而redirectTo方法则用于关闭当前页面，跳转到应用内的某个页面，用户无法返回到原页面。

// navigateTo示例
wx.navigateTo({
  url: '/pages/detail/detail'
})
// redirectTo示例
wx.redirectTo({
  url: '/pages/index/index'
})

1.2 传参方法

在实际开发中，我们有时需要将一些参数传递给下一个页面进行处理，比如某个列表页跳转到详情页时需要传递该条数据的id。此时，我们需要在跳转时在url中携带相关参数。在下一个页面中通过options属性获取参数。

// 带参数跳转
wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})
// 接受参数
Page({
  onLoad(options) {
    console.log(options.id) // 输出 123
  }
})

注意：在实际开发中，我们一般会将参数进行urlencode编码，以避免一些特殊字符引起的问题。

1.3 传递对象

如果需要传递对象，则需要将对象转化为JSON字符串后再进行url编码。在接收时再将JSON字符串解析为对象。

// 带参数跳转
wx.navigateTo({
  url: '/pages/detail/detail?data=' + encodeURIComponent(JSON.stringify(object))
})
// 接受参数
Page({
  onLoad(options) {
    let data = JSON.parse(decodeURIComponent(options.data))
    console.log(data)
  }
})

1.4 navigateBack方法

在页面跳转时，有时需要在跳转前进行某些操作，或者需要跳转之后再回到原页面进行操作。此时我们需要使用navigateBack方法。该方法用于关闭当前页面返回上一页面或多级页面，并传递数据给上一个页面。

// 跳转前页面存储数据
wx.setStorageSync('key', 'value')
// navigateBack示例
wx.navigateBack({
  delta: 1,
  success: res => {
    let data = wx.getStorageSync('key')
    console.log(data) // 输出 value
  }
})

1.5 通过全局变量传递数据

除了通过url传递数据外，我们还可以使用全局变量来进行数据的传递。通过在App.js中定义全局变量，我们就可以在整个小程序中访问该变量。

// App.js
App({
  globalData: {
    data: ''
  }
})
// 其他页面
let app = getApp()
app.globalData.data = 'some data'

2. 总结

页面跳转传参在微信小程序开发中是一个必不可少的功能，在实际开发中需要熟练掌握相关方法。通过本文的介绍，我们可以清晰地了解到微信小程序中页面跳转传参的方法，以及在跳转中需要注意的事项，了解这些对于我们的开发工作是非常有帮助的。