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

Question

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

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

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

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

（然后我收到 CORS 错误，但我有）

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

Failed to launch 'ms-appx-web:///www/index.html' because the scheme does not have a registered handler.

这是我的示例应用程序：

    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;
                }      
            }   
        }
    }

如何在本地引用文件，就像我在上面尝试的那样？

Answer 1

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

查看 this post and 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 问题。

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

WebView2 in Winui 3: How to load a local HTML file nested within the application

angular

ionic-framework

webview2

winui-3