加载中...
WPF混合开发之WebView2(二) WebView2的简单使用
发表于:2022-06-30 | 分类: WebView2
字数统计: 635 | 阅读时长: 2分钟 | 阅读量:

引言


在上一篇文章中,我们介绍了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. 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>

最后,附上一张运行截图

结语


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

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

下一篇:
WPF混合开发之WebView2(一) 简介及环境搭建
本文目录
本文目录