微信小程序 - 参数传递

封面图 • 2025-10-17 • 小程序

在微信小程序中，参数传递是一个非常常见的操作，通常用于页面之间的跳转、数据传递等。下面我将详细介绍几种常用的参数传递方式。

---

## 一、页面间跳转传参（`wx.navigateTo` / `wx.redirectTo`）

### 1. **从 A 页面跳转到 B 页面并传参**

**A 页面代码：**
```javascript
// A.js
Page({
  data: {
    name: '张三'
  },
  goToBPage() {
    wx.navigateTo({
      url: '/pages/B/B?name=' + this.data.name,
      success: function(res) {
        console.log('跳转成功');
      }
    });
  }
});
```

### 2. **B 页面接收参数**

**B 页面代码：**
```javascript
// B.js
Page({
  onLoad(options) {
    // options 是一个对象，包含所有传递过来的参数
    console.log(options.name); // 输出：张三
  }
});
```

> 注意：`options` 中的参数是字符串类型，如果需要数字或其他类型，需要手动转换。

---

## 二、使用 `globalData` 全局变量传递参数

如果你需要在多个页面之间共享数据，可以使用小程序的全局变量 `getApp().globalData`。

### 1. **定义全局变量**

**app.js**
```javascript
App({
  globalData: {}
});
```

### 2. **设置全局变量（A 页面）**

**A.js**
```javascript
const app = getApp();

Page({
  data: {
    name: '李四'
  },
  goToBPage() {
    app.globalData.userInfo = this.data.name;
    wx.navigateTo({
      url: '/pages/B/B'
    });
  }
});
```

### 3. **获取全局变量（B 页面）**

**B.js**
```javascript
const app = getApp();

Page({
  onLoad() {
    console.log(app.globalData.userInfo); // 输出：李四
  }
});
```

---

## 三、使用 `wx.setStorageSync` 和 `wx.getStorageSync` 本地存储传参

适用于需要持久化保存的数据。

### 1. **A 页面存储数据**

```javascript
wx.setStorageSync('userName', '王五');
wx.navigateTo({
  url: '/pages/B/B'
});
```

### 2. **B 页面读取数据**

```javascript
const userName = wx.getStorageSync('userName');
console.log(userName); // 输出：王五
```

---

## 四、使用 `eventChannel` 传递复杂数据（适用于 `navigateTo` 跳转）

适用于需要在跳转后继续通信的情况。

### 1. **A 页面发送数据**

```javascript
wx.navigateTo({
  url: '/pages/B/B',
  events: {
    // 事件监听
    myEvent: function(data) {
      console.log('收到B页面返回的数据：', data);
    }
  },
  success: function(res) {
    // 通过 eventChannel 向 B 页面发送数据
    res.eventChannel.emit('fromA', { name: '赵六' });
  }
});
```

### 2. **B 页面接收数据**

```javascript
Page({
  onLoad(options) {
    const eventChannel = this.getRelationInfo().eventChannel;

eventChannel.on('fromA', (data) => {
      console.log('收到A页面传来的数据：', data); // 输出：{ name: '赵六' }
    });

// 如果需要向 A 页面返回数据
    eventChannel.emit('myEvent', { result: '成功' });
  }
});
```

---

## 五、使用 `wx.reLaunch` 或 `wx.switchTab` 传参

这些方法也可以传参，用法与 `wx.navigateTo` 类似：

```javascript
wx.reLaunch({
  url: '/pages/B/B?name=小明'
});
```

---

## 总结对比

| 方法 | 适用场景 | 是否支持复杂数据 | 是否持久化 |
|------|----------|------------------|------------|
| URL 参数 | 简单页面跳转 | ✅ 字符串 | ❌ |
| globalData | 多页面共享 | ✅ 任意类型 | ❌ |
| localStorage | 需要持久化 | ✅ 任意类型 | ✅ |
| eventChannel | 跳转后通信 | ✅ 任意类型 | ❌ |

---

如果你有具体的使用场景（比如跳转后如何返回数据、如何传递对象等），欢迎告诉我，我可以给出更详细的示例！