Is there a way to put HTML files on the screen without building them in WinUI3?

차준혁 40

Hello,
In the winUI3 project,

The code I posted below is currently my project code.

As you can see from the code I wrote, I tried to create an html inside the project and use webView 2 to organize the screen with the local path of the project.

But is there a way to use only html and javascript files without building them?
Or should I set up a route using Script src in the html and use it?

<Page
    x:Class="ONEAPP.Views.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWinUI3.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <controls:WebView2 x:Name="MyWebView" Grid.Row="1" Grid.ColumnSpan="2"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"/>
        
    </Grid>
</Page>

public sealed partial class HomePage : Page
{
    public HomePage()
    {
        this.InitializeComponent();

        OnStart();
    }

    /// <summary>
    /// WebView Html Load in Local Html
    /// </summary>
    private async void OnStart()
    {
        await MyWebView.EnsureCoreWebView2Async(); // ensure the CoreWebView2 is created

        var coreWB = MyWebView.CoreWebView2;

        if (coreWB != null )
        {
            coreWB.SetVirtualHostNameToFolderMapping("appassets.example", "assets/html", Microsoft.Web.WebView2.Core.CoreWebView2HostResourceAccessKind.Allow);

            MyWebView.Source = new Uri(@"https://appassets.example/HOME.html");
        }
    }
}

Can you also tell me how to set up a route if I have to use it with a specified path in the script?
User's image The picture above is part of the composition of my project.
If the '.js' file was not located in the same folder path as the html file in the picture, the src path was not available.

<!DOCT
<style>...</style>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="one-item-container"></div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="module" src="home-container-in-box.js" defer></script>
</body>
</html>

I want to set the path of javascript as follows:
html/js/home-container-in-box.js

and html path

: html/HOME.html

If you set the script path like this, you couldn't use it

<script type="module" src="js/home-container-in-box.js" defer></script>

This is the last question.
Can you also tell me how to use the Class function of viewmodel within the javascript file?

For example,

function MyViewModel_Method(){
	// use it in this function. MyViewModel.cs Method Use...
}

I would appreciate it if anyone could tell me how to deal with this.

Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-07T02:50:27.56+00:00

edited.

The script source could not be located by the directory same as HTML pages. Try ./js/home-container-in-box.js. It could be more about web coding.
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-07T03:34:46.75+00:00

There is a communication way between script and code. PostWebMessageAsJson/PostWebMessageAsString and add_WebMessageReceived. For more information, see ScenarioWebMessage (.html, .cpp, and .h).
차준혁 40 Reputation points

2024-03-07T06:06:45.7266667+00:00

um....

I think it's hard to use winUI3 method through web view using html and js.
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-07T06:21:22.3033333+00:00

There is no context for script to call winUI3 methods directly. But you can, as I said, use web messages to get around this.

for example, see Receiving messages (from the WebView to the Win32 host). Call methods in handlers.

@차준혁,

Update: There are AddHostObjectToScript and PostSharedBufferToScript which can expose objects to be used by script.
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-08T01:40:10.18+00:00

@차준혁, any update?
차준혁 40 Reputation points

2024-03-08T06:26:08.5433333+00:00

Just... I thought using HTML using WinUI3 already had a lot of problems.

So I decided to just reorganize the screen with xaml. I think that's much the best way.
Thank You. @Xiaopo Yang - MSFT

1 answer

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more