网页端登录与注册

实现登录/注册表单切换：

• 为登录表单下方的”没有账号？去注册”文本添加点击时行为：

  • 选择切换条件式容器操作
  • 目标对象选择登录注册切换条件式容器
  • 切换状态选择注册

• 为注册表单下方的”已有账号？去登录”文本添加点击时行为：

  • 选择切换条件式容器操作
  • 目标对象选择登录注册切换条件式容器
  • 切换状态选择登录

配置用户名密码登录行为：

• 选择登录按钮，添加点击时行为：

  • 选择用户事件->用户名密码登录
  • 用户参数选择登录-用户名-输入框组件的值
  • 密码参数选择登录-密码-输入框组件的值
  • 成功时：
    • 添加显示/提示行为，标题输入”登录成功”
    • 添加页面跳转行为，目标页面选择您预先创建的登录成功页
  • 失败时：
    • 添加显示/提示行为，标题输入”登录失败，请检查用户名和密码”

  

实现密码二次校验（仅注册表单）：

• 为密码输入框或确认密码输入框添加状态变化时事件
• 添加一个条件式容器（用于显示密码不一致提示），命名为密码不相同提示
  • 在该容器内添加文本组件，内容为”两次输入密码不相同”
  • 在密码不相同提示的右侧面板行为选项下，点击配置
  • 添加两个条件：
    • 条件1命名为密码不相同：当注册-密码-输入框的值不等于 注册-确认密码-输入框的值时，显示提示
    • 条件2命名为密码相同：当两者值相等时，隐藏提示
  • 对于密码相同状态，将容器的高度设置为0以隐藏

配置用户名/密码注册行为：

• 在密码相同条件下，选择行为用户事件->用户名密码注册

  • 用户参数选择注册-用户名-输入框组件的值
  • 密码参数选择注册-密码-输入框组件的值
  • 成功时：
    • 添加显示/提示行为，标题输入”注册成功”
    • 如果希望用户注册成功后直接登录，则无需添加跳转。Zion 平台默认注册成功后自动登录
  • 失败时：
    • 添加显示/提示行为，标题输入”注册失败，请检查填写内容”

  

页面编辑：

• 拷贝上面编辑过的页面用户名密码登录注册，并命名为手机号验证码登录注册
• 修改组件的名字和文本的内容，使其符合手机号验证码登录注册的场景

添加页面变量：

• 新建一个页面
• 在页面的数据选项卡下，点击添加页面变量
• 创建名为countdown_login的长整数类型变量，默认值设为60。（60是指登录页的倒计时时间为60s）

配置倒计时定时任务：

• 在页面行为选项卡下，点击添加定时任务
• 添加名为login的定时任务，**触发时间（毫秒）**设置为1000（即每秒执行）
• 触发行为中添加行为条件下，并添加两个分支：
  • 分支0 (倒计时结束)：
    • 条件：页面变量-countdown_login 小于等于 0
    • 行为：
      • 定时任务操作：停止 login
      • 设置页面变量 countdown_login为60
  • 分支1 (倒计时进行中)：
    • 条件：页面变量 countdown_login 大于 0
    • 行为：设置页面变量 countdown_login为页面变量 countdown_login 减去 1

添加发送验证码的按钮：

• 在验证码输入框的旁边添加一个条件式容器发送验证码，用于显示发送验证码按钮/倒计时文本
  • 条件式子容器1命名为登录-发送验证码，在这里添加一个按钮组件，并将文本改为”发送验证码”
  • 条件式子容器2命名为登录-倒计时进行中，在这里添加一个文本组件，内容为页面变量-countdown_login

发送验证码按钮行为：

• 选择手机号验证码登录表单中的发送验证码按钮
• 添加点击时行为：发送短信->短信验证码
• 发送给谁参数选择手机号-输入框组件的值
• 成功时：
  • 添加行为设置页面变量： countdown_login为60
  • 添加行为定时任务->开始：对象选择login
  • 添加行为切换条件式容器（发送验证码 - 用于显示发送验证码按钮/倒计时文本）切换状态到登录-倒计时进行中
• 失败时：
  • 添加行为显示/提示行为，标题为”发送失败，请检查手机号”

更新倒计时定时任务：

• 选择页面行为选项卡下的定时任务，点击login定时任务，在触发行为的条件行为分支倒计时结束中，添加条件切换条件式容器（发送验证码 - 用于显示发送验证码按钮/倒计时文本）切换状态到登录-发送验证码

配置手机号验证码登录行为：

• 选择手机号验证码登录表单中的登录按钮，添加点击时行为：
  • 选择用户事件->手机号验证码登录
  • 手机号参数选择手机号-输入框组件的值
  • 验证码参数选择验证码-输入框组件的值
  • 成功时：
    • 添加显示/提示行为，标题输入”登录成功”
    • 添加页面跳转行为，目标页面选择您预先创建的登录成功页
  • 失败时：
    • 添加显示/提示行为，标题输入”登录失败，请检查手机号和验证码”

配置手机号验证码注册子容器：

流程和登录子容器的配置相同，这里不再赘述。