Files

T

peanut 41ed8257f6 docs：小程序编辑资料页昵称必填提示优化设计文档

2026-06-23 21:29:54 +08:00

1.9 KiB

Raw Blame History

author, created_at, purpose

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

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

背景

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

目标

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

当前问题定位

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

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

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

方案

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

具体改动

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

修改 saveProfile 方法：

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

改动后逻辑示例：

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

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

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

不改动的部分

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

验证标准

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

1.9 KiB Raw Blame History Unescape Escape