#实战：北京天气 API

#导入可运行作品

下载 北京实时天气作品，在工作台「导入 JSON → 校验并导入」。作品中已包含 API 定义、按钮事件、加载状态和响应绑定。

#核对接口定义

点击工作台下方「接口与回调」，在「API 接口」选择「获取北京实时天气」。手动从零创建时，点击「新增接口」，按下表填写。

API 地址：

https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074&current_weather=true&timezone=Asia/Shanghai

坐标为北京示例坐标，不会申请访问读者设备位置。要换城市，请同时调整经纬度、时区、标题及相关说明。

{
  "current_weather": {
    "temperature": 24.6,
    "time": "2024-05-01T12:00",
    "weathercode": 1,
    "winddirection": 176,
    "windspeed": 9.4
  },
  "timezone": "Asia/Shanghai"
}

这里的数值用于解释结构，实际天气以接口实时返回为准。标识 loadWeather 用于事件选择和 AI 引用，应保持唯一、稳定。

#发起真实接口测试

向下找到「测试接口」，点击「用参数示例测试」。检查状态和返回内容；确认它确实包含需要的字段后，可以「采用为响应示例」，再点击「保存配置」。

本次测试实际返回了天气数据，并提示新增 7 处结构变化。新增字段提示不等于请求失败，它表示实际返回与此前示例不同。确认字段用途后再更新示例，不会自动修改现有数据绑定。

测试按钮会发出真实请求；自己的 POST、DELETE 等业务接口需要按其实际效果操作。后文的模拟测试场景和交互自检则使用模拟响应。

#把按钮事件连接到状态

进入「手动编辑」，在组件树选择 btn_fetch，切到「交互」，选择「点击」事件。导入的作品已经配置好，可以先查看，不必重新创建。

事件的核心流程是：准备加载状态 → 调用 loadWeather → 将响应写入状态 → 成功后标记已获取。错误与加载状态由对应路径承接。

展开「执行状态、结果与防抖」，核对：

展示组件使用以下状态来源：

点击「保存事件配置」后返回预览，再点「获取实时天气」。本次浏览器验证实际展示了温度 14.9°C、风速 19.7 km/h 等数据；你的结果会随时间变化。

#打开作品就获取天气

如果希望访客一打开页面就看到天气，在 btn_fetch 的点击事件下勾选「打开作品时自动执行」，点击「保存事件配置」，再「保存新版本」。建议把按钮文案改成「刷新天气」。

自动执行会复用该点击事件的动作与状态路径，每次打开实例执行一次，普通状态变化不会反复触发。它不是定时轮询，也不是后台持续同步。

不需要手动刷新按钮时，可以在支持「打开时自动执行」的节点上配置初始化事件，通常放在根容器上；先迁移并验证请求链路，再移除按钮。不要在根容器和按钮同时配置同一套自动请求，避免重复调用。

项目缩略图、投稿快照等位置可能关闭自动执行，避免浏览列表时批量发请求。最终行为应在完整预览和目标页面确认。

#检查失败和重试

展开「API 测试场景」，选择需要模拟的接口与场景，例如成功、空数据、缺少字段或失败。它只影响测试预览；结束后恢复原始接口，真实天气才能重新请求。

再运行「交互自检」。本例实测 8 项通过，覆盖成功、空数据、缺少字段、部分为空、null、请求失败和失败后重试等检查。

自检通过说明配置在模拟条件下可以运行，真实网络和最终页面仍要试用。更完整的调试方法见 事件、回调与调试。

#保存和展示

保存项目，分类可设为「文档演示」或「实用工具」。需要在主题中展示时，使用项目卡片的「复制代码」，按 嵌入教程 操作。

外部接口由浏览器请求，需要目标服务器允许跨域，HTTPS 页面也应使用 HTTPS 接口。若接口需要私密凭据，请由自己的服务端或宿主适配器处理，不要把密钥写进公开作品。