小程序如何在页面之间传值-猿码集

在小程序开发中，页面间传值是常见的需求，本文将详细介绍小程序如何在页面之间传值。

1. 页面跳转传值

小程序中的页面跳转采用类似于<a>标签的<navigator>标签，通过设置url参数实现页面跳转的目的。其中，可以通过在url参数中添加query参数来传递数据。

1.1 跳转页面传值

在跳转页面时，可以在url中添加query参数，例如：

"../targetPage/index?name=张三&age=20"

，其中name和age为参数名，张三和20为参数值。在目标页面内可以通过页面的onLoad事件获取传递过来的参数，如下所示：

onLoad: function(options) {
  console.log(options.name) // 输出“张三”
  console.log(options.age) // 输出“20”
}

1.2 返回页面传值

在返回页面时，可以在navigateBack方法的第二个参数中传递数据，例如：

wx.navigateBack({
  delta: 1,
  success: function(res) {
    res.eventChannel.emit('someEvent', {data: '返回页面传值'})
  }
})

其中，delta表示返回页面的层数，success回调函数是跳转成功后的回调函数。在目标页面内需要通过事件监听的方式获取传递过来的参数，如下所示：

onLoad: function(options) {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('someEvent', function(data) {
    console.log(data) // 输出“{data: '返回页面传值'}”
  })
}

2. 全局变量传值

在小程序中，可以使用全局变量存储数据。通过在app.js文件中定义全局变量，并在其他页面中引用即可实现数据共享。

2.1 app.js文件定义全局变量

在app.js文件中，可以使用globalData定义全局变量。例如：

App({
  globalData: {
    userInfo: null
  }
})

其中，userInfo为全局变量名。

2.2 在其他页面中引用全局变量

在其他页面中，使用getApp方法获取app实例，并通过app实例的globalData属性访问全局变量。例如：

var app = getApp()
console.log(app.globalData.userInfo)

3. storage本地缓存传值

小程序提供了storage本地缓存，可以将数据存储到本地，方便多个页面间传递数据。

3.1 存储数据到本地

通过wx.setStorageSync方法可以将数据存储到本地。例如：

wx.setStorageSync('key', 'value')

其中，key为要存储的数据的key值，value为要存储的数据。

3.2 获取本地存储的数据

通过wx.getStorageSync方法可以获取本地存储的数据。例如：

var value = wx.getStorageSync('key')

其中，key为要获取数据的key值。

3.3 删除本地存储的数据

通过wx.removeStorageSync方法可以删除本地存储的数据。例如：

wx.removeStorageSync('key')

其中，key为要删除数据的key值。

4. EventBus实现页面传值

在小程序中，可以使用第三方库EventBus实现页面之间传值。EventBus是一个事件总线库，提供了类似于Vue中的$on、$emit、$off等方法。

4.1 安装EventBus库

EventBus库可以通过npm安装。打开小程序开发者工具，选择小程序目录，选择左侧菜单栏的工具-》构建npm，构建完成后，在小程序目录下会生成一个miniprogram_npm文件夹，里面包含了我们需要的EventBus库。

4.2 实现页面之间的事件监听和触发

在需要监听事件的页面中，引入EventBus库，使用EventBus.$on方法监听事件，如下所示：

var EventBus = require('../../utils/event-bus.js')
// 监听事件
EventBus.$on('event', function(data) {
  console.log(data) // 输出“page2传递过来的数据”
})

在需要触发事件的页面中，同样引入EventBus库，使用EventBus.$emit方法触发事件，并传递数据，如下所示：

var EventBus = require('../../utils/event-bus.js')
// 触发事件
EventBus.$emit('event', 'page2传递过来的数据')

小结

在小程序中，页面之间传值有多种方式，包括页面跳转传值、全局变量传值、storage本地缓存传值以及第三方库EventBus实现页面传值。根据具体应用场景，选择适合的方式进行传值可以提高小程序代码的效率。

小程序如何在页面之间传值