溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于python怎么使用PyScript

發(fā)布時(shí)間：2022-06-14 09:44:34 來源：億速云 閱讀：236 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“基于python怎么使用PyScript”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“基于python怎么使用PyScript”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

作用

PyScript 核心特性：

  • Python in the browser：啟用 drop-in content、外部文件托管（基于 Pyodide 項(xiàng)目），以及不依賴服務(wù)器端配置的應(yīng)用程序托管。

  • Python 生態(tài)：提供流行的 Python 和科學(xué)計(jì)算軟件包（例如 numpy, pandas, scikit-learn 等）。

  • Python with JavaScript：在 Python 和 JavaScript 對(duì)象和命名空間之間進(jìn)行雙向通信。

  • 環(huán)境管理：開發(fā)者可定義要引入哪些包和文件，以便頁面代碼的運(yùn)行。

  • 可視化應(yīng)用開發(fā)：開發(fā)者可使用現(xiàn)成的 UI 組件，如按鈕、容器、文本框等。

  • 靈活的框架：開發(fā)者可以利用它在 Python 中直接創(chuàng)建和分享新的可插拔和可擴(kuò)展的組件。

PyScript 目標(biāo)：

  • 提供干凈簡單的 API。

  • 支持標(biāo)準(zhǔn) HTML。

  • 擴(kuò)展 HTML 以讀取穩(wěn)定且可靠的自定義組件。

  • 提供可插拔、可擴(kuò)展的組件系統(tǒng)。

使用方法

下面，我們來體驗(yàn)一下這個(gè)新生事物吧！

我們可以使用 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>

接著，我們來看看一個(gè)簡單的頁面：

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

運(yùn)行這個(gè)程序，你就可以在瀏覽器頁面上看到這個(gè)結(jié)果了：

基于python怎么使用PyScript

這就是我們著名的 Hello 式問候！

這段前端代碼里面，我們直接使用 py-script 標(biāo)簽包裹 Python 代碼，就實(shí)現(xiàn)前端腳本控制功能了。

我這里是在 vscode 里面運(yùn)行的，運(yùn)行代碼之前需要安裝 Live Server 這個(gè)插件，然后就可以直接瀏覽器訪問了。

我們?cè)賮砜匆粋€(gè)復(fù)雜一點(diǎn)的例子：

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

這個(gè)例子中，我們使用 <py-script> 標(biāo)簽，在里面提供 .write() 方法，將字符串寫到頁面的標(biāo)簽中。

運(yùn)行這段代碼，我們會(huì)看到瀏覽器頁面的結(jié)果：

基于python怎么使用PyScript

我們還可以在頁面中引入 Python 的包，來實(shí)現(xiàn)一些簡便的操作。

<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 這兩個(gè)包，引用包是在 <head> 標(biāo)簽內(nèi)部通過 <py-env> 標(biāo)簽來實(shí)現(xiàn)。

運(yùn)行這個(gè)程序，我的頁面始終處于加載狀態(tài)：

基于python怎么使用PyScript

讀到這里，這篇“基于python怎么使用PyScript”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手