Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录

原创

已于 2025-02-28 17:11:34 修改 · 2k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-02-27 17:05:57 首次发布

最近经常使用Trae生成一些小组件和功能代码（对Trae赶兴趣的可以看之前的文章《TraeAi上手体验》），刚好在用uniapp开发微信小程序时需要开发一个输入密码的弹框组件，于是想用Trae来实现。原型设计稿如下：
在这里插入图片描述

经过一次描述附加原型设计图后，Trae给我生成了初始代码，预览如下：

在这里插入图片描述

在微信开发者工具中使用似乎是可以的，它还细心的额外给我增加了对确认按钮的激活条件（多选框需要至少选一个），这个激活条件我是没有体现在需求描述上的，但实际也是需要的。

然而，在实际使用的时候，会发现以下问题：

①它在界面上使用了4个input输入框，当输入框为空时再按下backspace键，无法触发@input或者@keyup，导致无法将光标回退到上一个输入框。同时，因为使用了4个不同的input输入框，导致在输入后光标自动移动到下一个输入框时会引起输入法键盘的闪动。

②input上虽然设置了type=“number”，但在微信开发者工具中，还是能输入其它字符。

③虽然它在弹窗关闭时对所有输入变量进行了重置，但再次打开弹框时，多选的checkbox组件依然显示之前的勾选状态，而没有被重新初始化为未勾选状态。

④需求描述和原型设计稿中都有右上角关闭的描述，但实际没有显示弹窗的右上角的关闭按钮（其实代码是有生成，但它给的关闭图片并不存在，图片路径却不是随机的，而似乎有根据项目使用的cdn来生成，所以差点让我信以为真）

上面4个问题中，第一个问题是最主要的，也是比较麻烦的。

在保留4个input输入框的方式下，最初为了解决当输入框为空时再按下backspace键，无法触发@input的问题时，Trae想到了插入零宽字符\u200B的方案：

在这里插入图片描述

但在实际测试过程中，会导致输入的数字无法正常显示。

经过几次尝试，如果在不改变实现方式，也就是保留4个input输入框的方式下，无法解决事件触发及输入法键盘闪动的问题。于是Trae给出来用“4个普通view元素+隐藏的input”的方式来实现密码输入：

在这里插入图片描述

主要改动说明：

1. 移除了多个输入框，改用一个隐藏的真实输入框
2. 添加了显示用的密码框
3. 简化了输入处理逻辑
4. 在关闭弹窗时增加了状态重置
5. 优化了样式结构，确保隐藏输入框覆盖整个输入区域

经过上述修改，输入法闪动的问题解决了，backspace回退的问题也解决了。但是引入了一个新的问题：

由于真实的输入框是覆盖在上层，虽然它也设置了opacity: 0;，在微信开发者工具中没有发现什么问题，但是在Android真机上却显示了输入框的文字和闪烁的光标。

输入框文字可以用css样式进行隐藏，但光标却始终无法隐藏：

Trae给出的几次方案：

方案一：
在这里插入图片描述

 .real-password