PyScript是一个由Anaconda 推出的框架！它允许我们在浏览器中使用Python！通过PyScript我们可以在浏览器中运行许多运行许多流行的Python包和科学堆栈（如numpy，pandas，scikit-learn等）！
介绍
PyScript是一个使用servlet+TypeScript编写的单页面应用程序（SPA）,它允许我们使用python来搭建不必与服务器他通信的交互式网站！PyScript依赖于Pyodide。Pyodide 带有一个强大的 Javascript ⟺ Python 外部函数接口.Pyodide 可以将Python编译成WebAssembly。
安装
在PyScript官网pyscript.net提供了CDN和外部资源文件！这里我们直接使用CDN即可！
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
helloworld
PyScript不需要要WEB浏览器以外的任何开发环境！PyScript官方建议我们使用Chrome（ PyScript 仅在Google Chrome上进行了测试。）! 同时推荐我们VSCode的live server 插件！目前PyScript处于alpha阶段，因此不建议用于生产环境！
创建一个index.html文件，引入CDN!
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
</body>
</html>
PyScript提供了<py-script></py-script>标签来编写python代码！
万物起源：Hello, World!，
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body> <py-script> print('Hello, World!') </py-script> </body>
</html>
你可以选择直接点击HTML文件运行，也可以选择使用WEB服务器启动！
使用live-server运行
如果你使用了liver-server插件，右键open with liver server。liver-server会自动打开默认的浏览器，再次强调，官方建议使用chrome浏览器！
如果你打开页面的一直显示的是loading runtime ，请不要着急，PyScript正在加载外部文件！、PyScript 必须从 jsDelivr CDN 获取十几个额外的资源！
使用python运行
你都用PyScript了，那我默认你本地已经搭建了python环境。我们可以用python的http.server来运行html文件！在终端打开html文件所在的目录。执行下面的代码：
python -m http.server [port]
两种方式操作DOM
PyScript的JavaScript代理适配器
我们使用了print函数打印了hello,world。在网页开发中，我们经常需要操作DOM。PyScript同样可以做到这一点！通过Pyodide 的代理对象，我们可以在python中访问javaScript对象！当然既然是python，我们也可以使用python的语法以及python的第三方包，例如NumPy、pandas、scikit-learn 。
假设我们有一个p标签，我们想通过python语法获取到当前的时间并添加到p标签内。
<p id="curDay"></p>
通过导入python的datetime模块，我们来获取当前时间。然后通过pyscript.write()将内容添加到p标签内！
pyscript.write()方法接受两个参数，第一个是元素的选择器，第二个是要写入该元素的文本。
<py-script>
import datetime as dt
pyscript.write('curDay', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>
PrScript中还提供了全局Element()构造方法来获取DOM元素！
例如我们有一个input标签。
<input id="inputTest" type="text" value="我是input">
我们传入ID选择器，获取到input的value
inputTest = Element("inputTest")
print("获取input value-"+inputTest.value)
Element类还提供了其他的一些方法和只读属性。
| Member | Description |
|---|---|
.element |
JavaScript HTML元素的代理对象 |
.id |
HTML元素的’id’属性（如果存在）的字符串值 |
.value |
HTML元素的’value’属性（如果存在）的字符串值 |
.add_class() |
添加一个或多个CSS类 |
.remove_class() |
删除一个或多个CSS类 |
.write() |
更新元素的innerHtml属性或者添加一个新的div标签 |
.clear() |
清楚.value or .innerHTML 属性 |
.clone() |
克隆元素并将其深拷贝副本插入DOM树 |
.select() |
使用CSS选择器查找子元素 |
Pyodide的javaScript代理
我们可以通过引入js包,来使用js操作DOM。js包中将javaScript中的一些常用方法和属性挂载到js上！
import js
print(js.window.innerWidth)
print(js.document.title)
js.console.log("Hello world!")
ps:PyScript 已经从模块中导入了一些东西到 Python 的全局命名空间中。特别是console和document对象可以直接使用
import js
print(window.innerWidth)
print(document.title)
console.log("Hello world!")
这种做法使得我们可以用纯JavaScript来操作DOM!
添加第三方python包
PyScript提供了<py-env></py-env>标签，方便我们添加第三方包。py-env的功能与pip类似！</py-env>包含一个YAML列表，包含需要获取的包名称，我们查看开发工具中的Network选项卡时，会发现下载的包文件！
语法：连字符**-**之后指定包名
- 包名
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- matplotlib
</py-env>
<py-script>
import matplotlib.pyplot as plt
import numpy as np
</py-script>
</head>
添加本地python包
添加本地python包，需要使用- paths:指定文件目录。
语法：
- paths:
- 包路径
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- ./helloWorld.py
</py-env>
</head>
如果helloWorld.py中有下面的函数：
def sayHello():
return 'Hello, world!';
我们可以通过from * import 来导入sayHello函数！
from helloWorld import sayHello
print(sayHello())
吊炸天的py-repl
PyScript提供了许多标签，每个标签都有特定的作用！py-repl标签，可以创建一个python的read-evaluate–print-loop交互式环境！他的效果类似 jupyter，我们可以编写python代码，并执行查看结果！除此之外，py-repl还允许我们指定结果展示和错误展示区域：std-out和std-err。
我们只需要将py-repl写在body标签内部即可！
<div class="container">
<div>
<py-repl std-out="output" std-err="errors"></py-repl>
</div>
<div>
<b>结果</b><hr>
<div id="output"></div>
</div>
<div>
<b>错误</b><hr>
<div id="errors"></div>
</div>
</div>
注意
写过python的同学都知道，在python中遵守着严格的语法越位规则，每个空格都极其重要！然而HTML CSS JS又是极其自由的语言，对于他们而言，多余的空格就被自动忽略，这也是我们可以压缩HTML CSS JS代码的重要原因！
所以，对于开发而言，我们最好的办法还是将python代码提取到单独的文件中。py-script提供了src属性，方便我们引入外部python文件！
<py-script src="/custom_script.py"></py-script>
请注意这种写法与包引入的写法不同在：通过src引入的方式，会加载和立即运行python脚本！
其他组件标签
<py-title>
通过这个标签，添加一个水平居中的标题，最终会被编译成h1标签。这里PyScript提供了默认的样式。
<py-title>我是py-title</py-title>
<py-box>
py-box是一个容器元素，同时提供了一些可选的属性，例如width可以指定子元素的宽度占比.
<py-box widths="2/3;1/6;1/6">
<div>1</div>
<div>2</div>
<div>3</div>
</py-box>
<py-button>
py-button可以添加一个按钮，同时还可以在其内部指定click事件
<py-button label="点我" id="btn">
</py-button>
import pyodide
def on_click(e):
e.target.innerHTML = "我被点啦"
change_me_element = document.getElementById('btn')
change_me_element.addEventListener('click', pyodide.create_proxy(on_click))
当我们点击之后
<py-inputbox>
py-inputbox可以添加一个输入框！
<py-inputbox></py-inputbox>