PyScript 教程 | 在 Web 浏览器中运行 Python 脚本

2025年03月17日 | 阅读 9 分钟

在本教程中，我们将学习新引入的 Python 库，也可以说是新功能 PyScript。该库允许我们在网页浏览器中运行 Python 脚本。Python 提供了许多使程序员生活更轻松的功能。现在，他们推出了新功能，可以将 Python 程序集成到前端。

长期以来，JavaScript 一直是前端开发中最流行和主导的语言。它可以在浏览器中原生运行，并通过 DOM API 与 HTML 和 CSS 交互。但随着 WebAssembly 的到来，情况开始发生变化。现在许多语言，如 C、C++ 和许多其他语言都可以在浏览器中高速运行。那么 Python 为何不利用这一特性呢？

PyScript 是一个在 HTML 中交错使用 Python 的系统。我们将在本教程中涵盖以下主题。

什么是 PyScript？
PyScript 如何工作？
PyScript 的项目设置
在本地设置 PyScript 的项目文件夹。
开始
内部 PyScript
外部 PyScript
在 Python 中使用 Python 第三方模块
结论

前提条件

在继续之前，我们应该具备：

对 HTML、CSS 和 JavaScript 有基本了解。
对 Python 编程语言有相当的了解。
一个网络服务器。我们将使用 Python 创建示例服务器，因此系统应安装 Python。
一个网页浏览器，根据 PyScript 官方文档，推荐使用 Chrome。

什么是 PyScript？

PyScript 是一个开源的 Python 框架，它提供了使用 Python 创建前端 Web 应用程序的功能。这意味着我们可以在 HTML 中编写和运行代码。PyScript 允许我们将 Python 代码嵌入到 HTML 中，或链接到 Python 文件，并且代码将在浏览器中运行。我们无需在后端运行 Python。

PyScript 由 Anaconda 开发，并于 2022 年 4 月 30 日在 PyCon US 公开。在撰写本文时，PyScript 仍处于开发阶段，团队正在积极进行工作。因此，我们可以预期会有重大更改和新功能，因为它尚未稳定发布。

PyScript 如何工作？

PyScript 基本上基于 pyodide，这意味着“CPython 到 web assembly/Emscripten 的移植”项目。WebAssembly 是一种低级二进制格式，允许我们用其他语言编写程序，然后在浏览器中执行。CPython 允许我们在浏览器上安装和运行 Python 包，而 PyScript 抽象允许我们使用 Python 在浏览器中开发前端应用程序。

PyScript 的特性

以下是 PyScript 的特性：

它允许我们将 Python 代码嵌入到 HTML 中。
我们无需担心部署，因为我们正在使用 pyscript。一切都由网页浏览器处理。我们可以与任何人交换包含精致仪表板或任何图表数据的 HTML 文件。
PyScript 由三个主要部分组成 - py-env、py-script 和 py-repl。我们稍后会详细介绍。

PyScript 的项目设置

在开始使用 PyScript 之前，让我们创建一个目录来存放我们的代码。

打开终端并使用以下命令创建项目目录。

现在在 Visual Studio 或 Pycharm 中打开目录。现在我们已准备好实现 PyScript。

开始

首先，我们将创建 HTML 文件，并在 HTML 页面的 <head> 部分添加指向 PyScript 资产（包括 CSS 文件和 JavaScript 文件）的链接。完成资产设置后，我们可以通过以下两种方式之一在 HTML 文件中使用 PyScript：

内部 PyScript

顾名思义，我们可以将 Python 代码嵌入到 HTML 中的 <py-script> 标签内。<py-script> 标签可以根据手头的任务添加到 <head> 或 <body> 标签中。

外部 PyScript

在这种方法中，我们编写带有 .py 扩展名的代码，然后可以使用 src 属性在 <py-script> 标签中引用该代码。

让我们了解内部 PyScript

内部 PyScript

这是开始使用 PyScript 的最简单快捷的方法，即将 Python 代码嵌入到 HTML 文件中。

在我们的工作目录中，创建一个 hello_pyscript.html 文件并添加以下脚本。

示例 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello World!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- Put Python code inside the the <py-script> tag -->
    <py-script>print("Hello World!")</py-script>
  </body>
</html>

在上面的代码中，我们在 <head> 部分添加了 pyscript.css。它包含 PyScript 可视组件、REPL、PyScript 加载器等的样式。然后，我们链接到 pyscript.js 文件，其中包含使用 PyScript 所需的功能，例如创建 <py-script> 标签，我们可以在其中编写 Python 代码。

现在将文件保存在项目目录的根目录中，并在 Chrome 中打开 hello_script.html 文件。

外部 PyScript

外部 PyScript 是一种更好、更具扩展性的添加代码的方法。以下是在外部文件中使用 PyScript 代码的一些原因。

浏览器缓存文件，从而提高性能。
我们可以在多个页面中引用文件，减少重复。
Python 代码可以使用其他工具（如 black 或 Python linter）进行格式化。这些工具目前无法用于嵌入在 HTML 中的 Python 代码。

要实现 PyScript 外部，我们需要创建 index.html 文件和一个要嵌入的 Python 文件。

创建 index.html 文件

创建 index.html 文件并链接到 PyScript 资产。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello from PyScript!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

目前，此文件无法工作，因为我们只是链接到 PyScript 资源。为了使其工作，我们需要创建 main.py 文件，其中包含我们的 Python 代码。

创建 main.py

在 main.py 文件中，我们创建了一个 Python 函数，用于打印问候消息。让我们创建 main.py 文件。

def greetings(name):
    print(f'Hi, {name}')

greetings('Peter Parker')

上面的函数接受一个 name 参数，并打印一条包含存储在 name 参数中的姓名的问候消息。当调用此函数时，它将打印“嗨，彼得·帕克”。

在 HTML 文件中嵌入 main.py 文件

现在，我们将在 index.html 文件中链接 main.py 文件。打开 index.html，在 body 标签中添加样式行。

示例 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

正如我们所观察到的，我们添加了 src 标签，它接受文件名和路径。

在接下来的部分中，我们将引用一个外部 Python 文件，这将需要我们使用服务器来避免 CORS 错误。

使用 PyScript REPL

Python 提供了一个 Read-Eval-Print Loop (REPL)，我们可以用它来实验和尝试 Python 代码。

要使用 REPL，请在 index.html 文件中的 body 标签中添加 <py-repl> 标签。

<!DOCTYPE html>
  ...
  <body>
  <py-script src="./main.py"></py-script>
  // add the following tag
  <py-repl></py-repl>
  </body>
</html>

在这里我们可以使用所有功能；例如评估表达式、创建函数等等。要查看表达式的评估结果，我们需要单击绿色的播放图标。

以下是一些我们可以看到的操作：

示例 -

PyScript Tutorial | Run Python Script in the Web Browser

from datetime import timedelta
year = timedelta(days=365)
print(year.total_seconds())

a = 10 
b = 20
print("The sum of a + b = ", a + b)

输出

31536000.0
The sum of a + b =
30

现在我们了解了如何使用 REPL，接下来我们将学习如何在 Python 中创建和使用模块。

在 PyScript 中使用 Python 模块

现在我们将创建 Python 自定义模块并在我们的 HTML 代码中使用它。我们还将从 Python 标准库以及第三方模块导入模块。

PyScript 提供了 <py-env>，它允许我们引用模块或模块文件路径。

创建自定义模块

现在我们在项目目录中的 my_module.py 文件中定义了两个函数。让我们添加以下代码行。

my_module.py

def multiply(num1, num2):
    return num1 * num2

def divide(num1, num2):
    return num1 % num2

现在，我们正在创建 modules.html 文件并添加以下代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>local modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
 <py-env>
    - paths:
        - my_module.py
  </py-env> 
  <py-script>
from my_module import multiply
print(subtract(8, 4))
  <py-script>
  </body>
</html>

在上面的代码中，我们在 body 标签内使用了 <py-env>，它接受一个 YAML 列表，其中 paths 作为其键。my_module.py 是自定义模块相对于 modules.html 文件的文件路径。一旦指定了自定义模块的路径，PyScript 将在文件中导入模块。

我们从 my_module 模块导入了乘法函数。当我们启动服务器时，我们可以看到以下输出。

从 Python 标准库导入模块

PyScript，正如我们之前讨论的 Python 是基于 Pyodide 编写的，它提供了对 Python 标准库中许多可用模块的访问，这些模块可供您使用，除了以下模块：

venv
Tkinter
dbm

根据 Pyodide 官方文档，以下模块可以导入，但由于 WebAssembly VM 的限制，它们无法正常工作。

多进程
多线程
套接字

我们修改了 <py-script> 标签中的 Python 代码，以使用 random 模块生成随机数。

示例 -

from mathslib import subtract
import random
print(subtract(8, 4))
print("random number generated: ")
print(random.randint(1, 12))

当我们访问服务器时，每次刷新页面都会看到生成的随机数。

使用第三方包

除了使用 Python 内置模块，我们还可以使用 Pyodide 中提供的第三方库，例如：

pytest
Jinja2
beautifulsoup4
Numpy
Pandas
Matplotlib
PIL
scikit-learn

创建一个新的 HTML 文件并添加以下代码 -

示例 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>external modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- thirdparty dependencies added here -->
 <py-env>
    - numpy 
    - matplotlib
  </py-env> 
  <py-script>
import numpy as np
import matplotlib.pyplot as plt
arr = np.array([1, 2, 3, 4, 5])
plt.plot(arr)
plt
  <py-script>
  </body>
</html>

在上面的代码中，我们添加了 <py-env> 标签，其中包含我们要在项目中使用的第三方包列表，包括 - NumPy 和 Matplotlib 包。接下来，在 <py-script> 标签中，我们将 NumPy 导入为 np，将 Matplotlib 导入为 plt。然后，我们调用 NumPy 的 array 方法，该方法创建一个数组并存储在 arr 变量中。之后，我们调用 Matplotlib 的 plot 方法，将数组 arr 作为参数来绘制图表。

输出 -

现在，我们已经解释了如何使用自定义模块、内置模块和第三方包。我们将在下一节讨论如何访问和操作 HTML 元素。

如何使用 PyScript 访问和操作 HTML 元素

在本教程的这一部分，我们将学习使用 ID 或 CSS 类选择 HTML 元素，修改元素，将事件附加到元素，以及使用 PyScript 创建新元素。

使用 Element 类

PyScript 随附 Element 类，它允许我们使用 ID 选择 HTML 元素。

为了理解它，创建一个新的 html 文件 elements.html 并插入以下代码 -

示例 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Element class</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <ul id="navigation">
    <li class="home">home</li>
    <li class="about">about</li>
    <li class="services">services</li>
    <li class="contact">contact</li></ul>
  </div>
  <div id="output"></div>
  <py-script src="./get_elements.py"></py-script>
  </body>
</html>

在上面的代码中，我们在 <body> 标签中使用了 ID 为 navigation 的 <ul> 元素。我们将使用此 ID 通过 Element 类选择此元素。所选实例将为我们提供可用于选择后代并对其进行操作的方法。

我们使用了另一个 ID 为 output 的 <div> 标签。我们将更改其 innerHTML 以写入新值。然后我们链接了 ge_element.py 文件，该文件将包含我们的 Python 代码。现在，让我们创建 get_element.py 文件，并添加以下文件。

示例 - get_element.py

ul_element = Element("navigation")
first_element = ul_element.select('.home').add_class('first')
second_element = ul_element.select('.about').remove_class('about')
div_element = Element("output")
div_element.write("Value set from PyScript")

在上面的代码中，我们使用 Element 类通过导航 ID 访问 <ul> 元素。

当使用 Element 类选择元素时，我们可以利用以下一些方法：

write() - 设置 innerHTML 值。
select() - 使用 CSS 选择器查找后代元素。
add_class() - 为元素添加一个或多个类。
remove_class() - 从元素中删除一个或多个类

结论

我们已经涵盖了 PyScript 的重要主题，您对这个框架有了一定的了解。本教程包括它的介绍、工作原理和功能。我们可以在 HTML 中轻松使用 PyScript。我们可以使用内部或外部 Python 脚本。PyScript 无疑是一项有趣的新技术，它允许您借助 Pyodide 和 WebAssembly 在 Web 浏览器中运行 Python 代码。

下一主题Python FlashText 模块

PyScript 教程 | 在 Web 浏览器中运行 Python 脚本

前提条件

什么是 PyScript？

PyScript 如何工作？

PyScript 的特性

PyScript 的项目设置

开始

内部 PyScript

外部 PyScript

在 HTML 文件中嵌入 main.py 文件

使用 PyScript REPL

在 PyScript 中使用 Python 模块

创建自定义模块

从 Python 标准库导入模块

使用第三方包

如何使用 PyScript 访问和操作 HTML 元素

使用 Element 类

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Python 问题

PyScript 教程 | 在 Web 浏览器中运行 Python 脚本

前提条件

什么是 PyScript？

PyScript 如何工作？

PyScript 的特性

PyScript 的项目设置

开始

内部 PyScript

外部 PyScript

在 HTML 文件中嵌入 main.py 文件

使用 PyScript REPL

在 PyScript 中使用 Python 模块

创建自定义模块

从 Python 标准库导入模块

使用第三方包

如何使用 PyScript 访问和操作 HTML 元素

使用 Element 类

结论

相关帖子

Python ChemPy 模块

Python 集合转列表

如何使用 Python 确定二叉树是否高度平衡

Python 中的 bokeh.plotting.figure.diamond_cross() 函数

Python 中的 Numpy Logical _and()

Sklearn 线性回归示例

Python 中的 ANOVA 检验

如何在 Python 中使用 pass 语句

如何在 Python 中添加空格

使用 Flask、Connexion 和 SQLAlchemy 构建 Python REST API

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器