WPF混合开发之WebView2(二) WebView2的简单使用_wpf webview2

引言

在上一篇文章中，我们介绍了WebView2的环境搭建,点此前往，在这一章节，我们将使用WebView2简单搭建一个WPF程序，在程序中加载百度搜索页面，废话不多说，直接上流程。

工程建立及WebView2包安装

建立WPF工程

建立WPF工程步骤很简单，在此不再截图，直接上步骤：

1. 打开Visual Stido 2022（博主使用的是vs 2022,其他版本也可）
2. 选择创建新项目
3. 在项目模板处选择WPF应用程序
4. 输入项目名称
5. 选择项目框架
6. 创建完成

选择版本时需要注意，vs 2022中有两种WPF工程模板：WPF应用程序和WPF应用，其中WPF应用程序是使用.net core/.net 6框架的，WPF应用使用.Net Framework框架，大家根据自己的需求创建即可

安装WebView2 Nuget包

1. 打开Nuget包管理器：选中项目->右键->选择“管理NuGet程序包”。
   

2. 在浏览选项卡中搜索WebView2包，选择Microsoft.Web.WebView2包，并点击安装。
   

使用WebView2控件

1. 打开项目中的MainWindow.xaml文件，然后添加WebView2的命名空间：

xmlns:webview2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
1

2. 在Grid控件中，添加WebView2控件，并填写Source属性，这个属性是用来标识加载的网址，在这里我们填入百度的网址。

<Window x:Class="WebViewDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:webview2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <webview2:WebView2 Source="https://www.baidu.com" />
    </Grid>
</Window>

1
2
3
4
5
6
7
8
9
10
11
12
13

最后，附上一张运行截图

结语

至此，一个简单使用WebView2加载网页的Demo就已经完成，可以看出WebView2整体使用是比较简单的，也没有比较复杂的配置，其Nuget包提交也较小，在使用简单使用上比CefSharp还是有一定优势的，后续我们将深入使用WebView2,实现一些复杂功能，敬请期待！

使用WebView2的相关代码已经上传至GitHub中，有需要的可以自行下载，码字不易，顺手给个 Star 吧！

欢迎关注博主个人博客，有更多精彩内容哦！