代码收藏家 Python 通过 WebAssembly (Wasm) 在网页中运行实践指南
想问下PY能运行到网页吗？WebAssembly 的方式
是的，Python 可以通过 WebAssembly (Wasm) 在网页中运行！这种方式允许你在浏览器中直接执行 Python 代码，无需服务器支持。以下是几种主流方案及其特点：
1. Pyodide（最流行的方案）
Pyodide 是 Mozilla 开发的项目，将 CPython 编译到 WebAssembly 中，可在浏览器中运行完整的 Python 环境。
特点：
示例代码：
<!-- 在HTML中嵌入Pyodide -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script>
async function main() {
let pyodide = await loadPyodide();
// 运行Python代码
pyodide.runPython(`
import numpy as np
x = np.array([1, 2, 3])
print("Sum:", x.sum())
`);
// Python与JavaScript互操作
const result = pyodide.runPython(`
"Hello from Python!"
`);
console.log(result); // 输出到JavaScript控制台
}
main();
</script>
应用场景：
2. Brython
Brython 是纯 Python 实现的 Python-to-JavaScript 编译器，无需 WebAssembly。
特点：
示例代码：html
<!-- 在HTML中嵌入Brython -->
<script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython_stdlib.js"></script>
<body onload="brython()">
<script type="text/python">
from browser import document, window
def square(x):
return x ** 2
# 与DOM交互
document["button"].bind("click", lambda e:
document["result"].text = square(5)
)
</script>
<button id="button">计算5的平方</button>
<div id="result"></div>
</body>
应用场景：
3. Transcrypt
将 Python 代码静态编译为高效的 JavaScript，不依赖 WebAssembly。
特点：
示例代码：python
# main.py
def add(a, b):
return a + b
# 导出为JavaScript可用的模块
__pragma__('js', 'export default add')
编译后使用：javascript
// 在JavaScript中导入
import add from './main.js';
console.log(add(3, 4)); // 输出7
应用场景：
4. WASM + Python（自定义编译）
使用 Emscripten 或 Wasmtime 手动将 Python 编译为 WebAssembly。
步骤：
- 获取 Python 源码
- 使用 Emscripten 编译为 WASM
- 创建 JavaScript 包装器
- 在浏览器中加载并运行
优点：
缺点：
性能与限制
应用场景
- 在线代码编辑器：如 Repl.it、Google Colab 的 Web 版
- 数据可视化工具：直接在浏览器中运行 Pandas/Matplotlib
- Python 库 Web 演示：将 NumPy、SciPy 功能嵌入网页
- 教育平台：交互式 Python 学习环境
- 混合应用：Python 后端逻辑 + WebAssembly 前端展示
总结
| 方案 | 技术路线 | 适合场景 | 学习曲线 |
|---|---|---|---|
| Pyodide | CPython → WebAssembly | 科学计算、完整 Python | 中高 |
| Brython | Python → JavaScript | 轻量级脚本、教育 | 低 |
| Transcrypt | Python → 优化 JavaScript | 与 JS 深度集成 | 中 |
| 自定义编译 | 手动编译到 WASM | 高级定制需求 | 极高 |
如果你想快速上手，推荐使用 Pyodide，它提供了最完整的 Python 环境和丰富的科学计算支持。对于简单场景，Brython 是更轻量级的选择。
作者：专注VB编程开发20年
