pyscript 默认的 print() 输出仅显示在浏览器控制台，需使用 display() 函数将内容渲染到网页上；同时原代码中存在异步调用、json 解析重复及未处理异常等问题，需一并修正。
pyscript 默认的 print() 输出仅显示在浏览器控制台，需使用 display() 函数将内容渲染到网页上；同时原代码中存在异步调用、json 解析重复及未处理异常等问题，需一并修正。
要在网页中成功显示天气预报，关键在于两点：正确输出到 DOM 和 可靠执行异步请求。PyScript 2023.11.1 及后续版本（包括当前主流的 2024.x 系列）已将 print() 的行为调整为仅向浏览器开发者控制台（Console）输出，不再自动写入页面——这是导致你页面“空白”的根本原因。
✅ 正确做法是使用 PyScript 内置的 pyscript.display() 函数（常简写为 display()），它专为将 Python 对象（字符串、数字、HTML 片段等）安全、同步地渲染到页面而设计。
此外，原代码还存在以下技术问题，需一并修复：
- ❌ response.json() 被调用了两次（await response.json() 后又 response.json()），后者会失败（因响应体已读取）；
- ❌ asyncio.ensure_future() 在 PyScript 中非推荐方式，应使用 await 或 asyncio.create_task() 配合 pyodide.http.fetch（更稳定）；
- ❌ 缺少错误处理，API 请求失败（如网络异常、密钥无效、跨域限制）时页面无任何反馈；
- ❌ Yandex 天气 API 对浏览器端直接调用有严格 CORS 限制，实际无法在前端直连（需后端代理），但本例聚焦 PyScript 渲染逻辑，故暂以模拟/兼容性方案说明。
以下是修正后的完整可运行示例（兼容 PyScript ≥ 2024.1）：
<meta charset="UTF-8"><title>PyScript 天气预报</title><script defer src="https://pyscript.net/releases/2024.1.1/pyscript.js"></script><link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/pyscript.css"><h2>实时天气预报（莫斯科）</h2>
<div id="weather-output"></div>
<py-script>
import asyncio
from pyscript import display
API_KEY = '8e4cf478-53b6-45bc-8597-9946db9f1fd5'
url = 'https://api.weather.yandex.ru/v2/forecast'
params = {
'lat': 55.753215,
'lon': 37.622504,
'lang': 'ru_RU'
}
headers = {
'X-Yandex-API-Key': API_KEY
}
async def fetch_weather():
try:
# 使用 pyodide.http.fetch（比全局 fetch 更可靠）
from pyodide.http import fetch
response = await fetch(url, method="GET", headers=headers, params=params)
if not response.ok:
raise Exception(f"API 请求失败: {response.status} {response.statusText}")
data = await response.json()
fact = data.get('fact', {})
temp = fact.get('temp', '未知')
condition = fact.get('condition', '未知')
# ✅ 使用 display() 渲染到页面（支持 HTML）
display(
f"?️ 莫斯科实况：{temp}°C，{condition}",
target="weather-output",
append=False # 替换而非追加
)
except Exception as e:
display(f"❌ 获取天气失败：{e}", target="weather-output", append=False)
# 启动异步任务（PyScript 自动处理事件循环）
asyncio.create_task(fetch_weather())
</py-script>
? 重要注意事项：
- CORS 限制：Yandex Weather API 不支持浏览器直连（拒绝跨域请求）。生产环境必须通过自有后端代理请求，或改用支持 CORS 的公开测试 API（如 https://api.open-meteo.com/v1/forecast?latitude=55.75&longitude=37.62¤t=temperature_2m）。
- API 密钥安全：切勿在前端硬编码敏感密钥；开发阶段可临时使用，上线前务必移至服务端。
- PyScript 版本：确保使用 2024.1.1 或更新版本，旧版（如 2022.12.1）不支持 pyscript.display 或 pyodide.http.fetch。
- 调试技巧：打开浏览器 DevTools → Console 标签页，查看 print() 输出和异常堆栈，辅助定位问题。
总结：display() 是 PyScript 页面输出的唯一推荐方式；结合健壮的异步处理与错误提示，才能构建可用的前端 Python 应用。
