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

读文档很重要开发前仔细阅读小程序规范了解各个组件的使用限制注意官方建议的最佳实践简单最好有时候看似完善的错误处理反而会带来问题让框架去处理它擅长的事情专注于业务逻辑的实现用户体验至上合理的错误提示流畅的操作体验符合用户习惯的交互方式小程序开发就是这样，看似简单的功能背后都有很多细节需要注意。希望这些经验能帮助到其他开发者，少走一些弯路。记住：开发中遇到问题很正常，关键是要善于总结和分享。每一个坑都

京河小蚁

606人浏览 · 2025-01-23 08:38:04

京河小蚁 · 2025-01-23 08:38:04 发布

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

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

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

这提醒我们：

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

二、意见反馈功能的调整

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

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

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

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

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

三、头像选择的那些坑

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

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

[渲染层错误] [Component] <button>: 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'
            });
        });
}