Anaconda CEO Peter Wang 在上個月剛過的 PyCon 2022 發布了 PyScript,實現了在 HTML 中支持 Python 代碼。簡單來說,我們現在可以在 HTML 代碼中加入 Python 代碼,直接在浏覽器中運行,這整個過程甚至不需要安裝任何環境,還可以在 PyScript 添加相應的依賴,運行各種數據分析算法和圖效。
目前,PyScript 依托於 CSS、JavaScript 代碼。和引用其他 CSS、JavaScript 文件一樣,要在 HTML 中運行 PyScript 需要導入相應的支持文件。需要在 HTML 中使用 Python 的話,首先要在 <head>
部分敲入以下代碼:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
這個代碼會直接關聯到 PyScript 官網相應的代碼庫,當然你也可以直接下載源代碼,然後同樣以 .css
和 .js
文件的形式導入 HTML 項目中。
為了貫徹在浏覽器中試用 PyScript,這裡直接使用了在線 IDE Lightly 作為編輯器。只需要注冊登入就可以直接在浏覽器中開始寫代碼了,可以說是非常貼合主題了:https://a3104df89c-share.lightly.teamcode.com
如何打開並編輯他人用 Lightly 分享的項目?https://zhuanlan.zhihu.com/p/506204036
剛開始使用肯定要先來個經典的 “Hello World” 過把瘾,加上 <head>
標簽就簡單十幾行代碼,注意寫入 Python 代碼前後需要帶 <py-script>
標簽:
直接點擊右上角小眼睛運行查看,等待 PyScript 加載一下後就會打印出 Hello World,感動!
但這既然是 Python 的話,肯定就不能只運行 Hello World 如此大材小用吧?先試一下沒有引用庫的運算效果:
使用 input 手動輸入數字的話會出現彈框:
pyscript.write
還會自帶文本格式效果:
完全使用 Python 肯定還需要支持導入第三方庫,現在的 PyScript 也可以做到了。除了在代碼裡使用 import 導入外,還需要在 <head>
部分做一些先行准備,使用 <py-env> 標簽安裝依賴:
<py-env>
- numpy
- matplotlib
</py-env>
之後就可以在代碼中隨意使用 numpy 和 matplotlib 了:
使用依賴的加載時間會長一些,最終效果如圖:
查看上圖源代碼:https://a3104df89c-share.lightly.teamcode.com
目前 PyScript 官方還沒有推出正式的支持文檔,有興趣多嘗試的小伙伴可查看 PyScript 的 Github 說明:https://github.com/pyscript/pyscript/blob/main/GETTING-STARTED.md
也歡迎查看之前的文章:
WebApp 在線編程成趨勢:如何在 iPad、Matepad 上編程?
Python 教程:從 Python 爬蟲到數據分析
學習 Python 爬蟲,手把手通過 Python 入門爬取網頁信息