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

2023年2月6日 · 阅读需 6 分钟

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 应用：

To-Do

Icons browser

Calc

Solitaire

Trolli

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

Python中的内置Fletd服务器

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

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

运行Flet应用只需要2个系统进程：Python解释器和Flutter客户端。
通信开销更小（去掉了Python和Fletd之间的两次网络跳转），延迟更低（Windows上使用TCP，macOS/Linux上使用Unix域套接字）。
默认情况下，在Windows上，Shim绑定到127.0.0.1，这更安全。
由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("Page error:", e.data)以查看加载失败的图像。
flet Python包已分为两个包：flet-core和flet。
用Poetry替换了PDM。
所有地方都移除了beartype。

💥 破坏性变更

默认路由方案从“hash”改为“path”（在应用程序URL末尾没有/#/）。使用ft.app(main, route_url_strategy="hash")以获得原始行为。
独立桌面Flet应用程序不再支持OAuth身份验证。

异步支持

Flet应用程序现在可以编写为异步应用程序，并且可以使用asyncio和其他Python异步库。在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） - 继续加油！

快速示例：使用Pyodide创建Flet应用​