下面展示了如何在 VB.NET 中创建一个使用WebView2 控件的项目。我编写它的方式使其对可能具有不同经验水平的其他人也有用。
使用 WebView2 需要安装 MS Edge。 MS Edge 所需的最低版本号取决于您选择使用的 WebView2 版本。请参阅WebView2 release notes 了解更多信息。
确保已安装 MS Edge。 如果没有，请Download/Install MS Edge。
如果您已经安装了 MS Edge，要检查 MS Edge 版本号，请在 MS Edge 地址栏中键入以下内容：edge://settings/help
或者，
- 打开 MS Edge
- 点击右上角的
- 选择帮助和反馈
- 选择关于 Microsoft Edge
WebView2 运行时可能已通过 Windows 更新安装在您的计算机上。
检查是否安装了 WebView2 运行时：
- 打开控制面板
- 选择查看方式：小图标
- 点击程序和功能
注意：WebView2 运行时命名为：Microsoft Edge WebView2 Runtime。如果未安装 WebView2 运行时（或者您想使用特定版本），您可以Download the WebView2 Runtime 并安装它。
64 位操作系统：
WebView2 运行时：
%ProgramFiles(x86)%\Microsoft\EdgeWebView\Application\<version>
注册表：
HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}
32 位操作系统：
WebView2 运行时：
%ProgramFiles%\Microsoft\EdgeWebView\Application\<version>
以下说明是为 VS 2019 编写的。
VS 2019：
- 打开 Visual Studio
- 点击无代码继续
- 点击文件
- 选择新建
- 选择项目
-
Visual Basic Windows 桌面
- 单击Windows 窗体应用程序（.NET Framework）
- 点击下一步
- 指定项目名称（名称：WebView2Test）
- 点击创建
打开属性窗口
打开解决方案资源管理器
设置 NuGet 包管理器设置（推荐）
- 在VS菜单中，点击工具
- 选择选项...
- 展开 NuGet 包管理器
- 点击常规
- 在包管理下，对于默认包管理格式，选择PackageReference
- 点击确定
添加 WebView2 NuGet 包
- 在解决方案资源管理器中，右键单击
- 选择管理 NuGet 包...
- 点击浏览
- 在搜索框中，输入：Microsoft.Web.WebView2
- 选择所需版本（例如：1.0.1054.31），然后点击安装
- 如果出现提示“Visual Studio 即将对此解决方案进行更改。单击确定继续进行下面列出的更改。”，单击确定
将Load 事件处理程序添加到表单
- 在解决方案资源管理器中，双击
- 在“属性”窗口中，选择您的表单（例如：Form1）
- 点击闪电
- 双击加载将事件处理程序添加到表单中
将FormClosed 事件处理程序添加到表单
- 在解决方案资源管理器中，双击
- 在“属性”窗口中，选择您的表单（例如：Form1）
- 点击闪电
- 双击FormClosed将事件处理程序添加到表单中
将 TableLayoutPanel 添加到表单
-
在解决方案资源管理器中，双击要添加WebView2 控件的表单（例如：Form1）
-
在VS菜单中，点击查看
-
选择工具箱
-
在工具箱中，展开所有 Windows 窗体
-
将TableLayoutPanel拖到您的表单（例如：Form1）
-
在属性窗口中，选择刚刚添加的 TableLayoutPanel（例如：TableLayoutPanel1）
-
选择行。在右侧，点击
-
修改后得到以下内容：
-
在 Show 的下拉列表中选择 Columns 并进行修改，以便您拥有以下内容：
-
点击确定
-
在属性窗口中，对于 TableLayoutPanel，将 Dock 属性设置为 Fill
将 TableLayoutPanel 添加到 TableLayoutPanel 的第一行
-
从工具箱中，将TableLayoutPanel拖到TableLayoutPanel1的第一行
-
在属性窗口中，选择刚刚添加的 TableLayoutPanel（例如：TableLayoutPanel2）
-
选择行。在右侧，点击
-
修改后得到以下内容：
-
在 Show 的下拉菜单中，选择 Columns 并进行修改，使您拥有以下内容：
为 URL 添加文本框到 TableLayoutPanel2
- 从 Toolbox 中，将 TextBox 拖到 TableLayoutPanel2 的第 4 列（最大列）
- 在属性窗口中，对于 TextBox1，将 (Name) 属性设置为所需的值（例如：textBoxAddressBar）。将 Anchor 属性设置为 Left、Right，并将 Text 属性设置为所需的值（例如：https://www.microsoft.com）
- 点击闪电
- 双击 KeyDown 将事件处理程序添加到表单中
添加按钮
- 从工具箱中，将Button拖到TableLayoutPanel2的第二列
- 在属性窗口中，对于 Button1，将 Text 属性设置为 Back，将 (Name) 属性设置为所需的值（例如：btnBack），并将 Anchor 属性设置为 Left, Right。
- 点击闪电
- 双击单击将事件处理程序添加到表单中
- 对
Forward（第 3 列）、Go（第 4 列）和 Refresh（第 5 列）重复上述过程
完成后，它应该如下所示：
将 WebView2 控件添加到窗体
- 在VS菜单中，点击查看
- 选择工具箱
- 在工具箱中，展开 WebView2 Windows 窗体控件
- 将WebView2拖到TableLayoutPanel的第二行（例如：TableLayoutPanel1）
- 在属性窗口中，对于 WebView21，将 Dock 属性设置为 Fill
您的表单应如下所示：
添加CoreWebView2InitializationCompleted事件处理程序：
- 在“属性”窗口中，选择您的 WebView2 控件实例（例如：WebView21）
- 点击闪电
- 双击CoreWebView2InitializationCompleted将事件处理程序添加到表单中
添加NavigationCompleted事件处理程序：
- 在“属性”窗口中，选择您的 WebView2 控件实例（例如：WebView21）
- 点击闪电
- 双击NavigationCompleted将事件处理程序添加到表单中
添加WebMessageReceived事件处理程序：（可选）
- 在“属性”窗口中，选择您的 WebView2 控件实例（例如：WebView21）
- 点击闪电
- 双击 WebMessageReceived 将事件处理程序添加到表单中
修改代码：
Form1.vb
Imports Microsoft.Web.WebView2.Core
Imports Microsoft.Web.WebView2
Imports System.IO
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
LogMsg("MS Edge Version: " + CoreWebView2Environment.GetAvailableBrowserVersionString())
If Not String.IsNullOrEmpty(textBoxAddressBar.Text) Then
'navigate to URL
'WebView21.Source = New Uri(textBoxAddressBar.Text)
WebsiteNavigate(textBoxAddressBar.Text)
End If
End Sub
Private Sub Form1_FormClosed(sender As Object, e As FormClosedEventArgs) Handles MyBase.FormClosed
'unsubscribe from CoreWebView2 event(s) (remove event handlers)
RemoveHandler WebView21.CoreWebView2.HistoryChanged, AddressOf CoreWebView2_HistoryChanged
End Sub
Private Sub LogMsg(msg As String, Optional addTimestamp As Boolean = True)
'ToDo: add desired code
If addTimestamp Then
msg = String.Format("{0} - {1}", DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss.fff"), msg)
End If
Debug.WriteLine(msg)
End Sub
Private Sub UpdateAddressBar()
'if necessary, update address bar
If textBoxAddressBar.Text <> WebView21.Source.ToString() Then
textBoxAddressBar.Text = WebView21.Source.ToString()
'move cursor to end of text
textBoxAddressBar.SelectionStart = textBoxAddressBar.Text.Length
textBoxAddressBar.SelectionLength = 0
End If
End Sub
Private Sub WebsiteNavigate(ByVal dest As String)
If WebView21 IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(dest) Then
'URL must start with one of the specified strings
'if Not, pre-pend with "https://"
If Not dest = "about:blank" AndAlso
Not dest.StartsWith("edge://") AndAlso
Not dest.StartsWith("file://") AndAlso
Not dest.StartsWith("http://") AndAlso
Not dest.StartsWith("https://") AndAlso
Not System.Text.RegularExpressions.Regex.IsMatch(dest, "^([A-Z]|[a-z]):") Then
'set value
dest = "https://" & dest
End If
'option 1
WebView21.Source = New Uri(dest, UriKind.Absolute)
'option 2
'WebView21.CoreWebView2.Navigate(dest)
'update address bar
UpdateAddressBar()
End If
End Sub
Private Sub textBoxAddressBar_KeyDown(sender As Object, e As KeyEventArgs) Handles textBoxAddressBar.KeyDown
If e.KeyCode = Keys.Enter Then
WebsiteNavigate(textBoxAddressBar.Text)
End If
End Sub
Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
If WebView21 IsNot Nothing AndAlso WebView21.CanGoBack Then
WebView21.GoBack()
End If
End Sub
Private Sub btnForward_Click(sender As Object, e As EventArgs) Handles btnForward.Click
If WebView21 IsNot Nothing AndAlso WebView21.CanGoForward Then
WebView21.GoForward()
End If
End Sub
Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
WebsiteNavigate(textBoxAddressBar.Text)
End Sub
Private Sub btnRefresh_Click(sender As Object, e As EventArgs) Handles btnRefresh.Click
If WebView21 IsNot Nothing Then
WebView21.Refresh()
End If
End Sub
Private Sub WebView21_CoreWebView2InitializationCompleted(sender As Object, e As Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs) Handles WebView21.CoreWebView2InitializationCompleted
LogMsg("WebView21_CoreWebView2InitializationCompleted")
LogMsg("UserDataFolder: " & WebView21.CoreWebView2.Environment.UserDataFolder.ToString())
'subscribe to CoreWebView2 event(s) (add event handlers)
AddHandler WebView21.CoreWebView2.HistoryChanged, AddressOf CoreWebView2_HistoryChanged
End Sub
Private Sub CoreWebView2_HistoryChanged(sender As Object, e As Object)
'LogMsg("CoreWebView2_HistoryChanged")
btnBack.Enabled = WebView21.CoreWebView2.CanGoBack
btnForward.Enabled = WebView21.CoreWebView2.CanGoForward
'update address bar
UpdateAddressBar()
End Sub
Private Sub WebView21_NavigationCompleted(sender As Object, e As Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs) Handles WebView21.NavigationCompleted
LogMsg("WebView21_NavigationCompleted")
End Sub
Private Sub WebView21_WebMessageReceived(sender As Object, e As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs) Handles WebView21.WebMessageReceived
LogMsg("WebView21_WebMessageReceived")
End Sub
End Class
WebView2 创建一个用户数据文件夹。如果没有指定位置，根据documentation：
当未指定 userDataFolder 时，WebView2 创建用户数据
默认位置的文件夹如下：
对于打包的 Windows 应用商店应用，默认用户文件夹是
包文件夹中的 ApplicationData\LocalFolder 子文件夹。为了
现有桌面应用程序，默认用户数据文件夹是 exe 路径
您的应用程序 + .WebView2。我们不使用默认值，而是
建议您指定一个用户数据文件夹，并创建它
在存储所有其他应用数据的同一文件夹中。
注意：写入%ProgramFiles% 或%ProgramFiles(x86)% 需要管理员权限 - 不建议将数据存储在此位置。
如果希望以编程方式初始化CoreWebView2，则必须在设置WebView2 控件的Source 属性之前对其进行初始化。如果CoreWebView2 未初始化，设置Source 将导致它被初始化。初始化CoreWebView2 后，再次尝试初始化将无效。
更多信息请参见EnsureCoreWebView2Async。
如果您想指定用户数据文件夹的位置，请添加以下函数：
Private Async Function InitializeCoreWebView2Async(Optional userDataFolder As String = "") As Task
Dim options As CoreWebView2EnvironmentOptions = Nothing
Dim cwv2Environment As CoreWebView2Environment = Nothing
'it's recommended to create the userDataFolder in the same location
'that your other application data is stored (ie: in a folder in %APPDATA%)
'if not specified, we'll create a folder in %TEMP%
If String.IsNullOrEmpty(userDataFolder) Then
userDataFolder = Path.Combine(Path.GetTempPath(), System.Reflection.Assembly.GetExecutingAssembly().GetName().Name)
End If
'create WebView2 Environment using the installed or specified WebView2 Runtime version.
'cwv2Environment = Await CoreWebView2Environment.CreateAsync("C:\Program Files (x86)\Microsoft\Edge Dev\Application\1.0.1054.31", userDataFolder, options)
cwv2Environment = Await CoreWebView2Environment.CreateAsync(Nothing, userDataFolder, options)
'initialize
Await WebView21.EnsureCoreWebView2Async(cwv2Environment)
End Function
然后将Form1_Load 的代码替换为以下内容：
注意：请务必使用await 确保在设置 Source 属性之前完成初始化（即：导航到 URL）。在下面的代码中，userDataFolder 将在以下位置创建：C:\Temp\（例如：C:\Temp\WebView2Test）。
Private Async Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
LogMsg("MS Edge Version: " + CoreWebView2Environment.GetAvailableBrowserVersionString())
'initialize
'Await InitializeCoreWebView2Async()
Await InitializeCoreWebView2Async(Path.Combine("C:\Temp", System.Reflection.Assembly.GetExecutingAssembly().GetName().Name))
If Not String.IsNullOrEmpty(textBoxAddressBar.Text) Then
'navigate to URL
'WebView21.Source = New Uri(textBoxAddressBar.Text)
WebsiteNavigate(textBoxAddressBar.Text)
End If
End Sub
要执行 JavaScript，请参阅ExecuteScriptAsync。
资源：