docs:小程序编辑资料页昵称必填提示优化设计文档
This commit is contained in:
+67
@@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
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 无报错。
|
||||||
Reference in New Issue
Block a user