想象一下,在任何地方都可以编写您最喜欢的编程语言,并且不受终端的限制。是的,您现在可以在浏览器 HTML 中编写 Python 代码并使用 PyScript 渲染它,这比您想象的要容易得多。

🌟 PyScript 是什么?

PyScript是一个框架,它允许用户使用 HTML 的界面和Pyodide、WASM和现代 Web 技术的强大功能在浏览器中创建丰富的 Python 应用程序。

image.png

Pyodide是 CPython 到 WebAssembly/Emscripten 的一个端口。 Pyodide 使得在浏览器中安装和运行 Python 包成为可能。访问REPL在这里玩一下。

PyScript 框架为每个体验级别的用户提供了对具有无数应用程序的富有表现力、易于学习的工具的访问权限。

PyScript 是 Scratch、JSFiddle 和其他“易于使用”的编程框架的 Pythonic 替代品,其目标是使 Web 成为一个友好、可破解的地方,任何人都可以在其中编写有趣的交互式应用程序。

🌟 PyScript 简介

要开始使用,请参阅入门教程但现在让我们看看在使用 PyScript 时如何使用三个最有用的标签。

我今天基本上会从 PyScript 做一个Hello World Program,我将构建小型 Web 应用程序,在不久的将来使用它和其他相关的 PyScript 教程,因为它会变得更好。

🌟<py-script>

它可用于定义可在网页中执行的 python 代码。元素本身不渲染到页面,仅用于添加逻辑。

<!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">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>Hello PyScript</title>
</head>
<body>
    <py-script>
        print('Hello PyScript')

        def hello():
            return 'Hello PyScript from a function'

        hello()
    </py-script>
</body>
</html>

所以我们基本上添加了它,以便用py-script标签编写我们的 Python;

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

script 标签中的defer是一个布尔值,用于表示在文档解析完成后执行脚本。它适用于外部脚本。

从我的文件中可以看出,即使在 HTML 中编写 Python 时,缩进也非常重要。

要运行上述文件,您可以单击它并使用 Chrome 加载它,但我建议使用实时服务器(VS Code Extension)或通过运行轻松地使用 Python 的http.server模块提供它;

python -m http.server

Pythonhttp.server模块可以通过解释器的-m开关直接调用。这会提供与当前目录相关的文件,但您可能需要刷新以进行更改,这与 Live Server 不同。

是的,它真的很笨重而且很慢......

image.png

最后 ... image.png

如果代码库变得太大怎么办,您不会在py-script标记中写入所有内容,因此您现在可以在同一根文件夹中创建一个 Python 文件。

所以你可以像这样在src属性中添加它;

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

所以我们的新变化;

image.png

如果您有模块并且希望能够使用其中的一些模块怎么办?如果您使用内置的 python 库很简单,您只需像通常在 python 中所做的那样导入它们。

所以让我们试试math库。为此添加另一个py-script标签;

<py-script>
        # Standard Python Libraries
        import math

        squares = [math.sqrt(i) for i in [4,16,36,64]]  
        print(squares)
</py-script>

我们的新输出;

image.png

🌟<py-env>

如果我们想使用外部模块怎么办。这向我们介绍了可以在标签中声明的第二个 PyScript 标记,并列出了这些库的列表。

<py-env>
        - numpy
</py-env>

在body中创建另一个py-script标签;

<py-script>
        # External Supported Libraries
        import numpy as np

        arr = np.array([2,4,6,8])
        print("Square Value of arr : ", np.square(arr))
</py-script>

输出;

image.png

显然,您可以使用另一个文件或引导程序添加一些样式以使它们具有可表示性,如果您是前端开发人员,这对您来说是一个小挑战。

🌟<py-repl>

这将创建一个REPL组件,该组件作为代码编辑器呈现到页面并允许用户编写可执行代码。

只需在我们的py-script标签下添加它;

<py-script>
        print("Interactive Shell;")
</py-script>

<py-repl> </py-repl>

然后在我们加载服务器后的交互式 shell 中,将其添加到 REPL 中并执行或点击Shift + Enter。

import math
math.sqrt(4)

输出;

image.png

访问此存储库以获取此介绍的完整代码🚀。

🌟 下载 zip (克隆)

如果要在使用 Node.js 编译后使用离线版本,请确保将提取的文件移动到主 HTML 文件的根目录。

目前没有关于这方面的适当文档,但您可以通过观看 repo 保持发布或保持更新此处。

🌟 PyScript 是一种编程语言吗?

对我来说,它是一个 JavaScript-Python 框架,它允许用户使用 Python 和标准 HTML 的组合在浏览器中创建应用程序。

image.png

该项目由Anaconda团队开发,最终目标是让更广泛的受众(例如前端开发人员)受益于 Python 及其各种库(统计、ML/DL 等)的强大功能。 .

根据 GitHub 指标,目前的 repo在撰写本文时是 32.5% HTML、31% Javascript、19.3% Typescript & 只有 15.5% Python,因为我们都知道 Python 最初不是为 Web 设计的。

🌟 它会破坏 Javascript 吗?

我知道你仍然想知道这个新的漂亮的 Python-Javascript 框架是否会取代 Javascript。我认为不,Javascript 是一种成熟的编程语言,它比实际上位于其之上的单纯框架更稳定且性能更高。

现在可能还没有,因为它仍处于 Alpha 阶段,只能与 Django 和 Flask 竞争,因为您不再需要Jinja模板。

image.png

也许 Django 开发人员会发现这种方式更容易,尤其是当它随着时间的推移得到显着增强和改进时,我个人已经等不及了。

数据科学家已经接受了这个工具,那些希望分享他们研究结果的人现在可以更轻松地做到这一点。也许我们可以看到一些前端开发的新领域即将出现。

🌟 注意 🌟

这是一个非常实验性的项目,所以预计会出现问题,并且在使用 CDN 版本时,加载运行时可能需要相当长的时间!

目前仅在 Chrome 上进行了测试,可能无法完全支持其他浏览器。

PyScript 的 alpha 版本可以在 PyScript网站上找到。代码在此处可用。有关更多示例,请访问这个文件夹。

🌟 总结

它确实很有希望,但它可能会引发很多新的其他安全问题,我相信当我们获得第一个稳定版本时会逐渐解决这些问题。

image.png

您当前可以使用的库有限制,请访问Pyodide 支持的模块了解更多信息。

我个人也很想知道它将把我们引向何方,我相信它的未来是如此光明,在写这篇文章时,它的未来已经超过了10k + Stargazers,而且还不到几个月。

几周前我分叉了这个项目,我会亲自开始为它做出贡献,因为我很高兴看到它的未来和实用性变为现实。

🌟 笔记和资源

📌 PyScript:浏览器中的 Python -Anaconda 文章

📌 PyScript官网

📌 PyScript官方回购

📌Pyodide

🌟 结论

再一次,希望你今天从我的小衣橱里学到了一些东西。

请考虑订阅或关注我的相关内容,尤其是关于技术、Python 和通用编程的内容。

你可以通过给我买杯咖啡来支持这个免费内容来表达额外的爱,我也对合作伙伴、技术写作角色、协作和 Python 相关的培训或角色持开放态度。

买罗尼咖啡 📢 你也可以关注我Twitter:♥♥等你! 🙂

Logo
Python

Python社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

求助！为什么用InsCode部署会出现无限重定向？

avatar Python

如何重塑熊猫。系列

问题:如何重塑熊猫。系列 在我看来,它就像 pandas.Series 中的一个错误。 a = pd.Series([1,2,3,4]) b = a.reshape(2,2) b b 有类型 Series 但无法显示,最后一条语句给出异常,非常冗长,最后一行是“TypeError: %d format: a number is required, not numpy.ndarray”。 b.sha

avatar Python

在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制]

问题:在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制] 我刚刚在这里](https://keras.io/initializers/)中阅读了有关[中的 Keras 权重初始化器的信息。在文档中,只介绍了不同的初始化程序。如: model.add(Dense(64, kernel_initializer='random_normal')) 当我没有指定kernel_initia

avatar Python