Web端验证码倒计时配置最佳实践

场景说明

验证码倒计时是用户注册、登录及安全验证场景中的标准交互功能。

通过倒计时机制，我们可以达成两个目标：

1. 优化用户体验：给予用户明确的时间预期，避免盲目等待。
2. 保障安全规范：有效防止接口被高频恶意调用，降低短信/邮件发送成本。

配置流程详解

第一步：逻辑与数据配置

在搭建界面前，我们需要先定义好控制倒计时的“大脑”。

1. 定义页面变量：

   • 创建一个名为 countdown 的变量。
   • 类型选择 长整数。
   • 默认值设为 60（代表 60 秒）。

2. 配置定时器行为：

   • 在页面-行为层级添加一个 定时任务。
   • 触发间隔：设为 1000 毫秒（即 1 秒）。
   • 初始状态：关闭“立即触发”开关（需要手动触发）。
   • 触发逻辑：配置条件判断行为：
     • 当 countdown > 0 时：执行变量计算，使 countdown 减 1。
     • 当 countdown = 0 时：执行“定时任务暂停”，并将 countdown 重置为 60（为下一次发送做准备）。

第二步：界面组件搭建

接下来搭建用户所见的交互界面，建议采用 条件式容器 来实现状态切换。

1. 基础输入组件：

   • 拖入一个 手机号输入框 组件。
   • 添加一个 视图 容器，设计-设置为 水平布局。
   • 在视图内左侧放置 验证码输入框。

2. 倒计时状态容器：

   • 在视图内验证码输入框右侧，添加一个 条件式容器。
   • 配置两个子状态容器：
     • 状态 A（发送中）：命名为“正在倒计时”。
       • 显示条件：页面变量 countdown ≥ 0 且 < 60。
       • 内容：添加按钮，将按钮文案绑定为页面变量 countdown。
     • 状态 B（常态）：命名为“倒计时结束”。
       • 内容：添加按钮，文案设置为“获取验证码”。

3. 注册提交组件：

   • 在布局底部添加“手机号注册”按钮，用于最终提交。

第三步：交互逻辑串联 (Interaction)

最后，将界面操作与后台逻辑进行绑定。

核心动作：“获取验证码”按钮点击事件

当用户点击“倒计时结束/待发送”容器内的按钮时，需按顺序执行以下行为：

1. 服务调用：触发“发送验证码”行为，向手机发送短信。
2. 状态切换：将条件式容器切换至“正在倒计时”状态（此时用户看到的是数字在跳动）。
3. 启动计时：触发第一步配置的“定时任务-开始”。

补充动作：“手机号注册”按钮

• 配置常规的注册提交行为即可。