AI编程：记一次小程序开发的踩坑之旅

今天是个有趣的开发日，遇到了几个典型的小程序开发问题，分享给大家，希望能帮助到遇到类似问题的开发者。

一、小程序名称备案那些事

开发完小程序后，第一个坎就是名称备案。原本取名为"Moodo"，寓意是"Mood"（心情）+ “do”（做），想表达记录心情、管理情绪的理念。但遗憾的是没有通过备案。

这提醒我们：

1. 小程序命名要避免使用纯英文
2. 不要使用过于宽泛的词语
3. 最好能体现小程序的核心功能
4. 避免与知名品牌相近的名称

二、意见反馈功能的调整

在开发过程中，我们原本加入了意见反馈功能，包括：

• 反馈类型选择
• 问题描述
• 联系方式留存

但后来发现这不符合小程序的规范要求。小程序要求意见反馈必须使用官方的渠道，而不是自建的反馈系统。所以我们：

1. 移除了反馈入口
2. 删除了相关页面
3. 清理了数据库中的反馈表

这告诉我们在开发前要仔细阅读小程序的规范文档，避免做无用功。

三、头像选择的那些坑

最有意思的是头像选择功能的问题。表面上看很简单：点击选择头像，上传、保存，完事。但实际开发中遇到了一个典型的"取消选择"问题。

当用户点击选择头像，然后点击取消时，控制台会报一个渲染方面的错，虽然不影响功能和用户体验，但是本着0 bug上线的态度还是要解决的：

[渲染层错误] [Component] : chooseAvatar:fail cancel

这个错误看起来吓人，但其实是正常的用户操作反馈。解决方案很简单：

onChooseAvatar(e) {
    const { avatarUrl } = e.detail;
    
    // 直接更新显示
    this.setData({
        'userInfo.avatarUrl': avatarUrl
    });

    // 保存到数据库
    wx.showLoading({ title: '保存中...' });
    const userInfo = { ...this.data.userInfo };
    
    this.updateUserInfo(userInfo)
        .then(() => {
            wx.hideLoading();
            wx.showToast({
                title: '头像更新成功',
                icon: 'success'
            });
        })
        .catch(err => {
            console.error('保存头像失败：', err);
            wx.hideLoading();
            wx.showToast({
                title: '保存失败',
                icon: 'error'
            });
        });
}

关键点在于：

1. 不需要特别处理取消操作
2. 让微信小程序框架自己处理取消事件
3. 只关注成功选择的情况

经验总结

1. 读文档很重要

   • 开发前仔细阅读小程序规范
   • 了解各个组件的使用限制
   • 注意官方建议的最佳实践

2. 简单最好

   • 有时候看似完善的错误处理反而会带来问题
   • 让框架去处理它擅长的事情
   • 专注于业务逻辑的实现

3. 用户体验至上

   • 合理的错误提示
   • 流畅的操作体验
   • 符合用户习惯的交互方式

小程序开发就是这样，看似简单的功能背后都有很多细节需要注意。希望这些经验能帮助到其他开发者，少走一些弯路。

记住：开发中遇到问题很正常，关键是要善于总结和分享。每一个坑都是一次学习的机会，让我们在踩坑中成长。

---