微信小程序--简单页面跳转

封面图 • 2025-12-24 • 小程序

在微信小程序中，实现**简单页面跳转**主要通过 `wx.navigateTo` 或 `wx.redirectTo` 等 API 来实现。下面是一个简单的示例，帮助你理解如何从一个页面跳转到另一个页面。

---

## ✅ 1. 页面结构

假设你有两个页面：

- **index.js / index.wxml / index.json**：首页
- **detail.js / detail.wxml / detail.json**：详情页

---

## ✅ 2. 在首页（index）中跳转到详情页（detail）

### ✅ 2.1 在 `index.js` 中添加跳转逻辑

```javascript
// index.js
Page({
  data: {
    // 页面数据
  },
  
  // 点击按钮跳转
  goToDetail: function () {
    wx.navigateTo({
      url: '/pages/detail/detail', // 跳转的路径
      success: function () {
        console.log('跳转成功');
      }
    });
  }
});
```

### ✅ 2.2 在 `index.wxml` 中添加按钮

```html

<button bindtap="goToDetail">跳转到详情页</button>
```

---

## ✅ 3. 在详情页（detail）中返回上一页

### ✅ 3.1 在 `detail.js` 中添加返回逻辑

```javascript
// detail.js
Page({
  data: {
    // 页面数据
  },

// 返回上一页
  goBack: function () {
    wx.navigateBack({
      delta: 1, // 返回的页面数
      success: function () {
        console.log('返回成功');
      }
    });
  }
});
```

### ✅ 3.2 在 `detail.wxml` 中添加返回按钮

```html

<button bindtap="goBack">返回首页</button>
```

---

## ✅ 4. 注意事项

| 方法 | 说明 |
|------|------|
| `wx.navigateTo({url: 'path'})` | 跳转到新页面，**保留当前页面**（可以返回） |
| `wx.redirectTo({url: 'path'})` | 跳转到新页面，**关闭当前页面**（不能返回） |
| `wx.navigateBack({delta: 1})` | 返回上一页 |

---

## ✅ 5. 配置页面路径（在 `app.json` 中）

确保在 `app.json` 的 `pages` 数组中添加了这两个页面：

```json
{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序"
  }
}
```

---

## ✅ 6. 示例效果

- 点击首页按钮 → 跳转到详情页
- 点击详情页按钮 → 返回首页

---

如果你需要更复杂的跳转（如带参数、跳转后传值等），也可以告诉我，我可以继续扩展。😊