手机端App开发：App Inventor 完全教程
比赛现场不能联网 → 必须用本地部署版 App Inventor 2022 Server Edition 本教程覆盖从安装、界面设计、逻辑编程到打包APK的全流程
一、App Inventor 是什么
一款图形化拖拽式手机App开发工具。不用写任何代码，像搭积木一样组合出完整的Android应用。
界面设计（拖拽组件） + 逻辑编程（搭积木） = 手机App
按钮/标签/图片 如果按下→发送MQTT → 控制行空板二、环境搭建（本地版，离线可用）
2.1 获取软件
压缩包 AppInventor2022ServerEdition 在培训资料中（约500MB）。
2.2 启动步骤（一步一步来）
Step 1：解压
将 AppInventor2022ServerEdition 压缩包
解压到非中文目录，例如：
D:\AppInventor2022\Step 2：绑定服务器IP
打开文件夹 AppInventor2022RendezvousServer
双击运行 0绑定rendezvous-win.exe
会弹出一个窗口，看到类似：
已绑定的IP地址：192.168.0.111
记下这个IP地址！Step 3：修改配置
在解压目录中找到 appengine-web.xml
用记事本打开，找到：
<property name="use.rendezvous.server" value="xxx"/>
把 value 改为 Step 2 中记下的IP地址
保存关闭Step 4：启动服务器
双击运行 1启动AppInventor.cmd
会弹出一个命令行窗口，等待显示：
Dev App Server is now running
不要关闭这个窗口！Step 5：打开编程界面
浏览器输入 http://192.168.0.111:8888
如果一切正常，会看到 App Inventor 的主界面2.3 注册账号
点击「本地注册」
邮箱随意填写（如 111@qq.com，不校验）
设置用户名和密码 → 注册 → 登录⚠ 注意：这是本地服务器，账号数据只在你电脑上
2.4 安装手机AI伴侣
AI伴侣让你在手机上实时预览App效果。
方式一（推荐）：扫码下载
App Inventor 界面 → 顶部菜单「帮助」→「AI伴侣信息」
用手机扫描二维码 → 下载安装 ai2companion.apk方式二：直接用APK文件安装
解压目录中找到 ai2companion.apk
传到手机 → 安装使用AI伴侣：
1. 电脑和手机连接同一WiFi（或M10热点）
2. 手机打开AI伴侣App
3. App Inventor界面点击「连接」→「AI伴侣」
4. 扫描二维码 或 输入显示的6位代码
5. 手机实时显示App效果！三、界面设计（Designer视图）
3.1 界面布局
App Inventor 界面分两大区域：
┌─────────────────────┬──────────────────┬─────────────────┐
│ 组件面板(左侧) │ 设计器(中间) │ 属性面板(右侧) │
│ ┌─────────────┐ │ ┌───────────┐ │ │
│ │ 用户界面 │ │ │ Screen1 │ │ 对齐方式 │
│ │ ├按钮 │ │ │ ┌───────┐│ │ 宽度/高度 │
│ │ ├标签 │ │ │ │按钮1 ││ │ 背景颜色 │
│ │ ├图像 │ │ │ └───────┘│ │ 文字大小 │
│ │ ├WebView │ │ │ ┌───────┐│ │ ... │
│ │ └... │ │ │ │标签1 ││ │ │
│ │ 通信连接 │ │ │ └───────┘│ │ │
│ │ ├MQTT客户端 │ │ │ │ │ │
│ │ └Web客户端 │ │ │ │ │ │
│ └─────────────┘ │ └───────────┘ │ │
└─────────────────────┴──────────────────┴─────────────────┘3.2 常用组件速查
| 组件 | 图标 | 用途 |
|---|---|---|
| 按钮(Button) | 矩形按钮 | 发送指令：拍照、开关灯 |
| 标签(Label) | 文本显示 | 显示传感器数据、状态 |
| 图像(Image) | 图片框 | 显示行空板传来的照片 |
| 文本输入框(TextBox) | 输入框 | 让用户输入文字 |
| WebView | 网页框 | 显示网页内容 |
| MQTT客户端 | 扩展加载 | 连接SIoT收发消息 |
| 计时器(Clock) | 定时器 | 定时刷新数据 |
| 文件管理器(File) | 文件 | 保存/读取文件 |
3.3 设计一个遥控面板
目标：做一个能拍照、查看温湿度的App
拖入以下组件：
Screen1（屏幕）
├── Label1 文字 = "AI守护+" 字号=24 居中
├── Label2 文字 = "传感器数据" 字号=16
├── Label3 文字 = "温度: --"
├── Label4 文字 = "湿度: --"
├── Button1 文字 = "拍照" 宽=填充
├── Button2 文字 = "录音" 宽=填充
├── Button3 文字 = "开监控" 宽=填充
├── Button4 文字 = "关监控" 宽=填充
├── Image1 高度=200px
└── MQTT客户端 （从扩展中拖入）加载MQTT扩展：
左侧组件面板 → 最下方 → Extension（扩展）
→ Import Extension → 选择 co.com.dendritas.MqttTCP.aix
📂 这个.aix文件在培训资料中：
<a href="https://github.com/Brandon-LIs/competition-docs/tree/main/references/training" target="_blank" class="file-link-card other-link"><span class="fl-icon">📁</span><span class="fl-name">AppInventor素材资料及插件文件夹</span><span class="fl-action">GitHub</span></a>四、逻辑编程（Blocks视图）
4.1 切换到逻辑编程
点击右上角 「逻辑设计」 按钮，进入积木拖拽界面。
4.2 核心积木块类型
| 积木颜色 | 类别 | 用途 | 示例 |
|---|---|---|---|
| 🟡 黄色 | 控制 | 条件/循环 | 如果...则... |
| 🟢 绿色 | 逻辑 | 真/假判断 | = / > / 且/或 |
| 🔵 蓝色 | 数学 | 计算 | + - × ÷ |
| 🟣 紫色 | 文本 | 字符串操作 | 合并文本 |
| 🟠 橙色 | 变量 | 存储数据 | 定义变量/设值 |
| ⚫ 灰色 | 组件 | 组件操作 | 按钮.点击事件 |
4.3 连接SIoT
屏幕初始化时连接MQTT：
积木组合：
┌─────────────────────────────────────┐
│ 当 Screen1.初始化 │
│ 调用 MQTT客户端1.连接 │
│ 服务器 = "192.168.123.1" │
│ 端口 = 1883 │
│ 用户名 = "siot" │
│ 密码 = "dfrobot" │
│ 调用 MQTT客户端1.订阅 │
│ 主题 = "aaa/c" │
└─────────────────────────────────────┘4.4 发送指令（按钮点击）
拍照按钮的逻辑：
积木组合：
┌─────────────────────────────────────┐
│ 当 Button1.被点击 │
│ 调用 MQTT客户端1.发布 │
│ 主题 = "aaa/b" │
│ 消息 = {"params":"paizhao"} │
└─────────────────────────────────────┘同样方式做其他按钮：
Button2(录音) → 发布 {"params":"luying"}
Button3(开) → 发布 {"params":"kaiqi"}
Button4(关) → 发布 {"params":"guanbi"}4.5 接收数据并显示
收到MQTT消息后更新界面：
积木组合：
┌──────────────────────────────────────────┐
│ 当 MQTT客户端1.收到消息 │
│ 执行： │
│ 设 消息内容 为 (收到的消息) │
│ 如果 主题 = "aaa/c" │
│ 如果 消息包含 "temp" │
│ 设 Label3.文字 = "温度: " + temp │
│ 否则如果 消息包含 "params" │
│ 设 jsonData = 解析JSON(消息) │
│ 设 imgBase64 = jsonData["params"] │
│ 设 Image1.图片 = 解码Base64(img) │
└──────────────────────────────────────────┘4.6 添加设置页面
让用户可修改SIoT服务器地址：
增加一个「设置」按钮，点击跳转到设置页面：
主界面：
Button_设置 → 点击 → 打开另一个屏幕("设置页")
设置页(SettingsScreen)：
TextBox_SIoT地址（默认值: 192.168.123.1）
TextBox_SIoT端口（默认值: 1883）
Button_保存 → 保存到全局变量 → 返回主页4.7 定时刷新数据
使用Timer定时获取传感器数据：
积木组合：
┌─────────────────────────────────────┐
│ 当 Clock1.计时 │
│ 调用 MQTT客户端1.发布 │
│ 主题 = "aaa/b" │
│ 消息 = {"params":"getdata"} │
└─────────────────────────────────────┘Timer的计时间隔设为 3000（3秒）
五、MQTT 通信消息格式
手机 → 行空板（发布 topic: aaa/b）
| 指令 | JSON消息 | 行空板做什么 |
|---|---|---|
| 拍照 | {"params":"paizhao"} | 拍照→上传照片 |
| 录音 | {"params":"luying"} | 录5秒→上传音频 |
| 开监控 | {"params":"kaiqi"} | 启动自动拍照 |
| 关监控 | {"params":"guanbi"} | 停止自动拍照 |
| 语音播报 | {"params":"voise你好"} | 播报"你好" |
| 获取数据 | {"params":"getdata"} | 返回传感器数据 |
行空板 → 手机（订阅 topic: aaa/c）
| 消息格式 | 内容 |
|---|---|
{"temp":25.5, "humi":60} | 温湿度 |
{"params":"25.5~60~800"} | 温度~湿度~光线 |
{"params":"(Base64图片)"} | 照片 |
{"params":"(Base64音频)"} | 录音 |
六、打包APK
方式1：打包并下载到电脑
App Inventor → 菜单「打包」→「打包apk并下载到电脑」
等待编译（1-2分钟）
自动下载 .apk 文件方式2：生成二维码
App Inventor → 菜单「打包」→「打包apk并显示二维码」
用手机扫描 → 直接下载安装
（手机和电脑需同一网络）安装到手机
将 .apk 文件传到手机
文件管理器找到 .apk → 点击安装
允许「安装未知来源应用」七、现成APK：直接用！
培训资料提供了 5 个做好的SIoT遥控APK，无需设计直接用：
带设置的SIoT物联网_透明版.apk⬇ 下载SIoT物联网-黄色底.apk⬇ 下载安防App案例.apk⬇ 下载
使用步骤：
- 安装APK到手机
- 手机连接行空板热点 (UNIHIKER-XXXX)
- 打开App → 点击「设置」
- 填写：SIoT服务器地址 =
192.168.123.1 - 返回 → 自动连接 → 按钮遥控
八、App Inventor 常用操作速查
变量操作
定义全局变量：从「变量」拖出「初始化全局变量」
设置变量值：「设 global xxx 为 ...」JSON处理（解析MQTT消息）
需要加载 JSON扩展：
Extension → Import → co.com.dendritas.MqttTCP.aix
解析JSON：
设 jsonObj = JSON解析(消息文本)
设 value = jsonObj["key名"]Base64 图片解码
需要加载Base64扩展：
Extension → Import → com.ghostfox.SimpleBase64.aix
解码显示图片：
设 imgBytes = Base64解码(base64字符串)
设 Image1.图片 = imgBytes多页面切换
创建新屏幕：顶部「添加屏幕」(Add Screen)
跳转屏幕：控制 → 「打开另一屏幕 屏幕名称」
返回：控制 → 「关闭屏幕」App Inventor AI伴侣下载地址.pdf📖 预览App Inventor源码.aia⬇ 下载
九、常见问题
| 问题 | 原因 | 解决 |
|---|---|---|
| 浏览器打不开:8888 | 服务器没启动 | 确保 cmd窗口显示"Running" |
| AI伴侣连不上 | 不在同一网络 | 都连M10热点 |
| APK打包失败 | 端口被占用 | 重启cmd |
| MQTT扩展加载失败 | .aix路径含中文 | 移到英文目录 |
| 收到的图片不显示 | 没装Base64扩展 | 加载SimpleBase64.aix |
| 按钮点击没反应 | 设备凭据没填 | 检查MQTT的user/psw |
十、速成路线
如果不写代码：
→ 直接用现成APK → 手机装好 → 填SIoT地址 → 遥控
如果要自定义App：
→ 打开App Inventor本地版
→ 拖按钮/标签/图片组件
→ 写MQTT收发逻辑（复制本文模板）
→ 打包APK → 安装教程参考：App Inventor 2022 备忘录 + 培训资料 + book1.17coding.net