提高开发效率!深入探索微软新发布的WebView2库的应用

2023年 9月 5日 62.7k 0

一、WebView2库简介

WebView2是微软开发的一个现代Web控件,它基于Microsoft Edge浏览器的内部架构,提供高性能、安全稳定、易用的Web控件。与传统的WebBrowser控件相比,WebView2具有更好的跨平台支持、更多的API接口、更好的性能和稳定性。

二、WebView2库使用场景

WebView2库适用于多种场景,例如:

  • 在Win32桌面应用程序、UWP应用程序和.NET应用程序中嵌入现代Web技术,为用户提供更加现代化、丰富的用户体验。
  • 构建不同类型的浏览器插件、扩展程序,为用户提供更多的功能和服务。
  • 作为游戏引擎的一部分,提供在线游戏运行的支持。
  • 开发各种类型的工具、应用程序,如IDE、网站监视器等。

三、WebView2库的组件模块

WebView2库包括以下组件模块:

  • WebView2 Runtime:WebView2库需要安装对应版本的WebView2运行时,以便在Windows上启用它的功能
  • WebView2 Loader:WebView2库的底层加载器能够快速地将WebView2控件加载到应用程序中
  • WebView2 Control:WebView2控件是WebView2库的核心,可以在Windows应用程序中嵌入现代Web技术
  • WebView2 SDK:WebView2库提供了丰富的API和开发工具,帮助开发人员更好地使用WebView2控件

四、WebView2库的优点和缺点

WebView2库的优点:

  • 高性能和稳定性:WebView2库基于Microsoft Edge浏览器内部架构,具有更高的性能和稳定性,为用户提供更好的体验
  • 多种语言支持:WebView2库可以使用多种编程语言进行开发,如C++、C#等
  • 丰富的API接口:WebView2库提供了大量的API接口,让开发人员可以更灵活地控制WebView2控件的行为
  • 跨平台支持:WebView2库可以在多个操作系统上运行,包括Windows、Linux、MacOS等

WebView2库的缺点:

  • 安装WebView2运行时:WebView2库需要安装对应版本的WebView2运行时,以便在Windows上启用它的功能
  • 库文件较大:WebView2库的库文件比传统的WebBrowser控件库文件要大,可能会占用一定的存储空间

五、WebView2库API用法

WebView2库提供了丰富的API和开发工具,让开发人员可以更轻松、灵活地控制WebView2控件的行为。以下是WebView2库中常用的一些API介绍:

1、CoreWebView2

CoreWebView2是WebView2库的核心类,它表示一个WebView2控件实例。CoreWebView2包含了WebView2控件的大部分功能,如导航、JavaScript交互、事件处理等。

常用属性和方法:

  • AddScriptToExecuteOnDocumentCreatedAsync(string script):将一个JavaScript脚本添加到文档创建时执行的脚本列表中。
  • AddScriptToExecuteOnPageCompletedAsync(string script):将一个JavaScript脚本添加到页面完成时执行的脚本列表中。
  • ExecuteScriptAsync(string script):执行一个JavaScript脚本并返回结果。
  • Navigate(string uri):导航到指定的URL地址。
  • Stop():停止WebView2控件当前的所有导航操作。
  • GoBack():将WebView2控件的导航历史记录向后移动一步。
  • GoForward():将WebView2控件的导航历史记录向前移动一步。
  • Reload():重新加载当前页面。
  • CapturePreviewAsync(Stream imageStream, ImageFormat imageFormat):捕获当前页面的预览图像。

事件:

  • CoreWebView2InitializationCompleted:当CoreWebView2对象初始化完成时触发的事件。
  • NavigationStarting:当WebView2控件开始导航时触发的事件。
  • ContentLoading:当WebView2控件开始加载内容时触发的事件。
  • SourceChanged:当WebView2控件的源URL地址发生变化时触发的事件。
  • ContentLoaded:当WebView2控件完成载入内容后触发的事件。

2、CoreWebView2Environment

CoreWebView2Environment表示一个WebView2运行环境,它提供了WebView2控件和WebView2控件相关组件的管理和初始化功能。

常用属性和方法:

  • CreateCoreWebView2Controller(IntPtr parentWindow, Action controllerCreatedCallback):创建一个CoreWebView2Controller实例并放置到指定的父窗口中。
  • CreateCoreWebView2EnvironmentWithOptions(CoreWebView2EnvironmentOptions environmentOptions, Action environmentCreatedCallback):根据指定的选项创建一个CoreWebView2Environment实例。

3、CoreWebView2Controller

CoreWebView2Controller是WebView2控件和WebView2运行环境之间的桥梁,它负责管理WebView2控件的生命周期、与浏览器的交互等。

常用属性和方法:

  • CoreWebView2:获取当前CoreWebView2Controller对象关联的CoreWebView2实例。
  • Close():关闭CoreWebView2Controller对象和关联的CoreWebView2实例。
  • AddRemoteObject(string name, object obj):将一个.NET对象公开为JavaScript可访问的远程对象。
  • RemoveRemoteObject(string name):从CoreWebView2Controller对象中删除一个已公开的远程对象。

4、CoreWebView2Settings

CoreWebView2Settings表示WebView2控件的一些设置,如缩放级别、内核启用状态等。

常用属性:

  • IsScriptEnabled:获取或设置WebView2控件是否允许JavaScript脚本执行。
  • IsWebMessageEnabled:获取或设置WebView2控件是否允许使用Web消息。

5、CoreWebView2EnvironmentOptions

CoreWebView2EnvironmentOptions定义了创建CoreWebView2Environment时的一些选项和设置。

常用属性和方法:

  • BrowserExecutableFolder:获取或设置运行WebView2控件时使用的浏览器可执行文件路径。
  • UserDataFolder:获取或设置WebView2控件使用的用户数据存储文件夹路径。

这些API只是WebView2库的一部分,还有更多功能和用法可以在Microsoft官方文档中找到。

六、winform引用WebView2库案例说明

using Microsoft.Web.WebView2.Core;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        webView21.CreationProperties = new CoreWebView2CreationProperties()
        {
            BrowserExecutableFolder = @"C:Program Files (x86)MicrosoftEdgeApplication91.0.864.48",
            UserDataFolder = @"C:Temp",
        };

        webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
        webView21.Source = new Uri("https://www.bing.com");
    }

    private async void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("document.body.style.backgroundColor = 'lightblue';");
        await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("console.log('Hello from JavaScript!');");
        await webView21.CoreWebView2.Navigate("https://www.bing.com");
    }
}

在这个例子中,我们在Winform应用程序中使用了WebView2控件。我们首先初始化了WebView2控件,然后通过编写CoreWebView2InitializationCompleted事件处理程序与WebView2进行交互。在这个例子中,我们通过AddScriptToExecuteOnDocumentCreatedAsync方法执行JavaScript脚本,并使用Navigate方法加载URL。

七、WFP引入WebView2库案例说明

以下是一个使用WPF框架和WebView2库的简单案例:

首先需要在项目中安装Microsoft.Web.WebView2 NuGet包。

在XAML中添加WebView2控件:


    
        
    

在C#代码中初始化WebView2控件并加载URL:

using Microsoft.Web.WebView2.Core;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        webView.CreationProperties = new CoreWebView2CreationProperties()
        {
            BrowserExecutableFolder = @"C:Program Files (x86)MicrosoftEdgeApplication91.0.864.48",
            UserDataFolder = @"C:Temp",
        };

        webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;
    }

    private async void WebView_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("document.body.style.backgroundColor = 'lightblue';");
        await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("console.log('Hello from JavaScript!');");
        await webView.CoreWebView2.Navigate("https://www.bing.com");
    }
}

在这个例子中,我们在WPF应用程序中使用了WebView2控件。我们首先初始化了WebView2控件,然后通过编写CoreWebView2InitializationCompleted事件处理程序与WebView2进行交互。在这个例子中,我们通过AddScriptToExecuteOnDocumentCreatedAsync方法执行JavaScript脚本,并使用Navigate方法加载URL。

八、总结

WebView2库是微软开发的一个现代Web控件,它基于Microsoft Edge浏览器的内部架构,提供高性能、安全稳定、易用的Web控件。WebView2库可以适用于多种场景、跨平台支持、提供丰富的API接口等优点;但也需要安装WebView2运行时、库文件较大等缺点。在Winform或者WPF应用程序中使用WebView2的方法与传统的WebBrowser控件相比更加现代化、稳定,提供更好的用户体验和应用场景。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论