如何在 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