小程序页面间传递数据的方法

问题

小程序页面间有哪些传递数据的方法？

解答

1. URL 参数传递

页面跳转时通过 URL 携带参数，适合传递简单数据。

// 跳转页面时传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

// 目标页面接收参数
Page({
  onLoad(options) {
    console.log(options.id)    // 123
    console.log(options.name)  // test
  }
})

2. 全局变量

在 app.js 中定义全局数据，所有页面都可以访问。

// app.js
App({
  globalData: {
    userInfo: null,
    token: ''
  }
})

// 页面中使用
const app = getApp()
app.globalData.userInfo = { name: '张三' }

// 其他页面读取
const app = getApp()
console.log(app.globalData.userInfo)

3. 本地缓存

使用 wx.setStorage 和 wx.getStorage 存取数据，数据持久化保存。

// 存储数据
wx.setStorageSync('userInfo', { name: '张三', age: 25 })

// 读取数据
const userInfo = wx.getStorageSync('userInfo')

4. 组件模板传参

父组件向子组件传递数据。

// 父组件
<template is="userCard" data="{{...userInfo}}" />

// 模板定义
<template name="userCard">
  <view>{{name}} - {{age}}</view>
</template>

5. 云数据库

通过云开发数据库实现跨页面、跨用户的数据共享。

// 写入数据
const db = wx.cloud.database()
db.collection('users').add({
  data: { name: '张三', age: 25 }
})

// 读取数据
db.collection('users').get().then(res => {
  console.log(res.data)
})

关键点

• URL 参数适合传递少量简单数据，有长度限制
• 全局变量数据在小程序运行期间有效，关闭后清空
• 本地缓存可持久化保存，适合存储用户设置等信息
• 组件模板传参用于父子组件通信
• 云数据库适合需要持久化和多端同步的场景