Winui 3 中的 WebView2：如何加载嵌套在应用程序中的本地 HTML 文件答案

【问题标题】：WebView2 in Winui 3: How to load a local HTML file nested within the applicationWinui 3 中的 WebView2：如何加载嵌套在应用程序中的本地 HTML 文件
【发布时间】：2022-01-26 20:44:57
【问题描述】：

我正在寻找一种方法来用某种 Windows 应用程序包装我的 Ionic/Angular 应用程序。我正在研究 Electron（并且遇到问题），但也在调查我是否刚刚创建了自己的 WinUI3 应用程序并使用了 Webview2。

虽然这是 Ionic/Angular，但我认为这适用于任何本地 HTML 文件。

如果我使用对 HTML 文件的绝对引用，我可以加载它，例如

MyWebView.CoreWebView2.Navigate("file:///D:/0/www/index.html");

（然后我得到 CORS 错误，但我有一个 separate post for that）

但是，我希望我的文件嵌入到应用程序中，例如在资产下添加一个www 文件夹，然后我尝试MyWebView.CoreWebView2.Navigate("ms-appx-web:///www/index.html");，但我收到以下错误：

无法启动“ms-appx-web:///www/index.html”，因为该方案没有注册的处理程序。

这是我的示例应用：

    namespace WinUI3_1
    {
        /// <summary>
        /// An empty window that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainWindow : Window
        {
            public MainWindow()
            {
                this.InitializeComponent();
                try
                {
                    //MyWebView.Source = new Uri("ms-appx-web:///assets/www/index.html");
                    Init();        
                }
                catch (Exception ex)
                {       
                    int i = 0;
                }     
            }

            private async void Init()
            {
                try
                {
                    await MyWebView.EnsureCoreWebView2Async();
                    MyWebView.CoreWebView2.Navigate("file:///D:/0/www/index.html");
                    //MyWebView.CoreWebView2.Navigate("ms-appx-web:///www/index.html");
                    MyWebView.CoreWebView2.OpenDevToolsWindow();
                }
                catch (Exception)
                {
                    int i = 0;
                }      
            }   
        }
    }

我在上面尝试时如何在本地引用文件？

【问题讨论】：

标签： angular ionic-framework webview2 winui-3

【解决方案1】：

我找到了一种似乎至少可以加载应用程序的方法。

查看this post 和this documentation，我可以执行以下操作...

 await MyWebView.EnsureCoreWebView2Async();

 MyWebView.CoreWebView2.SetVirtualHostNameToFolderMapping(
     "appassets", "assets", CoreWebView2HostResourceAccessKind.Allow);
    
 MyWebView.Source = new Uri("http://appassets/www/index.html");
 MyWebView.CoreWebView2.OpenDevToolsWindow();

这现在找到了 index.html 并且加载了它，没有 CORS 问题。

【讨论】：