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

来源:这里教程网 时间:2026-02-21 17:34:16 作者:

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
)设为 MauiAppResourceEmbeddedResource 构建操作
读取时用
FileSystem.OpenAppPackageFileAsync("demo.html")
获取流
必须设置 BaseUrl,例如:
htmlSource.BaseUrl = FileSystem.AppDataDirectory;
(若资源在 wwwroot 下,也可用
FileSystem.Current.AppDataDirectory + "/wwwroot/"

调试 WebView 页面的实用方法

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

平板/手机开启「开发者选项」和「USB 调试」 在 MainActivity 或启动逻辑中添加:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) WebView.setWebContentsDebuggingEnabled(true);
PC 上打开
chrome://inspect
→ 找到设备和 WebView 标签页 → 点击 “inspect”
可实时查看 DOM、Console 输出、网络请求,甚至修改样式和 JS

与原生功能交互(JS 调用 C#)

WebView 默认是单向渲染,要实现 JS 调用原生能力,需桥接机制:

推荐使用社区成熟方案如 Densen.MauiPlus,它封装了
NativeBridge
和跨平台消息通道
注册 JS 接口名(如
"dialogs"
),并在 C# 中实现对应处理类(如
NativeApi
HTML 中调用:
window.dialogs?.alert("Hello from JS");
注意:iOS 需额外配置
WKWebViewConfiguration
并启用
JavaScriptEnabled

基本上就这些。只要路径、权限、调试开关和交互桥接四点对齐,WebView 就能稳定跑起来。

相关推荐