概述
App Inventor 2的 Web 组件可以发送HTTP请求,与任何RESTful API通信。这是App Inventor连接外部世界的核心组件,可以实现:
- 天气查询
- 新闻获取
- AI大模型对话
- 数据库CRUD操作
- 第三方服务集成
Web组件位于组件面板的 Connectivity 分类下。
Web组件核心方法
| 方法 | 说明 |
|---|---|
| Get(url) | 发送GET请求 |
| PostText(url, text, encoding) | 发送POST请求(文本) |
| PostFile(url, path) | 上传文件 |
| PutText(url, text, encoding) | 发送PUT请求 |
| Delete(url) | 发送DELETE请求 |
| ClearCookies() | 清除Cookie |
| BuildPostData(list) | 构建表单数据 |
核心事件
| 事件 | 参数 | 说明 |
|---|---|---|
| GotText(url, responseCode, responseType, responseContent) | 响应内容 | GET/POST请求返回 |
| GotFile(url, responseCode, responseType, fileName) | 文件名 | 文件下载返回 |
核心属性
| 属性 | 说明 |
|---|---|
| RequestHeaders | 请求头(列表) |
| AllowCookies | 是否允许Cookie |
| SaveResponse | 是否保存响应到文件 |
| ResponseFileName | 响应保存的文件名 |
GET请求
基本GET请求
当 按钮_查询.被点击
调用 Web1.执行Get请求("https://api.example.com/data")
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
如果 响应码 = 200
标签_结果.文本 = 响应内容
否则
标签_结果.文本 = "请求失败:" & 响应码
带参数的GET请求
当 按钮_搜索天气.被点击
设 城市 = 输入框_城市.文本
设 API密钥 = "your_api_key"
设 url = "https://api.openweathermap.org/data/2.5/weather?q=" & 城市 & "&appid=" & API密钥 & "&lang=zh_cn&units=metric"
调用 Web1.执行Get请求(url)
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
设 数据 = 调用 文本.从JSON解析(响应内容)
设 温度 = 从字典(从字典 数据 获取 "main") 获取 "temp"
设 描述 = 从字典(列表第1项(从字典 数据 获取 "weather")) 获取 "description"
标签_天气.文本 = "温度:" & 温度 & "°C," & 描述
设置请求头
很多API需要在请求头中传递认证信息:
当 按钮_请求.被点击
' 设置请求头
设 请求头 = [
"Authorization: Bearer your_token_here",
"Content-Type: application/json",
"Accept: application/json"
]
设 Web1.请求头 = 请求头
调用 Web1.执行Get请求("https://api.example.com/protected")
POST请求
发送JSON数据
当 按钮_提交.被点击
设 请求数据 = "{""name"":""" & 输入框_姓名.文本 & """,""age"":" & 输入框_年龄.文本 & "}"
设 请求头 = ["Content-Type: application/json"]
设 Web1.请求头 = 请求头
调用 Web1.执行Post文本请求(
"https://api.example.com/users",
请求数据,
"UTF-8"
)
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
如果 响应码 = 200 或 响应码 = 201
标签_结果.文本 = "✅ 提交成功"
否则
标签_结果.文本 = "❌ 失败:" & 响应码
发送表单数据
当 按钮_登录.被点击
设 表单数据 = [
"username", 输入框_用户名.文本,
"password", 输入框_密码.文本
]
设 Web1.请求头 = ["Content-Type: application/x-www-form-urlencoded"]
调用 Web1.执行Post文本请求("https://api.example.com/login",
调用 Web1.构建Post数据(表单数据), "UTF-8")
实战案例:调用AI大模型API
调用DeepSeek Chat API
设 API地址 = "https://api.deepseek.com/chat/completions"
设 API密钥 = "your_api_key"
当 按钮_发送.被点击
设 用户消息 = 输入框_消息.文本
设 请求体 = "{""model"":""deepseek-chat"",""messages"":[{""role"":""user"",""content"":""" & 用户消息 & """}]}"
设 请求头 = [
"Content-Type: application/json",
"Authorization: Bearer " & API密钥
]
设 Web1.请求头 = 请求头
标签_状态.文本 = "思考中..."
调用 Web1.执行Post文本请求(API地址, 请求体, "UTF-8")
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
如果 响应码 = 200
设 响应数据 = 调用 文本.从JSON解析(响应内容)
设 选择列表 = 从字典 响应数据 获取 "choices"
设 第一条 = 列表第1项(选择列表)
设 消息 = 从字典(从字典 第一条 获取 "message") 获取 "content"
标签_回复.文本 = 消息
否则
标签_回复.文本 = "请求失败:" & 响应码
标签_状态.文本 = ""
实战案例:JSON API数据展示
获取和展示新闻列表
当 Screen1.初始化
调用 Web1.执行Get请求("https://newsapi.org/v2/top-headlines?country=cn&apiKey=your_key")
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
设 数据 = 调用 文本.从JSON解析(响应内容)
设 文章列表 = 从字典 数据 获取 "articles"
设 显示文本 = ""
设 i = 1
当 i ≤ 列表长度(文章列表)
设 文章 = 列表第i项(文章列表)
设 标题 = 从字典 文章 获取 "title"
设 来源 = 从字典(从字典 文章 获取 "source") 获取 "name"
设 显示文本 = 显示文本 & "📌 " & 标题 & "\n 来源:" & 来源 & "\n\n"
设 i = i + 1
标签_新闻.文本 = 显示文本
文件上传
上传图片到服务器
当 按钮_上传.被点击
设 图片路径 = 图片选择器1.路径
如果 图片路径 ≠ ""
调用 Web1.执行Post文件请求("https://api.example.com/upload", 图片路径)
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
如果 响应码 = 200
标签_结果.文本 = "✅ 上传成功:" & 响应内容
错误处理
网络异常处理
当 Web1.收到文本(网址, 响应码, 响应类型, 响应内容)
如果 响应码 = 200
' 成功处理
标签_结果.文本 = 响应内容
否则 如果 响应码 = 401
标签_结果.文本 = "❌ 认证失败,请检查API密钥"
否则 如果 响应码 = 403
标签_结果.文本 = "❌ 无权限访问"
否则 如果 响应码 = 404
标签_结果.文本 = "❌ 资源不存在"
否则 如果 响应码 = 429
标签_结果.文本 = "❌ 请求过于频繁,请稍后重试"
否则 如果 响应码 = 500
标签_结果.文本 = "❌ 服务器错误"
否则
标签_结果.文本 = "❌ 请求失败:" & 响应码
HTTP状态码速查
| 状态码 | 含义 | 处理方式 |
|---|---|---|
| 200 | 成功 | 解析响应数据 |
| 201 | 创建成功 | POST请求成功 |
| 400 | 请求格式错误 | 检查请求体格式 |
| 401 | 未认证 | 检查API密钥 |
| 403 | 无权限 | 检查权限设置 |
| 404 | 资源不存在 | 检查URL |
| 429 | 请求频率超限 | 延迟重试 |
| 500 | 服务器错误 | 稍后重试 |
常见问题
Q1: Web组件请求返回空白?
- 检查URL是否正确(用浏览器测试)
- 检查是否需要设置请求头(如Authorization)
- 确认有INTERNET权限
- 检查HTTPS证书问题
Q2: JSON解析失败?
- 先用标签显示原始响应内容,检查格式
- 确认API返回的是JSON(不是XML或HTML错误页面)
- 使用
is a dictionary?积木块检查解析结果类型
Q3: 请求中文参数乱码?
对URL中的中文参数进行URL编码:
设 编码后城市 = 调用 Web1.网址编码(城市名称)
设 url = "https://api.example.com/search?q=" & 编码后城市
Q4: 如何实现异步请求(不阻塞UI)?
Web组件本身就是异步的——调用Get/Post后会立即返回,UI继续响应。响应在GotText事件中处理。
总结
| 操作 | 方法 | 示例 |
|---|---|---|
| 查询数据 | Get | 天气查询、新闻获取 |
| 提交数据 | PostText | 登录、表单提交 |
| 上传文件 | PostFile | 图片上传 |
| 更新数据 | PutText | 修改用户信息 |
| 删除数据 | Delete | 删除记录 |
版权声明:MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权,本文档由 ai2claw 🐝 整理。
扫码添加客服咨询