【PyScript】PyScript 基础入门

PyScript 是一个为了支持 Python 运行在浏览器的开源平台。

1.PyScript 应用程序的创建

PyScript 程序需要以下三个内容

1. 一个提供给浏览器的 index.html 文件。
2. PyScript 的运行环境描述，通常是一个 pyscript.json 或 pyscript.toml 文件。
3. PyScirpt 应用运行的 Python 代码，通常是一个名为 main.py 的文件。

以下是 PyScirpt 的一个官方示例，将英语翻译成海盗的话，使用了 arrr 库。

1.1 PyScript 运行环境描述

这个文件告诉 PyScript 和浏览器应用的各种配置，也即 PyScript 应用程序运行所需的内容，这个示例中只需要第三方库 arrr 来进行翻译。

# pyscript.json
{"packages": ["arrr"]
}

1.2 HTML 文件

这里直接引用了 pyscirpt 的在线 js 文件，因此在运行 PyScipt 应用的时候，并不需要额外安装第三方库。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>🦜 Polyglot - Piratical PyScript</title><link rel="stylesheet" href="https://pyscript.net/releases/2024.6.2/core.css"><script type="module" src="https://pyscript.net/releases/2024.6.2/core.js"></script></head><body><h1>Polyglot 🦜 💬 🇬🇧 ➡️ 🏴‍☠️</h1><p>Translate English into Pirate speak...</p><input type="text" id="english" placeholder="Type English here..." /><button py-click="translate_english">Translate</button><div id="output"></div><script type="py" src="./main.py" config="./pyscript.json"></script></body>
</html>

1.3 PyScript 的 Python 代码

这里是 PyScirpt 的核心代码，提供了 HTML 调用的方法，translate_english 接收到事件后，获取页面的内容后，调用 arr.translate 后将结果绑定到 HTML 的页面元素。

import arrr
from pyscript import documentdef translate_english(event):input_text = document.querySelector("#english")english = input_text.valueoutput_div = document.querySelector("#output")output_div.innerText = arrr.translate(english)

1.4 PyScirpt 本地运行

如果要在本地运行 PyScript 使用如下命令即可在浏览器中访问 PyScript 页面

python3 -m http.server

2.PyScirpt 项目部署

这里使用 Nginx 部署 PyScript 项目，PyScript 本质上是一个前端项目，因此只需要使用 Nginx 代理路径即可，Nginx 的配置内容如下所示：

server {listen 8888;server_name localhost;location / {root /www/pyscript;}
}

页面访问主机的 8888 端口，即可看到 PyScript 的页面，能够正常提供功能。

3.相关链接

[1] PyScript官方文档 https://pyscript.net/

[2] PyScript代码示例 https://pyscript.com/@examples

[3] PyScirpt代码示例 https://docs.pyscript.net/2024.6.2/examples/