.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

  WebView2组件支持在WinForm、WPF、WinUI3、Win32应用程序中集成加载Web网页功能应用。本篇主要介绍如何在WinForm程序中集成WebView2组价的详细过程。

准备工作

1、安装Visual Studio,建议安装Visual Studio 2022 。

2、安装 WebView2 运行时。下载地址:https://developer.microsoft.com/zh-cn/microsoft-edge/webview2

     关于WenView2运行时版本信息,请参考我的博客《.NET桌面程序应用WebView2组件集成网页开发5 WebView2运行时与分发应用》

步骤1 新建WinForm项目

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

第①种项目支模板持.NET Core、.NET5、.NET6等。

第②种项目模板仅支持.NET Framework。

这里选择第一种项目模板。

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

骤2 安装 WebView2 SDK

NuGet中搜索WebView2

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

提供了如下详细的版本

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件 .NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件 .NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

如果用于生产环境,建议使用稳定版(没有标记-prerelease),学习研究时可以使用预发行版。

选择最新稳定版进行安装,安装成功后,项目的包中添加了 1.0.1185.39 版本的 SDK。

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

步骤3  设置页面功能

1、顶部区域放置了一个文本框,用于输入目标网址。右侧“访问”按钮用于导航到目标网址。

2、顶部区域WebView2控件用于加载目标网址内容。

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

步骤4 实现导航逻辑

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

运行效果如下:

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

两种导航方式都可以成功

webView2.CoreWebView2.Navigate(url);

webView2.Source = new Uri(url);

特别提醒:输入的URL地址,如果不是以http:// 或者https:// 开头则会运行报错

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

点击【访问】按钮

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

异常: 无效的URI:无法确定URI的格式。

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

异常:值不在预期范围内。

更友好的做法是自动判断,并补全URL前缀

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

再次测试

.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件

发表评论

相关文章