0
点赞
收藏
分享

微信扫一扫

PyScript 是一个框架,<py-script></py-script> 标签 html 如何在 PyScript 中使用 Python 库

编程练习生J 2023-12-29 阅读 35

PyScript 是一个框架,它允许用户使用 HTML 的界面在浏览器中创建丰富的 Python 应用程序¹。以下是如何在 HTML 中运行 PyScript 的步骤²⁴:


1. 在 HTML 文件的 `<head>` 部分插入以下代码:


```html

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

```


2. 在 `<body>` 部分,你可以在 `<py-script></py-script>` 标签中编写 Python 代码。例如:


```html

<py-script>

   print("Hello, World!")

</py-script>

```


3. 保存并在浏览器中打开你的 HTML 文件。你应该能看到 "Hello, World!" 被打印出来。


此外,如果你在使用 VSCode,你可以安装 Live Server extension 来自动重新加载页面⁵。希望这个信息对你有所帮助!


源: 与必应的对话, 2023/12/29

(1) PyScript | Run Python in your HTML. https://pyscript.net/.

(2) PyScript - Run Python With HTML | Better Programming. https://betterprogramming.pub/pyscript-run-python-with-html-e77f1786a062.

(3) PyScript 强势来袭,HTML 也可以跑 Python 了 - TeamCode - SegmentFault 思否. https://segmentfault.com/a/1190000041863484.

(4) Pyscript | 在浏览器中运行Python - 知乎. https://zhuanlan.zhihu.com/p/513288469.

(5) A First Look at PyScript: Python in the Web Browser. https://realpython.com/pyscript-python-in-browser/.

(6) undefined. https://pyscript.net/alpha/pyscript.css.

(7) undefined. https://pyscript.net/alpha/pyscript.js.

(8) undefined. http://127.0.0.1:5500/index.html.



`<py-script></py-script>` 是 PyScript 中的一个特殊标签,它允许你在 HTML 文件中直接编写和运行 Python 代码¹²。你可以在 `<py-script></py-script>` 标签中插入 Python 代码,然后这些代码将在浏览器中执行¹²。


例如,以下是一个简单的示例,它在浏览器中打印出 "Hello, World!"¹:


```html

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Title: PyScript</title>

   <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>

```


此外,`<py-script></py-script>` 标签也可以通过 `src` 属性引入 Python 文件³。例如:


```html

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Title: PyScript</title>

   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

</head>

<body>

   <py-script src="/todo.py"></py-script>

</body>

</html>

```


在这个例子中,`/todo.py` 是一个 Python 文件的路径³。希望这个信息对你有所帮助!


源: 与必应的对话, 2023/12/29

(1) 人人爆吹的PyScript到底是什么? - 知乎. https://zhuanlan.zhihu.com/p/515691149.

(2) 什么?可以在 HTML 中直接插入 Python 代码? - 知乎. https://zhuanlan.zhihu.com/p/510792410.

(3) 下一个 Brython? 不, 是 Python in WebAseembly - CSDN博客. https://blog.csdn.net/Likianta/article/details/124523643.

(4) pyscript+py-env实现python+html https://blog.csdn.net/stay_foolish12/article/details/125427476.

(5) undefined. https://pyscript.net/alpha/pyscript.css.

(6) undefined. https://pyscript.net/alpha/pyscript.js.

(7) undefined. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css.

(8) undefined. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css.

(9) undefined. https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css.

(10) undefined. https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css.

(11) undefined. https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js.

(12) undefined. https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js.

(13) undefined. https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js.

(14) undefined. https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js.

(15) undefined. https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.min.js.

(16) undefined. https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css.

(17) undefined. https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css.

(18) undefined. https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css.

(19) undefined. https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js.

(20) undefined. https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js.


在 PyScript 中使用 Python 库是可能的¹²³。以下是一些步骤:


1. 在 HTML 文件的 `<head>` 部分,使用 `<py-env>` 标签来声明你想要使用的库²³。例如:


```html

<py-env>

   - numpy

   - matplotlib

</py-env>

```


2. 在 `<py-script>` 标签中,你可以像在常规 Python 程序中一样导入这些库¹²³。例如:


```html

<py-script>

   import numpy as np

   import matplotlib.pyplot as plt

</py-script>

```


3. 你还可以直接链接到磁盘上的 `.whl` 文件²。例如:


```html

<py-env>

   - './static/wheels/travertino-0.1.3-py3-none-any.whl'

</py-env>

```


请注意,加载第三方库可能会花费一些时间²。希望这个信息对你有所帮助!


源: 与必应的对话, 2023/12/29

(1) 如何使用 Python 前端框架 PyScript - freeCodeCamp.org. https://www.freecodecamp.org/chinese/news/pyscript-python-front-end-framework/.

(2) PyScript运行Python第三方库_pyodide 第三方库-CSDN博客. https://blog.csdn.net/m0_56699208/article/details/126969861.

(3) PyScript 强势来袭,HTML 也可以跑 Python 了 - TeamCode - SegmentFault 思否. https://segmentfault.com/a/1190000041863484.

(4) PyScript 来了!终于可以在浏览器运行 Python 应用 - 腾讯云. https://cloud.tencent.com/developer/article/1999568.

(5) undefined. https://t.co/n4OoeBD46z.

(6) undefined. https://pyscript.net/alpha/pyscript.css.

(7) undefined. https://pyscript.net/alpha/pyscript.js.

举报

相关推荐

0 条评论