当前位置：首页 > article >正文

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

article 2025/1/29 7:51:44

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

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

引言

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

用户信息获取问题

问题描述

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

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

原因分析

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

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

解决过程

更新头像处理逻辑：

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

优化用户信息更新方法：

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 事件
两个事件处理函数都在进行数据更新
状态管理不够清晰，导致重复操作

解决过程

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

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

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

第二次尝试：添加状态锁

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

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

最终方案：简化数据流

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 });
}