PyScript 详解：在浏览器中运行 Python 代码

小岛来信

发布时间：2026-10-15 | 5人浏览过

原创

PyScript 是 Anaconda 推出的开源项目，允许在 HTML 中嵌入 Python 代码并在浏览器端直接运行。基于 Pyodide 技术，它支持引入 numpy、pandas 等科学计算库，实现 Python 与 JavaScript 的双向通信。尽管目前加载速度较慢，但它为 Python 开发者提供了构建全栈应用的新可能，无需编写 JavaScript 即可实现前端交互。

前言

近期，Anaconda 在大会上发布了 PyScript。这项技术允许开发者将 Python 代码直接嵌入到 HTML 文件中，并在浏览器环境中执行。PyScript 的设计目标是提供一套一致、表现力强且易于学习的编程语言规范，旨在成为用户首选的开发语言。

对于熟悉前端开发的工程师而言，PyScript 的出现很容易让人联想到其对 JavaScript 的替代潜力。

从功能层面看，PyScript 的作用与 JavaScript 类似。如果该项目未来发展顺利，开发者或许可以完全跳过 JavaScript，仅使用 Python 就能实现同等的前端交互效果。

该项目发布后迅速登上 GitHub 趋势榜首位，短短 20 天内获得了超过 10K 的 Star，显示出极高的社区关注度。

虽然无法确定 Anaconda 是否具备取代 JavaScript 的宏大野心，但 PyScript 的诞生无疑令人振奋。它意味着掌握 Python 并辅以基础前端知识的开发者，即可构建美观的前端页面。对于 Python 开发者而言，这标志着利用 Python 和 HTML 知识成为全栈工程师的新路径。

核心特性与目标

PyScript 具备以下核心特性：

浏览器内运行 Python：支持直接嵌入内容、托管外部文件（基于 Pyodide 项目），以及无需服务器端配置即可部署应用程序。
丰富的 Python 生态：内置支持流行的 Python 包及科学计算库，如 numpy、pandas、scikit-learn 等。
Python 与 JavaScript 交互：支持在 Python 和 JavaScript 的对象及命名空间之间进行双向数据通信。
环境管理：开发者可以明确定义页面运行所需的包和文件列表。
可视化应用开发：提供按钮、容器、文本框等现成的 UI 组件，简化界面构建。
灵活的框架架构：允许开发者在 Python 中直接创建、分享可插拔和可扩展的自定义组件。

PyScript 的设计目标包括：

提供简洁清晰的 API 接口。
全面支持标准 HTML 语法。
扩展 HTML 以读取稳定且可靠的自定义组件。
构建可插拔、可扩展的组件系统。

使用方法

接下来，我们将通过实际案例来体验这一新技术。

首先，可以通过 CDN 方式引入 PyScript 库：

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

随后，我们构建一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 PyScript -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>First PyScript Application</title>
    <style>
        py-script {
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>
<body>
    <py-script>
        print('Hello PyScript!')
    </py-script>
</body>
</html>

执行上述程序后，浏览器页面将显示运行结果：

这就是经典的Hello式问候语输出。

在前端代码中，我们直接使用py-script标签包裹 Python 代码，从而实现了前端脚本的控制功能。

如果在 VS Code 中运行，需先安装Live Server插件，即可直接在浏览器中预览效果。

接着，我们来看一个更复杂的示例：

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <br>
    <div id="pi" class="alert alert-primary"></div>
    <py-script>
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))

        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        pyscript.write('pi', f'π is approximately {pi:.3f}')
    </py-script>
  </body>
</html>

该示例中，使用了<py-script>标签，并通过其中的.write()方法将字符串写入页面的指定标签中。

运行此代码后，浏览器页面将展示如下结果：

此外，我们还可以在页面中引入 Python 第三方库，以执行更便捷的操作。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>
  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
        import matplotlib.pyplot as plt
        import numpy as np
        x = np.random.randn(1000)
        y = np.random.randn(1000)

        fig, ax = plt.subplots()
        ax.scatter(x, y)
        fig
    </py-script>
  </body>
</html>

在此示例中，我们引用了numpy和 matplotlib两个库。库的引入是在<head>标签内部，通过<py-env>标签来声明实现的。

运行该程序时，页面可能会长时间处于加载状态：