Python 官方文档:入门教程 => 点击学习
本文小编为大家详细介绍“基于python怎么使用PyScript”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于Python怎么使用PyScript”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。作用PyScr
本文小编为大家详细介绍“基于python怎么使用PyScript”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于Python怎么使用PyScript”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
PyScript 核心特性:
Python in the browser:启用 drop-in content、外部文件托管(基于 Pyodide 项目),以及不依赖服务器端配置的应用程序托管。
Python 生态:提供流行的 Python 和科学计算软件包(例如 numpy, pandas, scikit-learn 等)。
Python with JavaScript:在 Python 和 javascript 对象和命名空间之间进行双向通信。
环境管理:开发者可定义要引入哪些包和文件,以便页面代码的运行。
可视化应用开发:开发者可使用现成的 UI 组件,如按钮、容器、文本框等。
灵活的框架:开发者可以利用它在 Python 中直接创建和分享新的可插拔和可扩展的组件。
PyScript 目标:
下面,我们来体验一下这个新生事物吧!
我们可以使用 CDN 来安装 PyScript:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.CSS" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /><script defer src="Https://pyscript.net/alpha/pyscript.js"></script>
接着,我们来看看一个简单的页面:
<!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"> <!-- 引入 PyScript --> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <title>First PyScript Application</title> <style> py-script { width: 100%; height: 100%; font-size: 20px; text-align: center; position: absolute; } </style></head><body> <py-script> print('Hello PyScript!') </py-script></body></html>
运行这个程序,你就可以在浏览器页面上看到这个结果了:
这就是我们著名的 Hello
式问候!
这段前端代码里面,我们直接使用 py-script
标签包裹 Python 代码,就实现前端脚本控制功能了。
我这里是在 vscode 里面运行的,运行代码之前需要安装 Live Server
这个插件,然后就可以直接浏览器访问了。
我们再来看一个复杂一点的例子:
<html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" crossorigin="anonymous"> </head> <body> <b><p>Today is <u><label id='today'></label></u></p></b> <br> <div id="pi" class="alert alert-primary"></div> <py-script> import datetime as dt pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y')) def compute_pi(n): pi = 2 for i in range(1,n): pi *= 4 * i ** 2 / (4 * i ** 2 - 1) return pi pi = compute_pi(100000) pyscript.write('pi', f'π is approximately {pi:.3f}') </py-script> </body></html>
这个例子中,我们使用 <py-script>
标签,在里面提供 .write()
方法,将字符串写到页面的标签中。
运行这段代码,我们会看到浏览器页面的结果:
我们还可以在页面中引入 Python 的包,来实现一些简便的操作。
<html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env> - numpy - matplotlib </py-env> </head> <body> <h2>Let's plot random numbers</h2> <div id="plot"></div> <py-script output="plot"> 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 </py-script> </body></html>
在这里,我们引用了 numpy
和 matplotlib
这两个包,引用包是在 <head>
标签内部通过 <py-env>
标签来实现。
运行这个程序,我的页面始终处于加载状态:
读到这里,这篇“基于python怎么使用PyScript”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网Python频道。
--结束END--
本文标题: 基于python怎么使用PyScript
本文链接: https://lsjlt.com/news/340827.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-03-01
2024-03-01
2024-03-01
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0