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

789人浏览 / 0人评论 / 添加收藏

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

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"
}
以上就是微信小程序页面跳转传递值的几种方法。使用时应根据实际需求选择合适的方法。

 

全部评论