当前位置： 首页 > news >正文

＜学习笔记＞从零开始自学Python-之-实用库篇(一)-pyscript

news 2025/11/13 12:04:22

由Anaconda创建的PyScript是一项实验性的但很有前途的新技术，它使python运转时在支撑WebAssembly的浏览器中作为一种脚本言语运用。

每个现代常用的浏览器现在都支撑WebAssembly，这是许多言语（如C、C++和Rust）能够编译的高速运转时规范。Python的参考实现是用C言语编写的，一个早期项目Pyodide供给了Python运转时的WebAssembly移植。

不过，PyScript的方针是供给一个完好的浏览器环境，将Python作为一种网络脚本言语运转。它建立在Pyodide之上，但增加或加强了一些功用，如从规范库中导入模块、运用第三方导入、装备与文档目标模型（DOM）的双向交互，以及做许多其他在Python和JavaScript国际中有用的事情。

现在，PyScript仍然是一个原型和实验性项目。Anaconda 并不推荐在生产中运用它。但猎奇的用户能够在PyScript网站上测验一些比方，并运用可用的组件在浏览器中构建实验性的Python+JavaScript应用程序。

1、HelloWorld

PyScript的中心是一个单一的JavaScript include，你能够将其增加到网页中。

下面是一个PyScript版本的 “hello, world “：

<!DOCTYPE html>
<html><head><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/unstable/pyscript.js"></script></head><body>
<py-script output="out">
print("Hello world")
</py-script>
<div id="out"></div></body>
</html>

head 文档中的script 标签加载了PyScript的中心功能。pyscript.css 样式表是可选的，但很有用。

Python代码被包含在自定义的py-script 标签中。请留意，代码应该按照Python的缩进常规进行格式化，否则将无法正常运转。假如你运用的编辑器能主动重新格式化HTML，请留意这一点；它可能会弄乱py-script 块的内容，使其无法运转。

一旦PyScript组件加载完毕，任何Python代码都会被评估。假如标签中的脚本写到stdout (如print) 语句中，你能够通过供给一个output 属性来指示在页面的什么地方显示输出。

在这个示例中，脚本的stdout 被引导到ID为"out" 的div 。

假如你把它保存到一个文件中，并在网络浏览器中打开它，你会首先看到一个 “加载 “指示器和一个暂停，由于浏览器获得了PyScript的运转时刻并将其设置好。该运转时在未来的加载中应坚持缓存，但仍需要一些时刻来激活。之后，Hello world 应该出现在页面上。

2、规范库导入

Python 的规范库在 PyScript 中可用，就像你在常规 Python 中运用它一样：只需import 导入就可以正常调用。

下面是一个调用datetime库显示时间的示例：

import datetime
print ("Current date and time:",    datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))

3、调用来自PyPI的库

除了标准库，python还有大量的第三方库，假如咱们想从PyPI中安装一个包并运用它呢？

PyScript 有另一个标签，py-env ，它指定了需要安装的第三方软件包。

下面的示例是调用一个第三方库humanize库，用这个库来替换原始脚本中的py-script 块：

<py-env>
- humanize
</py-env>
<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>

py-env 块中列出要增加的软件包，就像在 Python 项目的requirements.txt 文件中列出它们一样。然后咱们能够像对待其他 Python 软件包一样导入和运用它们。

留意，并不是一切来自PyPI的包都能顺利安装和运行。例如，requests 需要拜访尚不支撑的网络组件。(这个问题的一个可能的解决方法是运用pyodide.http.pyfetch ，它被原生支撑)。可是纯 Python 包，如humanize ，应该运转正常。Anaconda 供给的比方中运用的包，如numpy,pandas,bokeh, 或matplotlib ，也能够正常运行。

4、本地导入

对于另一种常见的情况，假定你想从与你的网页在同一目录树下的其它 Python 脚本中导入。运用导入能够更容易地将更多的 Python 逻辑从网页自身移出，在那里它和你的模板文件混在一起，可能会变得难以处理。

一般来说，Python 。PyScript 不能以这种方法作业，所以你需要指定哪些文件能够作为可导入模块。

比方说，你有一个名为index.html 的网页，在你的 web 服务器的某个目录下，你想在它旁边放置一个名为main.py 的 Python 文件。这样，你的页内脚本就能够import main ，而你能够把大部分的 Python 逻辑限制在实践的.py 文件中。

在你的py-env 块中指定你想导入的 Python 文件。

- paths:`` - ./main.py

这将允许main.py ，在与网页自身相同的 web 服务器目录下，能够与import main 一同导入。

要记住一件重要的事情。你不能对你在浏览器中本地启动的网页进行这样的导入。这是由于WebAssembly运转时和浏览器自身对文件体系拜访的限制造成的。相反，你需要在网络服务器上托管这些网页，以供给网页和.py 文件。

5、REPL 标签

Python用户应该了解Jupyter Notebook，它是Python的浏览器内实时编码环境，一般用于数学和统计学。PyScript为这样的环境供给了一个原始的构建模块，即py-repl 标签。

py-repl 在网页上生成一个输入字段，其功用就像一个十分基本的Jupyter笔记本环境。

下面的示例相当于一个自己手搓的jupyter：

<!DOCTYPE html>
<html lang="en"><head><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/alpha/pyscript.js"></script></head><body><h1><b>pyscript REPL</b></h1>Tip: 按下 Shift-ENTER 运行一个单元<br><div><py-repl id="my-repl" auto-generate="true"> </py-repl></div></body>
</html>

效果如下：
PyScript的相似Jupyter的REPL组件能够让你在页面中交互式地运转Python，尽管它还不是很灵活或可装备。

6、与 JavaScript 事件监听器互动

由于 PyScript 是根据pyodide 的，所以它运用pyodide 的机制来与 DOM 交互。例如，假如咱们想获得一个网页上的输入框的值并在咱们的Python代码中运用它，咱们会这样做。

<!DOCTYPE html>
<html><head><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /><script defer src="https://pyscript.net/unstable/pyscript.js"></script></head><body><input id="txt">
<py-script>
from js import document, console
from pyodide import create_proxy
def _eventlog(e):console.log(f"Input value: {e.target.value}")
eventlog = create_proxy(_eventlog)
document.getElementById("txt").addEventListener("input", eventlog)
</py-script></body>
</html>

js 库为许多常见的 JavaScript 实体供给了一个 Python 接口，比方document 和console 目标。它们在PyScript中的行为与在JavaScript中的行为简直完全相同。pyodide 中的create_proxy 函数能够让咱们取一个 Python 函数目标并为它生成一个 JavaScript 接口，因而它能够被用作input 框的事情监听器。input 框中的任何按键都会被记录到控制台，但它们也能够在Python端被处理。

相关文章：

＜学习笔记＞从零开始自学Python-之-实用库篇(一)-pyscript

由Anaconda创建的PyScript是一项实验性的但很有前途的新技术&#xff0c;它使python运转时在支撑WebAssembly的浏览器中作为一种脚本言语运用。 每个现代常用的浏览器现在都支撑WebAssembly&#xff0c;这是许多言语&#xff08;如C、C和Rust&#xff09;能够编译的高速运转时…...

编程日记 2024/5/27 6:04:39

Vue项目中npm run build 卡住不执行的几种情况(实战版)

方法一 一&#xff1a;比较常见是镜像导致的原因 我们可以找到build/check-versions文件 将这段代码注释,重新运行就可以解决这个问题 if (shell.which(npm)) {versionRequirements.push({name: npm,currentVersion: exec(npm --version),versionRequirement: packageConfig.en…...

编程日记 2024/5/27 6:03:38

《Python源码剖析》之pyc文件

前言 前面我们主要围绕pyObject和pyTypeObject聊完了python的内建对象部分&#xff0c;现在我们将开启新的篇章—python虚拟机&#xff0c;将聚焦在python的执行部分&#xff0c;搞懂从“代码”到“执行”的过程。开启新的篇章之前&#xff0c;你也许会有一个疑惑&#xff1a;我…...

编程日记 2024/5/27 6:02:36

Python零基础-中【详细】

接上篇继续&#xff1a; Python零基础-上【详细】-CSDN博客 目录 十、函数式编程 1、匿名函数lambda表达式 &#xff08;1&#xff09;匿名函数理解 &#xff08;2&#xff09;lambda表达式的基本格式 &#xff08;3&#xff09;lambda表达式的使用场景 &#xff08;4&…...

编程日记 2024/5/27 6:01:35

回溯 leetcode

22. 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())"…...

编程日记 2024/5/27 6:00:33

Android firebase消息推送集成 FCM消息处理

FirebaseMessagingService 是 Firebase Cloud Messaging (FCM) 提供的一个服务&#xff0c;用于处理来自 Firebase 服务器的消息。它有几个关键的方法&#xff0c;你提到的 onMessageReceived、doRemoteMessage 和 handleIntent 各有不同的用途。下面逐一解释这些方法的作用和用…...

编程日记 2024/5/27 5:59:32

react中怎么为props设置默认值

在React中&#xff0c;你可以使用ES6的类属性&#xff08;class properties&#xff09;或者函数组件中的默认参数&#xff08;default parameters&#xff09;来定义props的默认值。 1.类组件中定义默认props 对于类组件&#xff0c;你可以在组件内部使用defaultProps属性来…...

编程日记 2024/5/27 5:58:31

企业如何做好 SQL 质量管理？

研发人员写 SQL 操作数据库想必一定是一类基础且常见的工作内容。如何避免 “问题” SQL 流转到生产环境&#xff0c;保证数据质量&#xff1f;这值得被研发/DBA/运维所重视。 什么是 SQL 问题&#xff1f; 对于研发人员来说&#xff0c;在日常工作中&#xff0c;大部分都需要…...

编程日记 2024/5/27 5:57:30

半年不在csdn写博客，总结一下这半年的学习经历,coderfun的一些碎碎念.

前言 自从自己建站一来&#xff0c;就不在csdn写博客了&#xff0c;但是后来自己的网站因为资金问题不能继续维护下去&#xff0c;所以便放弃了自建博客网站来写博客&#xff0c;等到以后找到稳定&#xff0c;打算满意的工作再来做自己的博客网站。此篇博客用来记录自己在csdn…...

编程日记 2024/5/27 5:56:29

c++中的命名空间与缺省参数

一、命名空间 1、概念&#xff1a;在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存 在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c; 以避免命名冲突或…...

编程日记 2024/5/27 5:55:27

SpringBoot整合WebSocket实现聊天室

1.简单的实现了聊天室功能&#xff0c;注意页面刷新后聊天记录不会保存&#xff0c;后端没有做消息的持久化 2.后端用户的识别只简单使用Session用户的身份 0.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-…...

编程日记 2024/5/27 5:54:25

llama-factory学习个人记录

框架、模型、数据集准备 1.llama-factory部署 # 克隆仓库 git clone https://github.com/hiyouga/LLaMA-Factory.git # 创建虚拟环境 conda create --name llama_factory python3.10 # 激活虚拟环境 conda activate llama_factory # 安装依赖 cd LLaMA-Factory pip install -…...

编程日记 2024/5/27 5:53:24

VLC播放器（全称VideoLAN Client）

一、简介 VLC播放器&#xff08;全称VideoLAN Client&#xff09;是一款开源的多媒体播放器&#xff0c;由VideoLAN项目团队开发。它支持多种音视频格式&#xff0c;并能够在多种操作系统上运行&#xff0c;如Windows、Mac OS X、Linux、Android和iOS等。VLC播放器具备播放文件…...

编程日记 2024/5/27 5:52:23

跟小伙伴们说一下

因为很忙&#xff0c;有一段时间没有更新了&#xff0c;这次先把菜鸟教程停更一下&#xff0c;因为自己要查缺补漏一些细节问题&#xff0c;而且为了方便大家0基础也想学C语言&#xff0c;这里打算给大家开一个免费专栏&#xff0c;这里大家就可以好好学习啦&#xff0c;哪怕0基…...

编程日记 2024/5/27 5:51:22

学 C/C++ 具体能干什么？

学习 C 和 C 后&#xff0c;你可以从事许多不同的工作和项目&#xff0c;这两种语言以其高性能和低级控制而闻名&#xff0c;特别适合以下几个领域&#xff1a; 1. 系统编程 C 和 C 是系统编程的首选语言&#xff0c;适用于操作系统、驱动程序和嵌入式系统开发。 操作系统开发…...

编程日记 2024/5/27 5:49:20

Django之Ajax实战笔记--城市级联操作

1. 项目架构搭建 1.1 创建项目tpdemo,创建应用myapp # 创建项目框架tpdemo$ django-admin startproject tpdemo$ cd tpdemo# 在项目中创建一个myapp应用$ python manage.py startapp myapp# 创建模板目录$ mkdir templates$ mkdir templates/myapp$ cd ..$ tree tpdemotpdemo…...

编程日记 2024/5/27 5:48:19

基于Netty实现WebSocket服务端

本文基于Netty实现WebSocket服务端&#xff0c;实现和客户端的交互通信&#xff0c;客户端基于JavaScript实现。 在【WebSocket简介-CSDN博客】中&#xff0c;我们知道WebSocket是基于Http协议的升级&#xff0c;而Netty提供了Http和WebSocket Frame的编解码器和Handler&#…...

编程日记 2024/5/27 5:47:18

27【Aseprite 作图】盆栽——拆解

1 橘子画法拆解 （1）浅色3 1 0；深色0 2 3 就可以构成一个橘子 （2）浅色 2 1；深色1 0 （小个橘子） （3）浅色 2 1 0；深色1 2 3 2 树根部分 （1）底部画一条横线 （2）上一行 左空2 右空1 【代表底部重心先在右】 （3）再上一行，左空1，右空1 （4）再上一行，左突出1，…...

编程日记 2024/5/27 5:46:17

【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目

项目介绍 【开源】项目基于pythonpandasflaskmysql等技术实现豆瓣电影数据获取及可视化分析展示&#xff0c;觉得有用的朋友可以来个一键三连&#xff0c;感谢&#xff01;&#xff01;&#xff01; 项目演示 【开源】2024最新python豆瓣电影数据爬虫可视化分析项目 项目截图…...

编程日记 2024/5/27 5:45:15

[JDK工具-5] jinfo jvm配置信息工具

文章目录 1. 介绍2. 打印所有的jvm标志信息 jinfo -flags pid3. 打印指定的jvm参数信息 jinfo -flag InitialHeapSize pid4. 启用或者禁用指定的jvm参数 jinfo -flags [|-]HeapDumpOnOutOfMemoryError pid5. 打印系统参数信息 jinfo -sysprops pid6. 打印以上所有配置信息 jinf…...

编程日记 2024/5/27 5:44:14

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/11/7 19:36:53

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/11/7 20:04:23

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/10/27 2:28:51

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/10/22 15:29:45

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/11/13 6:07:39

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07