马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2022-5-10 21:31 编辑
在线演示：
学过小甲鱼老师 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>
接下来在 head 元素中引入：
<head>
...
<link rel="stylesheet" href="css/pyscript.css" />
<script defer src="js/pyscript.js"></script>
</head>
然后在 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>
运行看结果：
这就是加载 Python 脚本的方式，很丝滑有木有～
如果你看不懂 Python 的代码的话，去看小甲鱼老师的完结版 Python 教程哦（传送门）。
2.3 与 HTML 交互
引入完 Python 脚本，我们就可以来搞事情了。
例如我们通过 Python 获取当前日期，然后写入到网页中。
先在网页中创建一个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 文件：
因为可以直接在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、源码包
展示代码：
PyScript-Demo.zip
(582.3 KB, 下载次数: 92, 售价: 7 鱼币)
以防有鱼油没法用 Github，准备了完整源码包：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-5-9 22:53:08
置顶卡
千斤顶
显身卡
发表于 2022-5-10 08:51:50
楼主
发表于 2022-5-10 10:51:37