探索一下PyScript的妙用

浏览器中的Python：启用插入式内容、外部文件托管和应用程序托管，而不依赖服务器端配置
Python生态系统：运行许多流行的Python包和科学栈(如numpy、pandas、scikit-learn等)
Python与JavaScript：Python与JavaScript对象和名称空间之间的双向通信
环境管理：允许用户定义要包含哪些包和文件以使页面代码运行
可视化应用程序开发：使用现成的UI组件，如按钮、容器、文本框等
灵活的框架：一种灵活的框架，可以利用它直接在Python中创建和共享新的可插入和可扩展组件

功能示例

来看看一些例子吧

直接下载压缩包pyscript-main

刚看了一下压缩包，要用npm构建一下，在example文件夹中会找到js和css文件，导入即可。

> npm install
> npm run build

或者使用CDN的方式使用PyScript

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

py-script：一般是使用<py-script>标签来写Python代码

<html><py-script> print('Now you can!') </py-script>
</html>

使用write方法：我们使用一个标记将一行或多行按顺序打印到页面上。在中，您可以访问pyscript模块，该模块提供了一个.write()方法来将字符串发送到页面上已标记的元素中。

  <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 dtpyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))def compute_pi(n):pi = 2for i in range(1,n):pi *= 4 * i ** 2 / (4 * i ** 2 - 1)return pipi = compute_pi(100000)pyscript.write('pi', f'π is approximately {pi:.3f}')</py-script></body>

py-env：还有第二个内置标签py-env，是通过引用.whl文件来使用第三方库的相关方法

<py-env>
- './static/wheels/travertino-0.1.3-py3-none-any.whl'
</py-env>

 <py-env>- numpy- matplotlib</py-env><py-script output="plot">import matplotlib.pyplot as pltimport numpy as npx = np.random.randn(1000)y = np.random.randn(1000)fig, ax = plt.subplots()ax.scatter(x, y)fig</py-script>

当然对于这种高内聚的行为，不太符合现在模块分离的原则，因此，可以想到使用Python和HTML分离的方法

# data.py
import numpy as npdef make_x_and_y(n):x = np.random.randn(n)y = np.random.randn(n)return x, y

    <py-env>- numpy- matplotlib- paths:- ./data.py</py-env><py-script output="plot">import matplotlib.pyplot as pltfrom data import make_x_and_yx, y = make_x_and_y(n=1000)fig, ax = plt.subplots()ax.scatter(x, y)fig</py-script>

py-config：使用标记以YAML格式设置和配置关于PyScript应用程序的通用元数据。

<py-config>autoclose_loader: falseruntimes:- src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"name: pyodide-0.20lang: python
</py-config>

从pyscripy.js文件中可以看到

customElements.define('py-script', PyScript);
customElements.define('py-repl', PyRepl);
customElements.define('py-env', PyEnv);
customElements.define('py-box', PyBox);
customElements.define('py-button', PyButton);
customElements.define('py-title', PyTitle);
customElements.define('py-inputbox', PyInputBox);
customElements.define('py-register-widget', PyWidget);
customElements.define('py-loader', PyLoader);
customElements.define('py-config', PyConfig);

看了一下相关文档，目前暂时只有这几个元素了，而且试了一下建立HTTPS和HTTP的功能貌似不太支持，可能是由于在动态获取包的时候因为网速的原因难以下载吧，希望能在后期优化下载第三方库的hub，提高可拓展性。

当然，也可以直接先下载whl然后我们加载进去即可，但是这种貌似失去了某些便捷性。

突然想起Python课老师的话，“Python除了不能生孩子，其他都可以做”，期待越来越好！

探索一下PyScript的妙用相关推荐

Android 资源保护问题——探索
apk文件使用解压工具就能看到drawable等资源,但是有些游戏中的图片资源却是无法看到的. 这个问题探索了许久-- [1]图片资源不放置在drawable文件下,放在assets中(但是解压apk ...
教师课堂教学必备的100个妙招，总有一个适合你！
教师课堂教学必备的100个妙招,总有一个适合你! 转自:郝任工作室 4天前 1 微笑中,拉近师生的心教师的微笑有着无穷的魅力.教师的微笑能调节课堂情绪,增进师生情谊,激发学生的学习的热情,增强其自信 ...
谷歌新App观妙中国发布：AR传承文化艺术，小米vivo应用宝可体验
李根发自凹非寺量子位报道 | 公众号 QbitAI 观妙中国,谷歌最新官宣的App. 现在在小米.腾讯应用宝和vivo等App商店,就能下载使用. 其中集成了谷歌AI.AR技术,更凝聚了传承 ...
网易云信+妙克：从零到标杆的在线音视频音乐教学之路
音乐教育作为兴趣教育的一大门类,在近两年的教育发展中,尤其引人注目.中国产业调研网数据显示,到2020年,中国少儿钢琴培训的市场规模有望达到1000亿.与此同时,移动互联网不断催生出新的音乐教育模式, ...
线性Attention的探索：Attention必须有个Softmax吗？
©PaperWeekly 原创 · 作者|苏剑林单位|追一科技研究方向|NLP.神经网络众所周知,尽管基于 Attention 机制的 Transformer 类模型有着良好的并行性能,但它的空 ...
tableau地图城市数据_优阅达“优分享” | Tableau 2020.4 “地图标记层” 的多种妙用...
前不久,Tableau 2020.4 发布了!众多新功能特性让数据粉激动不已. 其中,空间分析"地图标记层"功能,被称为 Tableau 开发团队史上最大胆的设计之一.它与 Ado ...
穿越时空，跟我一起探索云栖数字谷（2021云栖大会免费送票）
简介:提前报名锁定云栖大会门票 4 天 96 小时数智沉浸极致体验 10 大技术板块.21 大行业 100+ 场数字新思想论坛 450+ 最热科技新品 1000+ 数字生活新物种 40000 平米 ...
三消也玩策略？这款游戏没那么简单——《妙连千军》
在笔者的印象中,最开始接触三消类作品(Match 3)还是在早期的8bit机上,那是红遍一时的<马里奥医生>.玩家通过堆积色泽相同的胶囊,以此做到消灭瓶子中对应色泽的病菌.这种好似< ...
【转】React 16 中从 setState 返回 null 的妙用
概述在 React 16 中为了防止不必要的 DOM 更新,允许你决定是否让 .setState 更来新状态.在调用 .setState 时返回 null 将不再触发更新. 我们将通过重构一个 mo ...

探索一下PyScript的妙用

目录

基础介绍

功能示例

探索一下PyScript的妙用相关推荐

最新文章

热门文章