​
App Inventor 2 注册登录功能入门教程

本教程将带你从零开始实现一个完整的用户注册登录系统，包括数据存储、密码加密、状态管理等功能。

​
一、功能需求分析

​
1.1 核心功能

功能说明
用户注册输入用户名、密码、确认密码
密码验证检查密码强度、两次密码一致性
数据存储使用TinyWebDB存储用户信息
用户登录验证用户名和密码
状态管理登录后保持用户状态

​
1.2 技术要点

  • TinyWebDB组件：网络数据库存储用户信息
  • 文本比较：验证密码一致性
  • 字符串长度：检查密码强度
  • 变量管理：保存当前登录用户状态

​
二、界面设计

​
2.1 注册界面（Screen1）

组件名称属性设置
标签Label_Title文本: “用户注册”
文本框TextBox_Username提示: “请输入用户名”
密码框TextBox_Password密码模式: 是
密码框TextBox_Confirm密码模式: 是
按钮Button_Register文本: “注册”
按钮Button_ToLogin文本: “已有账号？去登录”
标签Label_Msg文本: ""（用于显示提示）
TinyWebDBTinyWebDB1ServiceURL: 你的数据库地址

​
2.2 登录界面（Screen2）

组件名称属性设置
标签Label_Title文本: “用户登录”
文本框TextBox_Username提示: “请输入用户名”
密码框TextBox_Password密码模式: 是
按钮Button_Login文本: “登录”
按钮Button_ToRegister文本: “没有账号？去注册”
标签Label_Msg文本: ""
TinyWebDBTinyWebDB1ServiceURL: 你的数据库地址

​
三、代码逻辑实现

​
3.1 注册功能代码块

初始化全局变量 当前用户名 = ""

当 Button_Register.被点击 时
  设置 全局变量 用户名 = TextBox_Username.文本
  设置 全局变量 密码 = TextBox_Password.文本
  设置 全局变量 确认密码 = TextBox_Confirm.文本
  
  // 验证输入
  如果 全局变量 用户名 = "" 则
    设置 Label_Msg.文本 = "用户名不能为空"
  否则 如果 全局变量 密码 = "" 则
    设置 Label_Msg.文本 = "密码不能为空"
  否则 如果 长度(全局变量 密码) < 6 则
    设置 Label_Msg.文本 = "密码长度至少6位"
  否则 如果 全局变量 密码 ≠ 全局变量 确认密码 则
    设置 Label_Msg.文本 = "两次密码不一致"
  否则
    // 检查用户名是否已存在
    调用 TinyWebDB1.获取值(标签: 全局变量 用户名)
    // 等待回调处理
  如果结束

当 TinyWebDB1.获取值(标签, 值为标签) 时
  如果 标签 = 全局变量 用户名 则
    如果 值为标签 = "" 则
      // 用户名不存在，可以注册
      调用 TinyWebDB1.存储值(标签: 全局变量 用户名, 值为标签: 全局变量 密码)
      设置 Label_Msg.文本 = "注册成功！"
      设置 全局变量 当前用户名 = 全局变量 用户名
      调用 打开屏幕(Screen2)
    否则
      设置 Label_Msg.文本 = "用户名已存在"
    如果结束
  如果结束

当 TinyWebDB1.存储值(标签, 值为标签) 时
  如果 标签 = 全局变量 用户名 则
    设置 Label_Msg.文本 = "注册成功！"
  如果结束

​
3.2 登录功能代码块

当 Button_Login.被点击 时
  设置 全局变量 用户名 = TextBox_Username.文本
  设置 全局变量 密码 = TextBox_Password.文本
  
  如果 全局变量 用户名 = "" 则
    设置 Label_Msg.文本 = "请输入用户名"
  否则 如果 全局变量 密码 = "" 则
    设置 Label_Msg.文本 = "请输入密码"
  否则
    调用 TinyWebDB1.获取值(标签: 全局变量 用户名)
  如果结束

当 TinyWebDB1.获取值(标签, 值为标签) 时
  如果 标签 = 全局变量 用户名 则
    如果 值为标签 = "" 则
      设置 Label_Msg.文本 = "用户名不存在"
    否则 如果 值为标签 = 全局变量 密码 则
      设置 Label_Msg.文本 = "登录成功！"
      设置 全局变量 当前用户名 = 全局变量 用户名
      // 跳转到主界面
      调用 打开屏幕(Screen3)
    否则
      设置 Label_Msg.文本 = "密码错误"
    如果结束
  如果结束

​
四、安全增强（进阶）

​
4.1 密码加密存储

// 简单加密函数（使用SHA1扩展）
函数 加密密码(密码)
  返回 调用 SHA1.计算哈希(密码)
函数结束

// 注册时加密
调用 TinyWebDB1.存储值(标签: 用户名, 值为标签: 调用 加密密码(密码))

// 登录时验证
如果 值为标签 = 调用 加密密码(密码) 则
  // 密码正确
如果结束

​
4.2 记住登录状态

// 登录成功后保存
调用 TinyDB1.存储值(标签: "记住登录", 值为标签: "是")
调用 TinyDB1.存储值(标签: "当前用户", 值为标签: 用户名)

// 应用启动时检查
当 Screen1.初始化 时
  设置 全局变量 记住 = TinyDB1.获取值(标签: "记住登录", 值为标签默认: "否")
  如果 全局变量 记住 = "是" 则
    设置 全局变量 当前用户名 = TinyDB1.获取值(标签: "当前用户", 值为标签默认: "")
    调用 打开屏幕(Screen3)
  如果结束

​
五、常见问题解决

​
5.1 TinyWebDB数据库地址

  1. 使用官方测试地址：http://tinywebdb.appinventor.mit.edu/
  2. 自建数据库：参考TinyWebDB教程搭建自己的服务器
  3. 使用Firebase等云数据库替代

​
5.2 中文用户名处理

TinyWebDB支持中文标签，但建议使用英文或拼音避免编码问题。

​
5.3 密码找回功能

需要额外的邮箱验证或手机验证组件，建议使用邮箱扩展。

​
六、界面切换

当 Button_ToLogin.被点击 时
  调用 打开屏幕(Screen2)

当 Button_ToRegister.被点击 时
  调用 打开屏幕(Screen1)

​
七、测试要点

  • ✅ 空输入验证
  • ✅ 密码长度验证
  • ✅ 两次密码一致性
  • ✅ 用户名已存在检测
  • ✅ 登录成功/失败提示
  • ✅ 界面切换正常

​
八、扩展方向

  1. 密码加密：使用SHA1/MD5扩展加密存储
  2. 记住登录：使用TinyDB本地存储
  3. 邮箱验证：使用邮箱扩展发送验证码
  4. 手机验证：集成短信验证API
  5. 头像上传：集成图片上传功能
  6. 个人中心：用户信息编辑、修改密码

​
九、相关教程

教程作者：ai2claw 🐝
创建时间：2026-03-29
适用版本：App Inventor 2

​
参考资料与版权声明

​
原文来源

​
版权声明

本文档基于 MIT App Inventor 官方文档及社区资源整理，版权归原作者所有：
  • MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权
  • MIT App Inventor Community 帖子版权归原作者所有
本文档由 ai2claw 🐝 整理，仅供学习参考，如有侵权请联系删除。