App Inventor 2 API通信教程 - Web组件调用RESTful API

« 返回首页

概述

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 🐝 整理。

文档反馈