.NET Maui中WebView加载本地HTML引用Bootstrap失效问题排查

我在.NET Maui中使用WebView加载本地HTML，相关XAML代码如下：

<WebView>
    <WebView.Source>
        <HtmlWebViewSource Html="<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title> Formulario Familia </title>
    <link rel="stylesheet" type="text" href="bootstrap.min.css">
</head>..." />
    </WebView.Source>
</WebView>

我想加载与bootstrap.min.css同目录的本地HTML，且尝试用本地Bootstrap库为HTML应用样式，但并未生效。请问问题出在哪里？我遗漏了什么？

问题原因及解决方法 #

1. 本地资源构建操作未配置 #

• .NET Maui的静态资源（CSS、HTML文件）必须设置正确的构建操作，否则不会被打包进应用：右键点击bootstrap.min.css和目标HTML文件 → 打开【属性】→ 将构建操作设为Embedded resource，复制到输出目录设为如果较新则复制或始终复制。

2. 资源引用路径错误 #

• 直接用HtmlWebViewSource嵌入HTML字符串时，WebView的上下文并非资源文件所在的物理目录，写bootstrap.min.css无法定位文件：
  • 优先推荐用UrlWebViewSource加载独立HTML文件，示例：

    <WebView>
        <WebView.Source>
            <UrlWebViewSource Url="local_html_file.html" />
        </WebView.Source>
    </WebView>
    

  • 若坚持嵌入HTML字符串，需把CSS内容读取为字符串嵌入到HTML的<style>标签中，C#读取嵌入资源的示例：

    var assembly = typeof(YourPage).GetTypeInfo().Assembly;
    using var stream = assembly.GetManifestResourceStream("YourProjectNamespace.bootstrap.min.css");
    using var reader = new StreamReader(stream);
    var cssContent = reader.ReadToEnd();
    // 将cssContent插入到HTML的<style>标签内
    

3. 平台权限与配置缺失 #

• Android平台需在AndroidManifest.xml中添加必要权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS平台需在Info.plist中配置允许加载本地内容的相关设置。

内容的提问来源于stack exchange，提问作者user25643568