1、介绍
网页浏览器是目前世界上最普遍，最可携的计算机环境。几乎所有人都可以在计算机或是手机上使用网页浏览器，以没有基础设施障碍的方式访问程序。
在 PyCon US 2022 上，知名 Python 发行版 Anaconda 开发商近日宣布了可在浏览器端运行的 Python — PyScript。
根据官方的介绍，PyScript 是一个开发框架，该框架允许在浏览器中运行Python应用。为开发者提供了在标准 HTML 中嵌入编写 Python 代码的能力、使用 Python 调用 JavaScript 函数库，以及创建 Python Web 应用。它可以让开发者在HTML中创建丰富的Python应用程序，且Python代码可与JavaScript实现双向通信。
官方表示，通过使用PyScript，Python开发者便不需要担心程序部署问题，因为PyScript让程序直接在网页浏览器中运行，也就是说，可以在HTML文件中，分享开发成果，只要其他人在网页浏览器中打开文件，该文件中的程序代码就会开始运行。
2、原理及安装
官网地址：
https://pyscript.net/
由于PyScript目前仍在alpha测试阶段，读者感兴趣的话，可以从pyscript.net下载尝鲜。
另外，PyScript 是基于 Pyodide来 构建的，Pyodide 由编译成 WebAssembly 的 CPython 3.8 解释器组成，允许在网页浏览器中运行 Python。Pyodide 可以安装来自 PyPi 的任何 Python 包。Pyodide 还包括一个外部函数接口，可以将 Python 包暴露给 JavaScript，并将浏览器 UI，包括 DOM，暴露给 Python。
关于 PyScript 运行原理的更多信息查看：https://engineering.anaconda.com/2022/04/welcome-pyscript.html
使用前，需要先下载对应依赖的静态资源文件(CSS、JS)，第一种方式直接将文件下载到本地再引入
<link rel="stylesheet" href="path/to/pyscript.css" /> <script defer src="path/to/pyscript.js"></script>
另外一种方式，直接在线引入
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
3、使用示例
项目源码地址：
https://github.com/pyscript/pyscript
用VSCODE或者PyCharm，或者其他任一你喜欢的编辑器，新建HTML文件，编写示例代码，类似如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>PyScript Hello World</title> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> Hello world! <br> This is the current date and time, as computed by Python: <py-script> from datetime import datetime now = datetime.now() now.strftime("%m/%d/%Y, %H:%M:%S") </py-script> </body> </html>
该示例用于在HTML前端页面，利用Python代码实现打印当前时间的功能。
更多官方示例参考：
https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples
坦白来讲，PyScript 作为一款新面市不久的框架，还存在很多不稳定的问题，分享给各位读者，目的是希望大家能从不同的框架背后，学习借鉴到新的设计思路，取其精华，开阔视野。在没有工作应用场景时，并不需要强制自己去使用，希望大家抱有一种理性的视角来看待新技术、新框架。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)