微信小程序中如何实现子向父传参「页面通信」

如何实现小程序中的页面通信？

小程序可以分为多个页面，每个页面有自己的逻辑和数据，但是有时候需要在不同页面之间传递数据，这就需要用到页面通信。本篇文章将介绍在微信小程序中如何实现子向父传参。

1.使用Navigator组件

在微信小程序中，Navigator组件可以实现页面之间的跳转，并且可以在页面跳转时传递参数。

在需要跳转到另一个页面时，可以使用Navigator组件的url属性传递参数。例如，从index页面跳转到detail页面，并携带参数id和name：

// index页面
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

在detail页面中，可以通过options获取传递过来的参数：

// detail页面
onLoad: function (options) {
  console.log(options.id)   // 输出123
  console.log(options.name) // 输出test
}

注意：使用Navigator组件时，需要在app.json文件中定义每个页面的路径和对应的页面文件名。

2.使用事件机制

在微信小程序中，可以使用事件机制实现页面之间的通信。事件可以在任何页面中发出，其他页面可以监听这些事件并作出相应的处理。

第一步，需要定义一个事件名称，在发送事件时使用该名称。例如，在页面A中定义一个“customEvent”事件：

// A页面
var event = new CustomEvent('customEvent', {detail: {message: 'hello, world!'}})
this.triggerEvent('customEvent', event)

第二步，在页面B中监听该事件，并定义事件处理函数：

// B页面
this.on('customEvent', function(event){
  console.log(event.detail.message)    // 输出hello, world!
})

需要注意的是，如果页面A和页面B存在父子关系，则可以使用this.selectComponent方法在子组件内获取父组件的实例，从而实现子向父传参。例如，在子组件C中向父组件B传递参数：

// C组件
var event = new CustomEvent('customEvent', {detail: {message: 'hello, world!'}})
var parent = this.selectComponent('#parent')
parent.triggerEvent('customEvent', event)

子组件C通过selectComponent方法获取id为parent的组件实例，并向该实例发送事件。父组件B监听该事件并作出相应的处理。

3.使用全局变量

在微信小程序中，可以使用全局变量在不同的页面之间共享数据。可以使用getApp方法获取全局应用实例，从而访问全局变量。

例如，在app.js文件中定义一个全局变量data：

// app.js
App({
  globalData: {
    data: {
      message: 'hello, world!'
    }
  }
})

在页面A中通过getApp方法获取应用实例，并访问全局变量中的数据：

// A页面
var app = getApp()
console.log(app.globalData.data.message)   // 输出hello, world!

在页面B中也可以通过getApp方法获取应用实例，并修改全局变量中的数据：

// B页面
var app = getApp()
app.globalData.data.message = 'hello, JavaScript!'

需要注意的是，因为全局变量会在所有页面中共享，所以在使用全局变量时需要考虑同步和锁的问题，以防止数据的不一致和冲突。

总结

微信小程序中，页面通信是非常重要和常用的功能。本篇文章介绍了三种实现方式：使用Navigator组件传参、使用事件机制传参和使用全局变量共享数据。每种方式都有自己的特点和使用场景，需要根据实际需求进行选择和使用。同时，在实现页面通信时需要注意数据同步和锁的问题，以保证数据的正确性和完整性。