如何在 WPF WebView2 中嵌入 Roomle Rubens 配置器？

Question

我想在 Windows 桌面應用程序的 WPF 對話框中嵌入Roomle Rubens 配置器。
我想使用WebView2控件並按照WPF 應用程序中的 WebView2 入門指南創建桌面應用程序。
我也知道如何在網站中嵌入配置器。 可以在這里找到一個很好的文檔：嵌入集成。

我的問題是我如何把東西放在一起？

我想顯示我的應用程序的 WebView 中記錄的配置器並與之通信。 我想在 WPF UI 中設置和更改參數，將參數發送到 Web 應用程序並更新視圖。

Answer 1

一步一步來：

1. 使用 WebView2 控件創建 WPF 對話框。 請參閱WPF 應用程序中的 WebView2 入門

2. 為 Web 內容創建一個資源文件夾並添加roomle-configurator-api.es.min.js 。 這些文件可以在這里找到： Roomle Rubens Configurator Embedding Lib 。
   （在示例中，文件夾的名稱是resource\\wwwroot ）

3. 從這里獲取快速入門html ： 嵌入集成 - 沒有包管理器的復制和粘貼。
   在資源文件夾中創建一個index.html文件並粘貼快速入門指南中的內容。

4. 在虛擬主機名和 Web 資源文件夾的路徑之間建立映射。 通過本地主機設置web視圖的來源：

    async private Task InitializeAsync(WebView2 webView) { string hostName = "rubens.example" string localResourcePath = Path.Join(AppDomain.CurrentDomain.BaseDirectory, @"resource\\wwwroot"); await webView.EnsureCoreWebView2Async(); webView.CoreWebView2.SetVirtualHostNameToFolderMapping( hostName, localResourcePath, CoreWebView2HostResourceAccessKind.DenyCors); webView.Source = new Uri($"https://{hostName}/index.html"); }

   確保CoreWebView2Async等待CoreWebView2初始化。 該方法顯式觸發控件的 CoreWebView2 的初始化。
   SetVirtualHostNameToFolderMapping設置虛擬主機名和文件夾路徑之間的映射，以便通過該主機名對網站可用。

5. 向宿主應用程序添加事件偵聽器。 在以下示例中，從事件中檢索寬度和高度數據並使用configurator.extended.setParameterOfRootComponent將其設置為根組件的相應屬性：

    window.chrome.webview.addEventListener('message', arg => { if (arg.data.width) { configurator.extended.setParameterOfRootComponent({ "key": "width" }, arg.data.width.toString()); } if (arg.data.height) { configurator.extended.setParameterOfRootComponent({ "key": "height" }, arg.data.height.toString()); } });

6. 將事件設置到主機應用程序：

    public void ChangeHeight(WebView2 webView, int newHeight) => webView.CoreWebView2.PostWebMessageAsJson($"{{ \\"height\\" : {newHeight} }}");

   CoreWebView2.PostWebMessageAsJson將指定的webMessageAsJson發布到此 WebView 中的頂級文檔。
   CoreWebView2.PostWebMessageAsString發布一條消息，它是一個簡單的字符串，而不是 JavaScript 對象的 JSON 字符串表示。

完整的示例可以在 GitHub 存儲庫中找到： Roomle/roomle-configurator-wpf-cs-example