PyScript 強(qiáng)勢(shì)來襲,HTML 也可以跑 Python 了

Anaconda CEO Peter Wang 在上個(gè)月剛過的 PyCon 2022 發(fā)布了 PyScript,實(shí)現(xiàn)了在 HTML 中支持 Python 代碼。簡(jiǎn)單來說,我們現(xiàn)在可以在 HTML 代碼中加入 Python 代碼,直接在瀏覽器中運(yùn)行,這整個(gè)過程甚至不需要安裝任何環(huán)境,還可以在 PyScript 添加相應(yīng)的依賴,運(yùn)行各種數(shù)據(jù)分析算法和圖效。
如何在 HTML 中運(yùn)行 PyScript?
目前,PyScript 依托于 CSS、JavaScript 代碼。和引用其他 CSS、JavaScript 文件一樣,要在 HTML 中運(yùn)行 PyScript 需要導(dǎo)入相應(yīng)的支持文件。需要在 HTML 中使用 Python 的話,首先要在 <head>
部分敲入以下代碼:
這個(gè)代碼會(huì)直接關(guān)聯(lián)到 PyScript 官網(wǎng)相應(yīng)的代碼庫(kù),當(dāng)然你也可以直接下載源代碼,然后同樣以 .css
和 .js
文件的形式導(dǎo)入 HTML 項(xiàng)目中。
為了貫徹在瀏覽器中試用 PyScript,這里直接使用了在線 IDE Lightly 作為編輯器。只需要注冊(cè)登入就可以直接在瀏覽器中開始寫代碼了,可以說是非常貼合主題了:https://a3104df89c-share.lightly.teamcode.com
剛開始使用肯定要先來個(gè)經(jīng)典的 “Hello World” 過把癮,加上 <head>
標(biāo)簽就簡(jiǎn)單十幾行代碼,注意寫入 Python 代碼前后需要帶 <py-script>
標(biāo)簽:

直接點(diǎn)擊右上角小眼睛運(yùn)行查看,等待 PyScript 加載一下后就會(huì)打印出 Hello World,感動(dòng)!

但這既然是 Python 的話,肯定就不能只運(yùn)行 Hello World 如此大材小用吧?先試一下沒有引用庫(kù)的運(yùn)算效果:

使用 input 手動(dòng)輸入數(shù)字的話會(huì)出現(xiàn)彈框:

pyscript.write
還會(huì)自帶文本格式效果:

在 PyScript 中引用庫(kù)
完全使用 Python 肯定還需要支持導(dǎo)入第三方庫(kù),現(xiàn)在的 PyScript 也可以做到了。除了在代碼里使用 import 導(dǎo)入外,還需要在 <head>
部分做一些先行準(zhǔn)備,使用 <py-env> 標(biāo)簽安裝依賴:
之后就可以在代碼中隨意使用 numpy 和 matplotlib 了:

使用依賴的加載時(shí)間會(huì)長(zhǎng)一些,最終效果如圖:

查看上圖源代碼:https://a3104df89c-share.lightly.teamcode.com
目前 PyScript 官方還沒有推出正式的支持文檔,有興趣多嘗試的小伙伴可查看 PyScript 的 Github 說明:https://github.com/pyscript/pyscript/blob/main/GETTING-STARTED.md
也歡迎查看之前的文章:
WebApp 在線編程成趨勢(shì):如何在 iPad、Matepad 上編程?
Python 教程:從 Python 爬蟲到數(shù)據(jù)分析
學(xué)習(xí) Python 爬蟲,手把手通過 Python 入門爬取網(wǎng)頁信息