小程序页面间传参的五种方式实例详解

下面就为你详细讲解“小程序页面间传参的五种方式实例详解”的完整攻略。

一、背景

小程序开发中，需要在不同页面间传递参数，以便实现不同页面间的数据交互，并在目标页面中通过这些参数做出相应的操作。下面，我们就来看一下小程序页面间传参的五种方式实例详解。

二、方式一：query参数传递

query参数传递是小程序页面间传参数最常用的方式。通过传递query参数，目标页面就可以通过查询当前页面的url获取传递来的参数。示例代码如下：

//在当前页面，拼接目标页面url时传递参数
wx.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=test'
})

//在目标页面代码中，获取传递过来的参数
Page({
  onLoad: function(options) {
    console.log(options.id) //输出'123'
    console.log(options.name) //输出'test'
  }
})

三、方式二：事件传递

通过事件传递，可在两个页面间传递任意参数，只要在事件中传递就行。示例代码如下：

//在当前页面，触发目标页面的事件并传递参数
this.triggerEvent('eventTest',{id:123,name:'test'})

//在目标页面的代码中，监听事件并接收传递过来的参数
MyComponent({
  properties: {
     //组件的属性列表
  },
  methods: {
    eventTest(e) {
      console.log(e.detail)  //输出'{id:123,name:'test'}'
    }
  }
})

四、方式三：GlobalData传递

小程序中的globalData是全局的数据，可以在任意页面访问，因此可通过修改globalData数据来实现参数传递。示例代码如下：

//在当前页面，修改全局的globalData数据并传递参数
getApp().globalData.id = 123
getApp().globalData.name = 'test'

//在目标页面的代码中，访问全局的globalData获取传递过来的参数
Page({
  onLoad: function() {
    console.log(getApp().globalData.id) //输出'123'
    console.log(getApp().globalData.name) //输出'test'
  }
})

五、方式四：缓存Storage传递

小程序中的Storage可以让我们在不同的页面间存储数据，并且在任意页面间读取相同的数据。示例代码如下：

//在当前页面，通过Storage存储传递参数
wx.setStorageSync('id', '123')
wx.setStorageSync('name', 'test')

//在目标页面代码中，通过Storage获取传递过来的参数
Page({
  onLoad: function() {
    console.log(wx.getStorageSync('id')) //输出'123'
    console.log(wx.getStorageSync('name')) //输出'test'
  }
})

六、方式五：页面间获取引用

通过给一个页面传递一个引用，目标页面就可以直接访问传递过来页面的数据。示例代码如下：

//在当前页面，拼接目标页面的url时传递引用和参数
wx.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=test&prePage=currentPage'
})

//在目标页面代码中，通过getCurrentPages获取当前页面集合，并访问传递页面的数据
Page({
  onLoad: function(options) {
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2]
    console.log(prePage.options.id) //输出'123'
    console.log(prePage.options.name) //输出'test'
  }
})

以上就是小程序页面间传参的五种方式实例详解的全部内容。无论是通过query参数、事件传递、修改globalData、缓存Storage还是页面间获取引用，都可以实现不同页面之间的数据交互，方便开发。