【初体验】PyScript 让浏览器直接运行 Python
本帖最后由 不二如是 于 2022-5-10 21:31 编辑在线演示：
https://www.bilibili.com/video/BV1JY4y1r79t
static/image/hrline/1.gif
学过小甲鱼老师 Web 和 Python 课程的童鞋有福气了～
Anaconda 的开发商近日发布了可在浏览器端运行的 Python —— PyScript
（官网 >> 传送门）
PyScript 是一个开发框架，为开发者提供了在标准 HTML 中嵌入编写 Python 代码的能力、使用 Python 调用 JavaScript 函数库，以及创建 Python Web 应用。
PyScript 旨在提供“一等公民(first-class)”的编程语言，它具有一致的风格化规则、更具表现力且更易于学习。
废话不多说了，我们通过一下几部分带鱼油们快速上手～
[*]1、安装
[*]2、Demo
[*]2.1 打印Hello World
[*]2.2 加载python文件
[*]2.3 与HTML交互
[*]2.4 配置Python开发环境
[*]2.5 REPL
[*]3、原理
[*]4、源码包
1、安装
PyScript 就 2 种使用方式：本地和在线。
本地就是将用到的脚本下载到本地，然后手动引入到项目中。
就像这样：
<script defer src="js/pyscript.js"></script>
在线就是将在本地引入的脚本，变成在线引入，就像这样：
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
在线的好处就是不用管版本问题，官方提供的链接肯定是最新版。
以防有的鱼油无法访问上面的链接，我们接下来的演示都用本地的。
2、DEMO
PyScript 使用以下三个主要元素在 html 中编写 Python：
[*]py-env 定义了运行 Python 代码所需的包
[*]py-script 是在网页中编写 Python 代码的地方
[*]py-repl 创建一个 REPL(读取-评估-打印循环)组件，用于评估用户输入的代码并显示结果
我们依次来用下。
2.1 打印Hello World
我们先创建一个最基础的网页结构 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鱼C-PyScript演示</title>
</head>
<body>
</body>
</html>
看不懂代码的童鞋，去看小甲鱼老师的 Web 教程（传送门）。
接下来在 head 元素中引入：
<head>
...
<link rel="stylesheet" href="css/pyscript.css" />
<script defer src="js/pyscript.js"></script>
</head>
注意， 一定要指定 script 元素的 defer 属性，这样浏览器会继续解析、渲染画面，而不会因为需要载入 script 元素内的资源而卡住。
然后在 body 元素中键入：
<body>
<py-script>print("Hello World,Hello FishC")</py-script>
</body>
看结果：
这就完成在浏览器中运行 Python 代码啦～
是不是很容易～
加载完指定脚本后，只需将 Python 代码写到 py-script 元素中就可以。
2.2 加载 Python 脚本
接下来我们在和 index.html 同级地方创建一个 Python 文件 fishc.py。
接下来只需要在 py-script 元素中通过 src 属性引入即可：
<py-script src="fishc.py"></py-script>
在 fishc.py 中我们先写入一个打印：
print("Hello FishC")
运行看结果：
这就是加载 Python 脚本的方式，很丝滑有木有～
如果你看不懂 Python 的代码的话，去看小甲鱼老师的完结版 Python 教程哦（传送门）。
2.3 与 HTML 交互
引入完 Python 脚本，我们就可以来搞事情了。
例如我们通过 Python 获取当前日期，然后写入到网页中。
先在网页中创建一个id 为 date 的 p 元素用来接收数据：
<p id="date"></p>
接着在 fishc.py 中添加脚本：
import datetime as dt
pyscript.write('date', dt.datetime.today())
运行看结果：
没问题哈～
格式有点生硬，我们按照星期，月，日，年的顺序显示：
import datetime as dt
pyscript.write('date', dt.datetime.today().strftime('%A %B %d,%Y'))
结果：
这就舒服多了。
所有在 python 脚本写的代码都可以写到 py-script 元素中。
如果需要像另一个元素中写入数据，就在脚本再写一个 pyscript.write() 就好。
2.4 配置Python开发环境
例如我们通过 matplotlib 中的子库以及 numpy 库快速创建个散点图，修改 python 脚本：
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
运行：
报错了，核心思想就是 PyScript 中没有 matplotlib 库。
我们需要手动配置下，在 head 元素中添加 py-env 元素，然后通过 - 名称 来运行所需要的包。
，修改 py-env：
<py-env>
- matplotlib
</py-env>
运行看结果：
除了加载库以外还可以通过设置 paths 来加载其他 python 文件：
- paths
- 文件路径
因为可以直接在python脚本中实现，有点鸡肋，就不做演示了。
2.5 REPL
用过 Anaconda 的鱼油对 REPL 应该不陌生，它是 Read-Eval-Print Loop 的首字母缩写。
表示一种简单的，交互式的编程环境，也就是命令行的模式。
直接在小方框中输入代码，按 shift+enter 就会出结果。
启用方式也很简单，直接在 body 中创建 py-replt 元素，auto-generate 属性设置为 true：
<py-repl auto-generate="true"></py-repl>
运行：
enter 换行，shift+enter 运行结果。
3、原理
PyScript 基于 Pyodide 构建，Pyodide 由编译成 WebAssembly 的 CPython 3.8 解释器组成。
允许在网页浏览器中运行 Python。
Pyodide 可以安装来自 PyPi 的任何 Python 包。
它还包括一个外部函数接口，可以将 Python 包暴露给 JavaScript，并将浏览器 UI，包括 DOM，暴露给 Python。
更多原理大家可以自己去看官方文档：
官网 >> 传送门
4、源码包
展示代码：
以防有鱼油没法用 Github，准备了完整源码包：
**** Hidden Message ***** PyScript好好玩
是不是意味着我不用学js了？？？ 估计它也无法替代ajax 雷欧库珀 发表于 2022-5-10 08:51
PyScript好好玩
是不是意味着我不用学js了？？？
看需求场景 雷欧库珀 发表于 2022-5-10 08:51
PyScript好好玩
是不是意味着我不用学js了？？？
学js更多的还是为了操作DOM 13 个请求
已传输 11.9 MB
22.7 MB 项资源
完成用时：3.52 秒
DOMContentLoaded：66 毫秒
加载时间：504 毫秒
---------------
打印个Hello 这也太离谱了哈哈哈哈 King丨小义 发表于 2022-5-10 10:51
学js更多的还是为了操作DOM
像我这种业余玩家应该够用了，后续它会不会支持操作呢 PyScript好好玩 PyScript好好玩 PyScript好好玩 pyscript里是不是不能用 time.sleep()
我间隔5s地输出当地时间，显示结果一样 PyScript好好玩 PyScript好好玩 PyScript好好玩 PyScript好好玩 PyScript好好玩 PyScript好好玩 PyScript好好玩 windows能用吗
PyScript好好玩