MAUI WebView控件怎么用 MAUI加载网页教程

MAUI的WebView支持远程URL、本地HTML文件和内联HTML字符串三种加载方式；需注意权限配置、BaseUrl设置、Chrome DevTools调试及JS与C#交互桥接。

MAUI 的 WebView 控件用来在应用内嵌入网页内容，支持远程 URL、本地 HTML 文件和内联 HTML 字符串。用法不复杂但容易忽略几个关键点。

基础加载方式：三种常用来源

WebView 通过 Source 属性指定内容来源，对应三类对象：

• UrlWebViewSource：加载公网或局域网地址，比如 https://example.com；需确保平台权限已开启（Android 要 INTERNET，iOS/macOS 需配置 App Transport Security）
• HtmlWebViewSource：加载本地 HTML 字符串或文件；用 BaseUrl 指定资源根路径，否则 CSS/JS 图片可能加载失败
• 直接赋值字符串：webView.Source = new HtmlWebViewSource { Html = "<h1>Hello</h1>" };

本地 HTML 正确加载的关键步骤

很多开发者卡在“页面空白”，其实是路径或 BaseUrl 设置不对：

• 把 HTML 文件（如 demo.html）设为 MauiAppResource 或 EmbeddedResource 构建操作
• 读取时用 FileSystem.OpenAppPackageFileAsync("demo.html") 获取流
• 必须设置 BaseUrl，例如：htmlSource.BaseUrl = FileSystem.AppDataDirectory;（若资源在 wwwroot 下，也可用 FileSystem.Current.AppDataDirectory + "/wwwroot/"）

调试 WebView 页面的实用方法

安卓端可直接用 Chrome DevTools 远程调试，效率远高于打日志：

标签： css javascript java html android js app 安卓 internet usb 平板 m