python网页聊天代码网页 python

转载

笑傲江湖求败 2023-06-29 23:02:39

文章标签 python网页聊天代码 python 开发语言 html .net 文章分类 Python 后端开发

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言。
一、PyScript 是什么？
二、使用步骤

1.CDN
2.第一个 PyScript 应用
3. 使用第三方包

总结

前言。

早上刚看到资讯，说可以在网页上跑 python 程序了。那我就来试试水，跑个例子。

一、PyScript 是什么？

python网页聊天代码网页 python_python

PyScript 是一个框架，允许用户使用 HTML 的界面在浏览器中创建丰富的 Python 应用程序。 PyScript 旨在为用户提供一流的编程语言，该语言具有一致的样式规则、更具表现力且更易于学习。

二、使用步骤

1.CDN

因为只是试水，这里我使用CDN来安装 PyScript。

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

在html文件中引入CDN。

2.第一个 PyScript 应用

可以使用vscode + Live Server extension 来运行。

<!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" />
    <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>

python网页聊天代码网页 python_python网页聊天代码_02

3. 使用第三方包

千万不要格式化代码。

<!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" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <!-- 引入第三方包 -->
    <py-env>
        - numpy
        - matplotlib
    </py-env>

    <title>First PyScript Application</title>
    <style>
        py-script {
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Sin(x)</th>
            <th>Cos(x)</th>
        </tr>
        <tr>
            <td>
                <div id="Sin"></div>
            </td>
            <td>
                <div id="Cos"></div>
            </td>
        </tr>
    </table>
    <py-script output="Sin">
import matplotlib.pyplot as plt
import numpy as np

x = np.arange(-np.pi, np.pi,np.pi/180)
y = np.sin(x)

fig, ax = plt.subplots()
ax.plot(x, y)
fig
    </py-script>
    <py-script output="Cos">
import matplotlib.pyplot as plt
import numpy as np

x = np.arange(-np.pi, np.pi,np.pi/180)
y = np.cos(x)

fig, ax = plt.subplots()
ax.plot(x, y)
fig
    </py-script>

</body>

</html>

python网页聊天代码网页 python_.net_03