小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 小程序中跨页面组件共享数据的实现方法与对比

小程序中跨页面组件共享数据的实现方法与对比

一、核心方法实现与对比

1. 全局变量(getApp()

实现方式

// app.js中定义全局数据
App({ globalData: { userToken: 'abc123' } })

// 任意页面读取/修改
const app = getApp()
console.log(app.globalData.userToken) // 输出abc123
app.globalData.userToken = 'new_token'

2. 本地存储(wx.setStorage

实现方式

// 页面A存储
wx.setStorageSync('config', { theme: 'dark' })

// 页面B读取
const config = wx.getStorageSync('config')


3. 事件通道(EventChannel

实现方式

// 页面A跳转时建立通道
wx.navigateTo({
  url: 'pageB',
  success(res) {
    res.eventChannel.emit('transferData', { orderId: 789 })
  }
})

// 页面B接收
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('transferData', data => {
  console.log(data.orderId) // 输出789
})

4. 状态管理库(Redux/MobX)

实现方式(以Redux为例):

// 创建全局store
const store = {
  state: { cartItems: [] },
  updateCart: function(items) {
    this.state.cartItems = items
  }
}

// 组件中调用
Page({
  onLoad() {
    getApp().store.updateCart([...])
  }
})

5. 页面间传参

实现方式

// URL传参
wx.navigateTo({ url: '/pageB?id=1&name=test' })

// 目标页接收
Page({
  onLoad(options) {
    console.log(options.id) // 输出1
  }
})


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了