ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Flet WebView 扩展实战指南:用 flet-webview 在 Python 应用中嵌入网页内容

Flet WebView 扩展实战指南:用 flet-webview 在 Python 应用中嵌入网页内容 前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载flet-webview 是 Flet 官方推出的扩展包用于在 Flet 应用中嵌入一个功能完整的 WebView 控件让开发者仅用 Python 就能加载网页、渲染 HTML、执行 JavaScript 并与页面交互。本指南将以仓库中的 flet-webview 包说明 为骨架结合其 Python 源码、类型定义 与 官方示例完整讲解安装方式、平台支持、核心 API、事件系统与常见问题排查读完后你可以在自己的 Flet 应用中直接集成网页浏览、本地文件加载与 JavaScript 注入能力。flet-webview 是什么flet-webview 是一个 Flet 扩展extension核心是提供一个名为WebView的控件用于在 Flet 应用中显示网页内容。它的底层并不是重新造轮子而是基于 Flutter 生态中成熟的两个包构建webview_flutter负责 iOS、Android、macOS 等原生平台上的 WebView 渲染webview_flutter_web负责 Web 平台上的网页内嵌渲染。这一点可以从 Flutter 侧依赖配置文件 pubspec.yaml 中直接得到印证该包声明依赖webview_flutter: ^4.13.1、webview_flutter_android: ^4.7.0与webview_flutter_web: 0.2.34。在架构上flet-webview 遵循 Flet 扩展的标准模式Python 侧定义控件flet_webview.webview.WebView通过ft.control(WebView)装饰器将控件类型名注册为WebViewFlutter 侧则在 extension.dart 中根据control.type分发将WebView映射到对应的WebViewControl组件。Python 与 Flutter 两侧通过 Flet 的协议通道交换属性和方法调用。从包的元信息看flet-webview 当前版本为 0.1.0要求 Python 3.10仅依赖flet包本身Python 3.11 时额外需要typing-extensions详见 pyproject.toml。平台支持flet-webview 的WebView控件并不是全平台可用的在使用前必须确认目标平台平台WindowsmacOSLinuxiOSAndroidWeb支持❌✅❌✅✅✅即在iOS、Android、macOS 和 Web四个平台受支持而 Windows 与 Linux 桌面端暂不支持。从源码结构看这一限制也被写进了实现层Flutter 侧存在 webview_mobile_and_mac.dart真实实现、webview_web.dartWeb iframe 实现以及webview_windows_and_linux_vain.dart等空实现vain 版本Windows/Linux 平台只能拿到不做任何事的占位控件。需要特别留意的是Web 平台上的“WebView”本质上是通过浏览器 iframe 加载页面因此只有允许被 iframe 嵌入的 URL 才能正常工作而绝大多数原生级方法如导航、JS 注入、缓存清理在 Web 平台上均不可用具体限制见下文 API 详解。安装flet-webview 是一个独立的 PyPI 包安装方式与普通 Python 包一致官方推荐两种方式使用uv推荐会自动写入项目依赖uv add flet-webview使用pippip install flet-webview使用pip安装后需要手动将flet-webview添加到项目的requirements.txt或pyproject.toml中否则依赖不会持久化记录。安装完成后在代码中导入即可import flet as ft import flet_webview as fwv包的公开 API 全部集中在flet_webview顶层命名空间由init.py 统一导出包括WebView控件、JavaScriptMode、RequestMethod、LogLevelSeverity以及三个事件数据类。快速上手第一个 WebView 应用仓库官方示例 web_view/main.py 给出了最精简的用法——在页面中放入一个铺满全屏的SafeArea其中承载一个加载 flet.dev 的 WebView并挂上页面开始/结束加载、资源加载出错三个回调import flet as ft import flet_webview as fwv def main(page: ft.Page): page.add( ft.SafeArea( expandTrue, contentfwv.WebView( urlhttps://flet.dev, on_page_startedlambda _: print(Page started), on_page_endedlambda _: print(Page ended), on_web_resource_errorlambda e: print(WebView error:, e.data), expandTrue, ), ) ) if __name__ __main__: ft.run(main)这个例子展示了WebView的核心用法url属性指定要加载的网页地址各类on_*事件回调用于感知页面加载生命周期与普通 Flet 布局控件一样支持expand、尺寸、边距等布局属性可以自由嵌入Row、Column、Stack、Tabs等容器中。WebView 核心属性WebView继承自ft.LayoutControl除了继承通用布局能力外还提供以下专属属性定义见 webview.py属性类型说明urlOptional[str]要加载的网页 URL。支持file://指向本地文件但仅限 iOS、Android、macOS 平台且会同时加载该文件的同级资源脚本、样式表、图片等价于控件挂载后调用一次load_file在 Web 平台上只支持能被浏览器 iframe 加载的 URLprevent_linksOptional[list[str]]不应被跟随/加载/下载的 URL 前缀列表用于拦截特定外部链接bgcolorOptional[ft.ColorValue]WebView 的背景颜色prevent_links的典型使用场景是当网页内包含不希望用户跳转出去的外链比如支付跳转、广告、危险域名时将对应域名前缀加入该列表WebView 便不会加载这些地址。事件系统感知页面生命周期WebView提供了丰富的事件回调覆盖页面加载、资源错误、滚动、控制台日志与对话框请求等场景。需要说明的是不同事件在平台支持上差异很大表格中已按源码注释逐一标注事件触发时机事件数据类型支持平台on_page_started页面第一个加载流程开始时触发Event.data为str包含 URLiOS、Android、macOSon_page_ended页面所有加载流程结束时触发Event.data为str包含 URLiOS、Android、macOSon_web_resource_error页面某个资源加载出错时触发Event.data为str包含错误信息iOS、Android、macOSon_progress页面加载进度变化时触发Event.data为int为进度值iOS、Android、macOSon_url_change页面 URL 变化时触发Event.data为str为新 URLiOS、Android、macOSon_scroll页面滚动位置变化时触发WebViewScrollEventiOS、Androidon_console_messageJavaScript 控制台写入日志时触发WebViewConsoleMessageEventiOS、Android、macOSon_javascript_alert_dialog页面尝试弹出 JavaScriptalert()对话框时触发WebViewJavaScriptEventiOS、Android、macOS其中前五个事件直接使用 Flet 的通用Event机制e.data携带字符串或整数后三个事件使用包内自定义的数据类定义见 types.pyWebViewScrollEvent包含x、y两个float字段分别表示以 WebView 左边缘为原点的水平偏移和以顶边缘为原点的垂直偏移WebViewConsoleMessageEvent包含message写入控制台的消息与severity_level日志严重级别两个字段WebViewJavaScriptEvent包含message对话框中要显示的文本与url发起对话框请求的页面 URL两个字段。这三个数据类均继承自ft.Event因此使用上与普通事件处理器完全一致。日志的严重级别由枚举LogLevelSeverity定义ERROR对应console.error、WARNINGconsole.warning、DEBUGconsole.debug、INFOconsole.info、LOGconsole.log。方法 API导航、加载、JavaScript 与更多WebView提供了一系列async方法用于在运行时控制 WebView 行为。绝大多数方法仅支持 iOS、Android、macOS 三个原生平台源码中通过_check_mobile_or_mac_platform()强制校验若页面处于 Web 环境或平台不属于 Android/iOS/macOS会抛出FletUnsupportedPlatformException。导航与历史方法说明reload()重新加载当前 URLcan_go_back()-bool是否存在后退历史记录can_go_forward()-bool是否存在前进历史记录go_back()后退仅在can_go_back()为True时有效go_forward()前进仅在can_go_forward()为True时有效get_current_url()-Optional[str]获取当前显示的 URL若从未加载过任何 URL 则返回Noneget_title()-Optional[str]获取当前页面标题get_user_agent()-Optional[str]获取 HTTPUser-Agent请求头的值页面加载方法说明load_file(path)加载指定本地文件path为文件绝对路径load_request(url, methodRequestMethod.GET)发起 HTTP 请求并把响应加载进 WebViewfile://URL 按本地文件方式加载等价于load_file此时method参数被忽略load_html(value, base_urlNone)加载 HTML 字符串base_url用于解析 HTML 内的相对 URL若传入file://URL则其中引用的本地文件会对 WebView 开放读取run_javascript(value)在当前页面上下文中执行给定 JavaScript 代码load_request的 HTTP 方法由枚举RequestMethod控制当前仅支持GET与POST。load_html是渲染本地/动态 HTML 内容的主力方法例如在应用内展示一段由 Python 动态生成的报表 HTML。缩放、缓存与滚动方法说明enable_zoom()/disable_zoom()启用/禁用屏幕缩放控件与手势缩放clear_cache()清除 WebView 使用的全部缓存包括浏览器 HTTP 缓存、Cache API 缓存Service Worker 常使用与应用缓存clear_local_storage()清除 WebView 使用的 localStoragescroll_to(x, y)滚动到指定像素位置WebView 坐标系scroll_by(x, y)按指定像素量相对滚动clear_cache的注释明确列出其清除范围覆盖 HTTP Cache、Cache API 与 Application Cache 三类在需要“退出登录后彻底清空站点数据”的场景非常实用。JavaScript 模式set_javascript_mode(mode)用于设置 WebView 的 JavaScript 执行模式参数为枚举JavaScriptModeJavaScriptMode.UNRESTRICTEDJavaScript 执行不受限制默认值在首次页面加载前即生效JavaScriptMode.DISABLED禁用 JavaScript 执行。源码注释特别提醒禁用 JavaScript 可能导致网页行为异常例如依赖 JS 渲染的页面会白屏因此仅在确有安全需求时才应关闭。由于全部方法均为async在 Flet 的异步事件处理器中需要await调用例如async def on_nav(e): if await webview.can_go_back(): await webview.go_back()底层实现从 Python 控件到 Flutter 原生 WebView理解 flet-webview 的跨端实现有助于排查平台差异问题。整条链路如下Python 侧WebView控件继承ft.LayoutControl方法通过self._invoke_method(...)将方法名与参数如load_file的path、run_javascript的value序列化后经 Flet 协议通道发送给 Flutter 客户端见 webview.py 中各方法的实现Flutter 侧extension.dart 依据control.type WebView创建WebViewControl组件随后按平台分派到不同实现文件webview_mobile_and_mac.dartiOS、Android、macOS 上的原生 WebView基于webview_flutterwebview_web.dartWeb 平台基于webview_flutter_web的 iframe 方案webview_windows_and_linux_vain.dartWindows/Linux 的空实现这也是该控件在这两个平台不受支持的原因。这种“Python 控件 Flutter 原生实现”的分层结构使得 flet-webview 在 iOS/Android/macOS 上拥有真正的原生渲染性能而在 Web 上退化为 iframe 语义——因此像run_javascript、clear_cache这类强依赖原生 WebView 能力的方法在 Web 平台必然不可用这与源码中_check_mobile_or_mac_platform()的运行时校验逻辑完全吻合。常见问题排查Android 报错 NET::ERR_CLEARTEXT_NOT_PERMITTED这是使用 flet-webview 最常遇到的坑。原因在于Android 默认禁止应用访问明文非 HTTPS传输的网页如果你的 WebView 加载的是 HTTP 地址就会触发NET::ERR_CLEARTEXT_NOT_PERMITTED错误。该问题在官方文档 webview/index.md 的 Troubleshooting 一节中有明确说明与修复方案。修复方法是修改应用配置中的 manifest application 属性在项目的pyproject.toml中添加[tool.flet.android.manifest_application] usesCleartextTraffic true即允许该应用使用明文流量。需要说明的是这通常只应在开发/内网场景使用正式发布的应用应优先使用 HTTPS避免明文传输带来的数据泄露风险。其他平台相关的注意事项Web 平台只能加载允许被 iframe 嵌入的页面且大部分方法导航历史、JS 注入、缓存清理等不可用若代码中直接调用会抛出FletUnsupportedPlatformExceptionWindows / Linux当前版本不支持WebView控件需等待官方后续支持本地文件file://加载仅限 iOS、Android、macOS桌面端与 Web 端无法使用on_scroll仅 iOS、Android 两个平台支持macOS 上不会触发。小结flet-webview 为 Flet 应用提供了一条通往完整 Web 渲染能力的捷径通过一个WebView控件与十余个 async 方法Python 开发者即可实现网页浏览、本地 HTML 渲染、JavaScript 注入、缓存管理、页面导航与缩放控制无需编写任何原生或前端代码。上手路径建议为先阅读 包说明 确认平台支持再对照 官方示例 搭建最小应用随后按需查阅 WebView 源码 与 类型定义 理解每个 API 的平台边界最后结合 官方 WebView 文档 排查实战中遇到的平台差异问题。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐flet-webview在 Flet 应用中嵌入 WebView 的官方扩展及其 0.80.0 演进flet webview在 Flet 应用中嵌入 WebView 的官方扩展及其 0.80.0 演进 导读 flet webview 是 Flet 官方维护的前端跨平台桌面应用移动开发告别复杂前端用Flet WebView组件3步实现应用内网页嵌入告别复杂前端用Flet WebView组件3步实现应用内网页嵌入 你还在为应用开发中的网页展示功能烦恼吗既要懂Python又要学HTML/CSS本文将带你前端跨平台桌面应用移动开发GPUI Component WebView集成指南在原生应用中嵌入网页内容GPUI Component WebView集成指南在原生应用中嵌入网页内容 GPUI Component的WebView组件提供了一种强大的方式让开发者能桌面应用UI组件前端上一篇使用示例下一篇Web Awesome CDN部署指南快速集成到现有项目的10个技巧创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表