跳到主要内容

使用 Pyodide 构建独立的 Flet Web 应用

· 阅读需 6 分钟
Feodor Fitsner
Flet 创始人和开发者

我们刚刚发布了Flet 0.4.0,它具有一个超级令人兴奋的新功能 - 将 Flet 应用打包成独立的静态网站,可以完全在浏览器中运行!该应用可以发布到任何免费的静态网站托管,如 GitHub Pages 或 Cloudflare Pages。这要归功于 Pyodide - 一个 WebAssembly 的 Python 移植版!

您可以快速构建完全用 Python 编写的精彩单页应用(SPA),并将其托管在任何地方!无需 HTML、CSS 或 JavaScript!

快速示例:使用Pyodide创建Flet应用

安装最新的 Flet 包:

pip install flet --upgrade

创建一个简单的 counter.py 应用:

counter.py
import flet as ft

def main(page: ft.Page):
page.title = "Flet 计数器示例"
page.vertical_alignment = ft.MainAxisAlignment.CENTER

txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

def minus_click(e):
txt_number.value = str(int(txt_number.value) - 1)
page.update()

def plus_click(e):
txt_number.value = str(int(txt_number.value) + 1)
page.update()

page.add(
ft.Row(
[
ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
txt_number,
ft.IconButton(ft.icons.ADD, on_click=plus_click),
],
alignment=ft.MainAxisAlignment.CENTER,
)
)

ft.app(main)

运行全新的 flet publish 命令,将 Flet 应用发布为静态网站:

flet publish counter.py

网站将发布到与 counter.py 同级的 dist 目录中。 使用内置的Python Web服务器进行测试:

python -m http.server --directory dist

打开浏览器中的 http://localhost:8000 以检查已发布的应用。

以下是一些托管在 Cloudflare Pages 上的实时 Flet 应用:

查看指南 了解更多关于将 Flet 应用发布为独立网站的信息。

Python 中的内置 Fletd 服务器

Flet 0.4.0 还实现了新的 Flet 桌面架构

它用一个轻量级的Python代码替换了Go编写的Fletd服务器,带来了如下优点:

  1. 运行 Flet 应用只需要两个系统进程:Python 解释器和 Flutter 客户端。
  2. 更少的通信开销(减少了 Python 和 Fletd 之间的两次网络跳跃)和更低的延迟(桩代码在 Windows 上使用 TCP,在 macOS/Linux 上使用 Unix 域套接字)。
  3. 默认情况下,桩代码绑定到 Windows 上的 127.0.0.1,更加安全。
  4. 使用 flet pack 生成的独立应用程序包的大小减少了约 8 MB。

该实现还支持 Pyodide(我们不能在浏览器中运行 Go Web 服务器,对吧?),为 iOS 和 Android 支持铺平了道路。

其他更改

  • 所有从 Web URL 加载资源的控件(Image.srcAudio.srcPage.fontsContainer.image_src)现在也可以从本地文件加载资源,方法是提供文件系统中的完整路径,以及通过提供相对路径从 assets 目录中加载资源。对于桌面应用程序,src 属性中的路径可以是以下之一:
    • 相对于 assets 目录的路径,带或不带开始的斜杠,例如:/image.pngimage.png。不应包含工件目录的名称。
    • 计算机文件系统中的绝对路径,例如 C:\projects\app\assets\image.png/Users/john/images/picture.png
    • 完整的 URL,例如 https://mysite.com/images/pic.png
    • 添加 page.on_error = lambda e: print("页面错误:", e.data) 以查看失败的图像。
  • flet Python 包分为两个包:flet-coreflet
  • 用 Poetry 替换 PDM。
  • beartype 已全面移除。

💥 重大更改

  • 默认路由方案从“hash”更改为“path”(应用 URL 末尾没有 /#/)。使用 ft.app(main, route_url_strategy="hash") 可获得原始行为。
  • 独立桌面 Flet 应用中不再支持 OAuth 认证。

异步支持

Flet 应用现在可以编写为异步应用,并与其他 Python 异步库一起使用 asyncio。在 Flet 中自然支持调用协程,因此无需包装它们以同步运行。

要开始使用异步 Flet 应用,您应该使 main() 方法成为 async

import flet as ft

async def main(page: ft.Page):
await page.add_async(ft.Text("Hello, async world!"))

ft.app(main)

阅读指南 了解更多关于编写异步 Flet 应用的信息。

结论

Flet 0.4.0 带来了以下令人兴奋的功能:

  • 使用 Pyodide 构建在浏览器中运行的独立 Web 应用并托管在廉价的托管上。
  • 具有内置 Fletd 服务器的更快和更安全的架构。
  • 异步应用支持。

将 Flet 模块升级到最新版本(pip install flet --upgrade),尝试 flet publish 命令并告诉我们 您的想法!

顺便说一句,Flet 项目 已经达到了 ⭐️ 4.2K 星 ⭐️(仅一个月增加了 1K) - 继续加油!