---
author: Peanut
created_at: 2026-06-23
purpose: 明确小程序编辑资料页面在昵称未填时给出 Toast 提示的优化方案
---

# 小程序编辑资料页昵称必填提示优化

## 背景

当前小程序的编辑资料页面（`mini-program/src/pages/onboarding/index.vue`）在昵称未填写时，点击保存按钮会直接静默返回，没有任何提示。用户无法判断是按钮失效、网络问题还是字段未填，体验较差。

## 目标

- 当用户点击保存按钮时，如果昵称未填写，必须给出明确的 Toast 提示「请填写昵称」。
- 保持改动最小，不影响现有保存流程和其他字段行为。

## 当前问题定位

在 `saveProfile` 方法中存在以下逻辑：

```javascript
if (!form.nickname.trim() || saving.value) return
```

当 `form.nickname` 为空或仅包含空白字符时，条件成立，方法直接 `return`，没有触发任何提示。

## 方案

采用「保存时校验 + Toast 提示」的轻量方案。

### 具体改动

**文件**：`mini-program/src/pages/onboarding/index.vue`

**修改 `saveProfile` 方法**：

1. 先判断 `saving.value`，避免重复提交。
2. 再判断昵称是否为空，为空时调用 `uni.showToast({ title: '请填写昵称', icon: 'none' })` 后返回。

改动后逻辑示例：

```javascript
const saveProfile = async () => {
  if (saving.value) return

  if (!form.nickname.trim()) {
    uni.showToast({ title: '请填写昵称', icon: 'none' })
    return
  }

  saving.value = true
  // 原有保存逻辑保持不变
}
```

### 不改动的部分

- 不修改其他字段的校验规则。
- 不调整提示方式为字段高亮、弹窗或自动聚焦。
- 不新增失焦校验或实时输入校验。

## 验证标准

- 进入编辑资料页面，清空昵称后点击保存，页面顶部弹出 Toast「请填写昵称」。
- 填写昵称后点击保存，能正常提交并显示「已保存」。
- 浏览器 Console 无报错。