如何在 PyScript 中正确显示天气预报数据（解决页面空白问题）-html教程-PHP中文网

如何在 PyScript 中正确显示天气预报数据（解决页面空白问题）

PyScript 2023.11.1+ 版本中 print() 不再输出到网页，仅写入浏览器控制台；需改用 pyscript.display() 将结果渲染到页面，同时修复异步调用与 JSON 解析逻辑错误。

pyscript 2023.11.1+ 版本中 `print()` 不再输出到网页，仅写入浏览器控制台；需改用 `pyscript.display()` 将结果渲染到页面，同时修复异步调用与 json 解析逻辑错误。

在使用 PyScript + Pyodide 调用外部 API（如 Yandex 天气接口）时，一个常见误区是误以为 print() 会自动显示在 HTML 页面上——实际上，从 PyScript 2023.11.1 开始，print() 仅输出至浏览器开发者工具的 Console 标签页，不会渲染到 DOM。因此即使请求成功、逻辑无误，页面仍为空白。

要将动态内容展示在网页中，必须使用 PyScript 提供的内置函数 pyscript.display()。它支持文本、HTML 字符串、甚至 Python 对象（自动格式化），并能精准插入到标签所在位置。

此外，原代码中存在两处关键错误需修正：

Matrix

Matrix是一款AI智能体工具，超长时间自动化运行的主动式多 Agent 协作平台。

下载

response.json() 被重复调用（一次在 await response.json()，一次在未 await 的 response.json()），后者会抛出 RuntimeError: await was expected；
asyncio.ensure_future() 在 PyScript 环境中非推荐方式，应使用 await 直接调用协程（配合 async 属性或 pyscript.run_until_complete）。

✅ 正确做法如下（兼容最新 PyScript 版本，如 2024.1.1）：



    <meta charset="UTF-8"><title>莫斯科天气预报</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>
    <py-script>
        import pyodide
        import asyncio

        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 get_weather():
            try:
                response = await pyodide.http.pyfetch(
                    url, 
                    method="GET", 
                    headers=headers, 
                    params=params
                )
                data = await response.json()
                fact = data.get('fact', {})
                temperature = fact.get('temp', '未知')
                # ✅ 使用 display() 渲染到页面（支持 HTML）
                from pyscript import display
                display(f"?️ 莫斯科实时气温：{temperature}°C", append=False)
            except Exception as e:
                from pyscript import display
                display(f"❌ 获取天气失败：{e}", append=False)

        # 启动异步任务（PyScript 推荐方式）
        await get_weather()
    </py-script>

? 注意事项：

pyodide.http.pyfetch() 是 PyScript 官方推荐的 HTTP 客户端（替代已弃用的 pyodide.fetch），语法更简洁且自动处理 CORS 和类型推导；
display(..., append=False) 表示替换当前区域内容（避免重复追加）；设为 True 可追加；
实际部署时，请将 API_KEY 移至服务端代理，避免前端硬编码密钥导致泄露；
Yandex 天气 API 需确认域名白名单及配额限制，本地 file:// 协议可能触发 CORS 错误，建议通过 python -m http.server 启动本地服务器测试。

掌握 display() 的使用，是构建交互式 PyScript Web 应用的关键一步——从此告别“控制台有日志、页面全空白”的调试困境。