无需安装 Python 环境，使用 Pyodide 在浏览器中运行 Python

无需安装 Python 环境，使用 Pyodide 在浏览器中运行 Python

Pyodide旨在将Python的功能带到浏览器中。它是一个编译为WebAssembly的Python解释器，可以让您直接在网页中运行Python代码（类似JS）。这意味着您可以在Web应用程序中使用Python，而无需设置单独的服务器或后端。

Pyodide是基于WebAssembly构建的，WebAssembly是一种低级虚拟机，可以在浏览器中运行。WebAssembly允许你运行使用除JavaScript以外的语言编写的代码，包括C ++、Rust和Python。

Pyodide项目包括一个预编译版本的Python解释器，以及一组已编译为WebAssembly的Python模块。当你将Pyodide运行时加载到你的网页中时，它会创建一个Python解释器对象，你可以使用它来执行Python代码。

以下是一个简单的示例，演示如何使用Pyodide将“Hello，world！”打印到控制台：

import pyodide

# Initialize the Pyodide runtime
pyodide.load_package("numpy") # loading NumPy package

# Define a Python function
def hello_world():
    print("Hello, world!")

# Call the function
hello_world()

在这个示例中，我们首先导入pyodide模块，该模块初始化了Pyodide运行时。然后，我们加载NumPy包，这是已经预编译为WebAssembly的模块之一。最后，我们定义了一个简单的Python函数，该函数将“Hello, world！”打印到控制台并调用它。

使用Pyodide与DOM交互

Pyodide最强大的功能之一就是与DOM和其他浏览器API进行交互的能力。Pyodide包含一组特定于浏览器的模块，允许您操纵HTML文档，处理事件等等。

下面是一个示例，展示了如何使用Pyodide更新HTML元素的文本内容：

import pyodide

# Initialize the Pyodide runtime
pyodide.load_package("numpy")
pyodide.load_package("pyodide-js")

# Get a reference to the HTML element
document = pyodide.JSObject(pyodide.evaljs("document"))
element = document.querySelector("#my-element")

# Update the element's text
element.textContent = "Hello, Pyodide!"

在这个示例中，我们首先加载pyodide-js包，该包提供了Pyodide和浏览器JavaScript环境之间的桥梁。然后，我们使用document对象获取了一个ID为my-element的HTML元素的引用，并将其文本内容更新为“Hello, Pyodide!”。

安装方式

可以去官网查看详细的安装介绍：

https://pyodide.org/en/stable/usage/downloading-and-deploying.html

两种方式：CDN 和 NPM 安装

<script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>

或 npm install pyodide