小程序开发实战：记录一天的 Bug 修复历程

从开始着手开发这个小程序以来，已经十几天过去了，看着前端代码基本也能看懂了，有时候明明一个很easy的bug，和AI（cursor）十几次对话不能解决，很想说 AI白痴，但是转念一想，换个角度思考，兴许能够解决这个问题，往往这个时候，AI按照新的思路和提示词就可以解决问题，所以说不是说AI不行，可能那十几次的沟通是无效的。

现在小程序已经上传了体验版，正在进行内部测试，春节前能够发一版（MVP），感兴趣的伙伴可以下方留言，或私信。

引言

在小程序开发过程中，我们经常会遇到一些看似简单，实则暗藏玄机的问题。本文将记录一个心情记录小程序开发中的一天，我们如何发现并解决了几个相互关联的问题。这些问题涉及用户信息获取、数据存储等核心功能，希望通过分享这些经验，能够帮助其他开发者避免类似的坑。

用户信息获取问题

问题描述

在开发过程中，我们发现用户的头像和昵称无法正确保存到数据库中。具体表现为：

用户选择头像后，数据库中的头像 URL 未更新
修改昵称后，数据库中的昵称未同步更新
本地缓存和云端数据不一致

原因分析

经过排查，发现问题的根源在于微信小程序对用户信息获取机制的更新：

旧版本使用的 wx.getUserInfo 接口已被废弃
新版本需要使用 getUserProfile 和 chooseAvatar 等新接口
数据同步逻辑需要适配新的调用方式

解决过程

更新头像处理逻辑：

javascript 复制代码

onChooseAvatar: async function(e) {
  const { avatarUrl } = e.detail;
  await this.updateUserInfo({ avatarUrl });
}

优化用户信息更新方法：

javascript 复制代码

async updateUserInfo(userInfo) {
  const db = wx.cloud.database();
  const updateData = {};
  if (userInfo.nickName) updateData['userInfo.nickName'] = userInfo.nickName;
  if (userInfo.avatarUrl) updateData['userInfo.avatarUrl'] = userInfo.avatarUrl;
  
  await db.collection('users').doc(userId).update({
    data: updateData
  });
}

昵称重复保存问题

问题表现

修复完用户信息获取问题后，我们又发现了一个新问题：用户修改昵称时会触发两次保存操作。通过日志可以清晰地看到：

复制代码

昵称确认返回数据： {pass: true, timeout: false}
准备保存的用户信息： {gender: 0, language: "", ...}
用户信息更新成功
...（重复一次相同的操作）

问题定位

通过分析代码，发现问题出在事件处理层面：

input 组件同时绑定了 bindinput 和 bindnicknamereview 事件
两个事件处理函数都在进行数据更新
状态管理不够清晰，导致重复操作

解决过程

第一次尝试：使用临时变量

javascript 复制代码

onNicknameInput: function(e) {
  this.setData({
    tempNickName: e.detail.value
  });
}

这种方案未能解决问题，因为没有处理好事件触发的时序。

第二次尝试：添加状态锁

javascript 复制代码

onNicknameReview: async function(e) {
  if (this.data.isNicknameUpdating) return;
  this.setData({ isNicknameUpdating: true });
  try {
    // 更新逻辑
  } finally {
    this.setData({ isNicknameUpdating: false });
  }
}

这种方案虽然可以防止重复提交，但治标不治本。

最终方案：简化数据流

javascript 复制代码

onNicknameInput: function(e) {
  // 只在输入时更新显示
  this.setData({
    'userInfo.nickName': e.detail.value
  });
},

onNicknameReview: async function(e) {
  if (!e.detail.pass) return;
  const nickName = this.data.userInfo.nickName?.trim();
  await this.updateUserInfo({ nickName });
}

开发经验总结

小程序开发中的常见陷阱

事件重复触发
数据状态不同步
新旧 API 兼容性问题

问题定位方法

使用日志跟踪关键操作
分析数据流向
检查事件绑定关系

代码设计原则

单一数据源：避免使用多个变量存储同一数据
清晰的数据流向：明确数据的更新路径
合理的状态管理：避免状态混乱

最佳实践建议

用户信息处理

使用最新的用户信息获取接口
确保本地存储和云端数据同步
合理处理错误情况

事件处理

明确事件触发时机
避免重复绑定事件
合理使用防抖和节流

代码质量保证

添加必要的日志记录
做好错误处理
保持代码简洁清晰

结语

通过这一天的 Bug 修复过程，我们不仅解决了具体的问题，更重要的是总结出了一些有价值的开发经验。在小程序开发中，保持良好的编码习惯、合理的架构设计，以及细致的问题排查能力，都是保证项目质量的关键因素。