跳到主要内容

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

· 阅读需 6 分钟
Feodor Fitsner
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 应用：

待办事项

图标浏览器

计算器

纸牌

Trolli

查看指南 了解更多关于将 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.src，Audio.src，Page.fonts，Container.image_src）现在也可以从本地文件加载资源，方法是提供文件系统中的完整路径，以及通过提供相对路径从 assets 目录中加载资源。对于桌面应用程序，src 属性中的路径可以是以下之一：
    • 相对于 assets 目录的路径，带或不带开始的斜杠，例如：/image.png 或 image.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-core 和 flet。
  • 用 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） - 继续加油！