微信小程序 页面跳转传递值几种方法详解

微信小程序页面跳转时可以传递参数，主要有以下几种方式：

1. URL传参

通过在URL中携带参数传递数据，如："/pages/details/details?id=1001"

在接收页面的onLoad方法中可以获取传递的参数：

onLoad: function(options) {
   console.log(options.id) //输出1001
}

2. 路由传参

通过页面路由函数wx.navigateTo或wx.redirectTo的第二个参数传递数据：

wx.navigateTo({
  url: '/pages/details/details',
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
  }
})

在被打开页面的onLoad方法中使用wx.onEvent监听事件，并获取数据：

onLoad: function(options) {
   var _this = this
   // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
   const eventChannel = this.getOpenerEventChannel()
   eventChannel.on('acceptDataFromOpenerPage', function(data) {
     console.log(data) //输出{data: 'test'}
     _this.setData({
       test: data.data
     })
   })
}

3. 本地缓存传参

通过本地缓存存储数据，在跳转后的页面中获取缓存数据：

跳转前页面存储数据：

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

跳转后页面获取缓存数据：

onLoad: function () {
   var value = wx.getStorageSync('key')
   console.log(value) //输出"value"
}

4. 全局变量传参

通过全局变量存储数据，在跳转后的页面中获取全局变量数据：

跳转前页面存储数据：

// app.js
App({
  globalData:{
    key: 'value'
  }
})
//page.js
wx.navigateTo({
   url: '/pages/index/index'
})

跳转后页面获取全局变量数据：

onLoad: function () {
   var app = getApp()
   console.log(app.globalData.key) //输出"value"
}

以上就是微信小程序页面跳转传递值的几种方法。使用时应根据实际需求选择合适的方法。