前端App Inventor 2 Web客户端组件全攻略：GET/POST/文件上传，异步机制、JSON解码、6个避坑指

App Inventor 2 Web客户端全攻略：从天气API到大模型对接，一文搞懂HTTP请求

"我想在App里显示实时天气，怎么做？""能不能调用ChatGPT的API做一个聊天机器人？""我想从服务器拉数据显示在列表里，一直报错……"——这类问题在社区里几乎每天都有人问。答案都指向同一个组件：Web客户端。

它是App Inventor 2连接外部世界的窗口。只要对方提供了HTTP接口，你就能用它做GET查询、POST提交、上传文件、解析JSON。但很多新手卡在"请求发出去了，数据回来了，可就是不会处理"。今天就把Web客户端从入门到进阶的完整链路拆清楚。

Web客户端能做什么

一句话：在App里发起任何HTTP请求。

场景	HTTP方法	典型用法
查询数据	GET	拉取天气、新闻列表、股票行情
提交数据	POST	登录注册、提交表单、发送消息
更新数据	PUT/PATCH	修改用户信息、更新配置
删除数据	DELETE	删除记录、取消订阅
上传文件	POST文件	上传图片、音频、附件
数据解析	JSON解码	把服务器返回的JSON文本变成App能用的数据

核心属性：开始请求前必须配置的4项

1. URL网址

你要请求的接口地址。比如高德天气API：https://restapi.amap.com/v3/weather/weatherInfo?city=110000&key=你的key

2. 请求标头

如果你的接口需要指定Content-Type或携带认证Token，必须设置请求标头。格式是"包含双项子列表的列表"：

(("Content-Type" "application/json") ("Authorization" "Bearer your_token_here"))

这是最常被忽略的一步。很多API要求Content-Type: application/json，不设标头直接POST，服务器返回400错误，你还以为是代码写错了。

3. 允许使用Cookies

如果你的接口需要登录态（比如先登录拿Session再调其他接口），把它设为True。Web客户端会自动保存和回传Cookies，实现"登录一次，后续请求自动带身份"。

4. 保存响应信息

False（默认）：响应数据通过获得文本事件返回文本
True：响应数据保存到文件，通过获得文件事件返回文件路径

什么时候开True？当你下载图片、音频、PDF等二进制文件时。文本类API响应保持False即可。

第一个实战：GET请求获取天气

以高德天气API为例，完整流程只有三步。

Step 1：设置URL并发起GET

当 按钮1.被点击
  执行 设 Web1.URL网址 为 "https://restapi.amap.com/v3/weather/weatherInfo?city=110000&key=你的key"
       调用 Web1.执行GET请求()

Step 2：在获得文本事件中处理响应

当 Web1.获得文本(URL网址, 响应代码, 响应类型, 响应内容)
  执行 如果 响应代码 = 200
        则 设 全局变量 天气数据 为 调用 Web1.用字典解码JSON文本(响应内容)
             设 标签1.文字 为 "当前温度：" & 在字典 天气数据 中获取键 "lives" 的值
        否则 设 标签1.文字 为 "请求失败，代码：" & 响应代码

Step 3：理解异步

这是新手最容易踩的坑——Web客户端是异步的。调用执行GET请求()后，代码不会"停在这里等返回"，而是继续往下执行。返回的数据在获得文本事件里处理。

❌ 错误写法：
调用 Web1.执行GET请求()
设 标签1.文字 为 Web1.响应内容    ← 这时候还没返回！

✅ 正确写法：
调用 Web1.执行GET请求()
（在"获得文本"事件里处理响应内容）

第二个实战：POST提交JSON数据

假设你要调用一个大模型API（比如智谱GLM），发送一段对话请求。

Step 1：设置URL和标头

当 按钮1.被点击
  执行 设 Web1.URL网址 为 "https://open.bigmodel.cn/api/paas/v4/chat/completions"
       设 Web1.请求标头 为 (("Content-Type" "application/json") ("Authorization" "Bearer your_api_key"))

Step 2：构造JSON请求体

用App Inventor的字典和编码JSON对象方法构造请求体：

设 请求体 为 创建字典(
  ("model" "glm-4")
  ("messages" (创建列表 (创建字典 ("role" "user") ("content" "你好，介绍一下你自己"))))
)

调用 Web1.执行POST文本请求(调用 Web1.编码JSON对象(请求体))

Step 3：解析返回结果

当 Web1.获得文本(URL网址, 响应代码, 响应类型, 响应内容)
  执行 如果 响应代码 = 200
        则 设 返回数据 为 调用 Web1.用字典解码JSON文本(响应内容)
             设 回复内容 为 在字典 返回数据 中获取键 "choices" 的值
             → 取第1项 → 获取键 "message" → 获取键 "content"
             设 标签1.文字 为 回复内容

两个JSON解码方法的区别

这是Web组件里最让人迷惑的一对方法：

方法	返回类型	取值方式	适用场景
解码JSON文本	键值对列表	`在键值对中查找`	简单JSON、兼容旧代码
用字典解码JSON文本	字典	`获取键的值`	推荐，支持嵌套、更直观

强烈建议统一使用用字典解码JSON文本。它返回的是字典对象，支持多层嵌套取值，而且代码可读性好得多。

❌ 旧方式（键值对列表）：
设 数据 为 调用 Web1.解码JSON文本(响应内容)
设 温度 为 在键值对中查找(数据) 查找 "temperature"

✅ 推荐方式（字典）：
设 数据 为 调用 Web1.用字典解码JSON文本(响应内容)
设 温度 为 在字典 数据 中获取键 "temperature" 的值

文件上传：POST文件请求

上传图片到服务器，用执行POST文件请求：

当 按钮1.被点击
  执行 设 Web1.URL网址 为 "https://your-server.com/upload"
       调用 Web1.执行POST文件请求("/storage/emulated/0/Pictures/photo.jpg")

服务器返回结果同样在获得文本事件中处理。如果需要带额外参数（比如文件名、用户ID），通过URL的query参数传递即可。

超时处理：别忘了加

网络请求不可控，一定要处理超时。Web客户端提供了超时时间(ms)属性和超时事件：

设计视图 → Web1 → 超时时间 → 设为 15000（15秒）

当 Web1.超时(URL网址)
  执行 设 标签1.文字 为 "请求超时，请检查网络后重试"
       设 进度条1.可视 为 假

6个必知避坑指南

坑1：中文URL没编码

URL里包含中文参数（比如搜索关键词），必须先URI编码：

设 搜索词 为 "北京天气"
设 编码后的词 为 调用 Web1.URI编码(搜索词)
设 Web1.URL网址 为 "https://api.example.com/search?q=" & 编码后的词

不编码的话，部分服务器会直接返回400或乱码。

坑2：HTTP明文请求被Android拦截

Android 9+默认禁止明文HTTP请求。如果你的接口是http://而非https://，需要在Screen1的属性里关闭安全限制，或者（更好的做法）让服务端升级HTTPS。

坑3：跨屏幕使用Web组件

Web组件是非可视组件，每个Screen需要各自拖入一个Web客户端。如果在多屏幕场景中使用，建议把请求逻辑封装成一个Process（过程），减少重复代码。

坑4：请求标头格式错误

请求标头必须是"列表的列表"，每个子列表恰好两个元素（键名、键值）。写成单层列表会报错。

❌ ("Content-Type" "application/json")
✅ (("Content-Type" "application/json"))

坑5：并发请求结果混淆

如果用户快速点击两次按钮发出两个请求，两次返回的获得文本事件会先后触发。如果你在全局变量里存了"当前请求的类型"，可能搞混。解决办法：在URL里加一个自定义参数标记请求类型，在获得文本事件里通过URL参数判断这次响应对应哪个请求。

坑6：解析JSON时类型不匹配

用字典解码JSON文本返回字典的前提是JSON的顶层是一个对象{...}。如果顶层是数组[...]，返回的是列表。先打印一下返回内容确认结构，再决定用列表操作还是字典操作。

完整决策图

需要联网获取/提交数据？
├── 只读数据 → GET请求
├── 提交数据 → POST文本请求（JSON）
├── 上传文件 → POST文件请求
├── 修改数据 → PUT/PATCH请求
├── 删除数据 → DELETE请求
└── 返回数据处理
    ├── 文本格式 → 直接显示
    ├── JSON对象 → 用字典解码JSON文本 → 字典操作
    ├── JSON数组 → 用字典解码JSON文本 → 列表操作
    └── 二进制文件 → 保存响应=True → 获得文件事件

小结

Web客户端是App Inventor 2从"单机工具"升级到"联网应用"的关键组件。掌握三件事就够了：配置好URL和标头、在异步事件里处理返回、用字典解码JSON。把这三步跑通，天气、新闻、AI对话、数据看板——任何有API的服务都能接入你的App。

📖 完整文档与示例代码：Web客户端组件文档 | Web组件使用示例 | 文件上传全方案

本文由 App Inventor 2 中文网（fun123.cn）原创整理，转载请注明出处。