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 document


def translate_english(event):
    input_text = document.querySelector("#english")
    english = input_text.value
    output_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/