【小程序】微信小程序页面之间数据传递的五种方法

在微信小程序开发中，页面之间的数据传递是一个常见且核心的需求。如何高效、合理地在不同页面间共享或传递数据，直接影响着应用的性能和用户体验。本文将详细介绍五种小程序页面间数据传递的常用方法，并提供纯原生微信小程序代码实现，帮助开发者更好地理解和应用。

---

1. 路由传参（URL Query Parameters）

使用场景： 主要用于页面跳转时少量数据的传递，例如传递一个ID、类型等简单参数。

实现方式： 通过在wx.navigateTo、wx.redirectTo或wx.reLaunch的url中拼接查询字符串（Query String）来传递参数。

注意： 路由传参会将参数值字符串化，例如 true 会变成 'true'，1 会变成 '1'。如果需要传递复杂对象，请考虑其他方式。

A页面 (发送数据):

使用 wx.navigateTo 保留当前页面，跳转到应用内的某个页面。

// A 页面
Page({
  navigateToB: function() {
    wx.navigateTo({
      url: 'pages/test/test?id=123&name=xiaoming' // 参数通过 ? 拼接，多个参数用 & 连接
    })
  }
})

B页面 (接收数据):

在页面的 onLoad 生命周期中，通过 options 参数获取路由传递的数据。

// B 页面 (pages/test/test.js)
Page({
  onLoad: function(options) {
    console.log(options.id);   // 输出: 123
    console.log(options.name); // 输出: xiaoming
    // 注意：options 中的所有参数值都是字符串类型
  }
})

适用性： 适用于数据量少、结构简单的场景。不建议用于传递大量数据或复杂对象，因为URL长度有限制，且会影响可读性。

---

2. 事件通道（Event Channel）

使用场景： 从A页面跳转到B页面时，需要传递大量数据或复杂数据（如对象、数组）。这种方式是官方推荐的复杂数据传递方法。

实现方式： 在 wx.navigateTo 的 success 回调中获取目标页面的 eventChannel，并通过它向目标页面发送数据。目标页面通过 this.getOpenerEventChannel() 获取事件通道，并监听对应事件。

A页面 (发送数据):

// A 页面
Page({
  navigateToBWithComplexData: function() {
    wx.navigateTo({
      url: 'pages/test/test',
      success: function(res) {
        // 通过 eventChannel 向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', {
          data: '这是来自A页面的复杂数据',
          list: [1, 2, 3],
          userInfo: { id: 1, name: '张三' }
        });
        // res.eventChannel.emit 的第二个参数是要传递的数据，可以是任意JavaScript对象
      },
      fail: function(err) {
        console.error('导航失败', err);
      }
    });
  }
});

B页面 (接收数据):

在B页面的 onLoad 生命周期中获取事件通道并监听事件。

// B 页面 (pages/test/test.js)
Page({
  data: {
    receivedData: null
  },
  onLoad: function() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', (data) => {
      console.log('接收到来自A页面的数据:', data); // 输出: { data: '...', list: [...], userInfo: {...} }
      this.setData({
        receivedData: data
      });
    });
  }
});

适用性： 推荐用于页面间传递复杂对象或大量数据，避免了URL长度限制和参数类型转换的问题。

---

3. 返回上一个页面时传递数据 (navigateBack)

使用场景： 当从B页面返回A页面时，B页面需要将处理结果或某些数据传递给A页面。

实现方式： 在B页面中，通过 getCurrentPages() 获取页面栈，找到前一个页面的实例，并使用 prevPage.setData() 直接修改前一个页面的 data。A页面在 onShow 生命周期中可以观察或直接使用已更新的数据。

B页面 (发送数据):

// B 页面
Page({
  handleReturnWithData: function() {
    const pages = getCurrentPages();      // 获取当前页面栈
    const prevPage = pages[pages.length - 2]; // 获取上一个页面的实例 (A页面)

    if (prevPage) {
      // 通过 prevPage.setData() 直接更新A页面的数据
      prevPage.setData({
        messageFromB: '数据来自B页面，已完成操作',
        status: 'success'
      });
    }

    wx.navigateBack({
      delta: 1 // 返回一个页面
    });
  }
});

A页面 (接收数据):

当A页面从B页面返回并重新显示时，其 onShow 生命周期会被触发。此时，通过 this.data 即可访问到B页面设置的数据。

// A 页面
Page({
  data: {
    messageFromB: '',
    status: ''
  },
  onShow: function() {
    // 当A页面被B页面返回后重新显示时，onShow会被触发
    // B页面通过 prevPage.setData 设置的数据，会直接更新A页面的data
    console.log('A 页面 onShow，获取到的数据：', this.data.messageFromB);
    console.log('A 页面 onShow，获取到的状态：', this.data.status);
    // 可以在这里根据 status 进行后续操作，或清空数据以防止下次进入页面时仍显示旧数据
  }
});

适用性： 适用于页面返回时的数据回传，简单直观。

---

4. 使用本地缓存（Local Storage）

使用场景： 需要在多个页面甚至不同会话之间持久化数据，或者需要传递的数据量较大且不需要实时响应。

实现方式： 通过 wx.setStorageSync 存储数据，通过 wx.getStorageSync 获取数据。

A页面 (发送数据):

// A 页面
Page({
  saveDataToStorage: function() {
    const complexData = {
      timestamp: Date.now(),
      items: [{ id: 1, name: '商品A' }, { id: 2, name: '商品B' }]
    };
    wx.setStorageSync('myComplexData', complexData);
    console.log('数据已存储到本地缓存');
    wx.navigateTo({
      url: 'pages/test/test'
    });
  }
});

B页面 (接收数据):

// B 页面 (pages/test/test.js)
Page({
  data: {
    cachedData: null
  },
  onLoad: function() {
    const data = wx.getStorageSync('myComplexData');
    if (data) {
      this.setData({
        cachedData: data
      });
      console.log('从本地缓存获取数据:', data);
      // 清理缓存（根据需求决定是否清理）
      // wx.removeStorageSync('myComplexData');
    }
  }
});

适用性： 数据需要持久化，或者在多个不直接关联的页面间传递，且对实时性要求不高。使用后应考虑何时清除缓存，以避免数据冗余或过期。

---

5. 全局变量 (app.globalData)

使用场景： 适用于需要在整个小程序生命周期内共享和访问的全局性数据，例如用户登录信息、应用配置等。

实现方式： 通过 getApp() 方法获取小程序实例，然后访问其 globalData 属性。

app.js (初始化全局数据):

// app.js
App({
  onLaunch: function () {
    // 可以在这里初始化全局数据
    this.globalData.userInfo = null;
    this.globalData.appConfig = { theme: 'default', version: '1.0.0' };
  },
  globalData: {
    userInfo: null,
    appConfig: {}
  }
});

A页面 (设置全局数据):

// A 页面
Page({
  updateGlobalUserInfo: function() {
    const app = getApp();
    app.globalData.userInfo = {
      nickName: '小程同学',
      avatarUrl: 'https://example.com/avatar.png'
    };
    console.log('全局用户信息已更新');
    wx.navigateTo({
      url: 'pages/test/test'
    });
  }
});

B页面 (获取全局数据):

// B 页面 (pages/test/test.js)
Page({
  data: {
    globalUserInfo: null,
    globalAppConfig: null
  },
  onShow: function() { // onShow 或 onLoad 均可
    const app = getApp();
    this.setData({
      globalUserInfo: app.globalData.userInfo,
      globalAppConfig: app.globalData.appConfig
    });
    console.log('从全局变量获取用户信息:', app.globalData.userInfo);
    console.log('从全局变量获取应用配置:', app.globalData.appConfig);
  }
});

适用性： 简单方便，适合存储全局常量或不频繁变动的数据。

注意事项：

• 非响应式： globalData 的改变不会自动触发页面重新渲染。如果需要页面响应 globalData 的变化，你可能需要在页面中手动调用 this.setData()，或者通过观察者模式（例如在 app.js 中维护一个回调列表）来实现。
• 滥用风险： 过度依赖 globalData 可能会导致数据流混乱，难以追踪数据来源和变化，增加维护难度。建议仅用于真正意义上的全局共享数据。

---

总结与选择建议

方法	优点	缺点	适用场景
路由传参	简单、直接、方便	仅限少量字符串，URL长度限制	页面跳转时传递ID、类型等简单参数
事件通道	支持复杂数据类型和大量数据传递	仅限于 navigateTo 时的正向传递	navigateTo 时传递复杂对象或多条数据
navigateBack	适用于返回时的数据回传，直接修改上页数据	仅限于返回上一页面	从子页面返回父页面时，回传处理结果或更新数据
本地缓存	数据持久化，可在不同会话间共享	异步操作（同步版本可能阻塞），非实时更新	跨页面、跨会话的持久化数据，配置信息，离线数据
全局变量	全局可访问，实现简单	非响应式，易造成数据流混乱，不易追踪变化	全局配置、用户登录状态等不频繁变动的全局共享数据

选择哪种数据传递方式，应根据具体的业务需求、数据类型、数据量以及对实时性和持久性的要求来综合判断。合理地运用这些方法，将使你的小程序数据管理更加清晰和高效。