快捷導(dǎo)航

WPF中使用WebView2控件的方法及常見問題

更新時間：2023年02月09日 15:42:10 作者：陳明亮

WebView2為WPF網(wǎng)頁瀏覽工具,具有簡單易用,頁面顯示清晰的優(yōu)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于WPF中使用WebView2控件的方法及常見問題,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

WebView2簡介

概述

WebView2 全稱 Microsoft Edge WebView2 控件，此控件的作用是在本機(jī)桌面應(yīng)用中嵌入web技術(shù)（html，css，javascript），從名字就可以看出來WebView2使用了Edge內(nèi)核渲染web內(nèi)容。

通俗來說，WebView2控件是一個UI組件，允許在桌面應(yīng)用中提供web能力的集成，即俗稱的混合開發(fā)。

優(yōu)勢

助力程序開發(fā)和維護(hù)：相比桌面應(yīng)用開發(fā)，一般來說web技術(shù)更加的靈活
無需升級：以往增加了新功能都需要升級客戶現(xiàn)場的桌面應(yīng)用程序，引入web技術(shù)之后，省去了升級的煩惱
擴(kuò)展web應(yīng)用：補(bǔ)足了web技術(shù)的短板，不能或者很難和宿主機(jī)交互，訪問操作系統(tǒng)api。

支持的運(yùn)行時平臺

Win32 C/C++
.NET Framework 4.5 或更高版本
.NET Core 3.1 或更高版本
.NET 5
.NET 6
WinUI 2.0
WinUI 3.0

進(jìn)程模型

當(dāng)在WPF程序中引入 WebView2 控件后，WPF程序和WebView2控件的進(jìn)程模型如下：

WPF程序進(jìn)程和WebView2控件是進(jìn)程隔離的
維護(hù)WebView2運(yùn)行的實(shí)際是一組進(jìn)程

基本使用

本文代碼基于 .NetFramework 4.8

安裝WebView2運(yùn)行時

開發(fā)之前需要先安裝WebView2的運(yùn)行時。

同理，當(dāng)程序開發(fā)完畢，在客戶機(jī)器上面部署WPF應(yīng)用程序的時候也應(yīng)該先安裝WebView2運(yùn)行時，此部分將放在部署環(huán)節(jié)詳細(xì)討論。

有三種方式安裝WebView2運(yùn)行時：

常青版引導(dǎo)程序：就是一個小的引導(dǎo)程序，方便傳輸，但是下載的時候需要公網(wǎng)環(huán)境。WebView2運(yùn)行時實(shí)際通過此引導(dǎo)程序完成安裝。
常青版獨(dú)立安裝程序：完整安裝包，可離線安裝
已修復(fù)版本：特定版本安裝

WebView2運(yùn)行時下載：https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

安裝WebView2Sdk

通過 Nuget 安裝

名字：Microsoft.Web.WebView2
安裝命令：NuGet\Install-Package Microsoft.Web.WebView2 -Version 1.0.1518.46
作者：Microsoft

打開一個網(wǎng)頁

新建WPF應(yīng)用程序，并通過如下代碼在Window中添加WebView2 XAML 的命名空間。

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

引入WebView2控件，并設(shè)置 Source 屬性為 https://www.microsoft.com

? <Grid>
??????? <wv2:WebView2 Name="wv2"???? Source="https://www.microsoft.com"?? />
??? </Grid>

運(yùn)行程序，將可以看到WPF程序中打開了巨硬官網(wǎng)

通過代碼控制打開的網(wǎng)頁

private void Window_Loaded(object sender, RoutedEventArgs e)
 {
????this.wv2.Source = new Uri("http://baidu.com");
}

導(dǎo)航事件

導(dǎo)航事件是巨硬官方的一個叫法，通俗來說就是在WebView2中打開一個網(wǎng)址的步驟。

打開一個網(wǎng)頁的過程

NavigationStarting：開始導(dǎo)航，導(dǎo)航生成網(wǎng)絡(luò)請求。主機(jī)可能會在事件期間禁止請求
SourceChanged：開始導(dǎo)航，導(dǎo)航生成網(wǎng)絡(luò)請求。主機(jī)可能會在事件期間禁止請求
ContentLoading：開始加載新頁面的內(nèi)容。
HistoryChanged：歷史記錄更新
BasicAuthenticationRequested
DOMContentLoaded：完成對 DOM 內(nèi)容的分析，但尚未完成加載頁面上的所有圖像、腳本和其他內(nèi)容。
NavigationCompleted：完成在新頁面上加載內(nèi)容。

可通過委托的方式攔截各個事件：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
? ? this.wv2.Source = new Uri("http://baidu.com");
? ? //this.wv2.Source = new Uri("about:blank");
? ? //導(dǎo)航開始
? ? this.wv2.NavigationStarting += wv2_NavigationStarting;
? ? //源已經(jīng)更改
? ? this.wv2.SourceChanged += Wv2_SourceChanged;
? ? //內(nèi)容加載中
? ? this.wv2.ContentLoading += Wv2_ContentLoading;
? ? //導(dǎo)航結(jié)束
? ? this.wv2.NavigationCompleted += Wv2_NavigationCompleted;
}
private void Wv2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
? ? throw new NotImplementedException();
}
private void Wv2_ContentLoading(object sender, CoreWebView2ContentLoadingEventArgs e)
{
? ? throw new NotImplementedException();
}
private void Wv2_SourceChanged(object sender, CoreWebView2SourceChangedEventArgs e)
{
? ? throw new NotImplementedException();
}
private void wv2_NavigationStarting(object sender, CoreWebView2NavigationStartingEventArgs e)
{
? ? throw new NotImplementedException();
}

更改url的過程

更改url的過程依然遵循上述步驟，只是稍微復(fù)雜了一些.

空url

某些情況下，可能需要一個默認(rèn)的頁面，那么空url是一個很好的選擇。

this.wv2.Source = new Uri("about:blank");

進(jìn)階使用

WPF和Web通信

概述

當(dāng)web頁面中點(diǎn)擊一個按鈕需要通知WPF宿主程序，或者向WPF傳遞一些指令和數(shù)據(jù)的時候，需要用到 postMessage 和 WebMessageReceived 。

postMessage 是 js 方法，位于 window.chrome.webview.postMessage ，當(dāng)需要向WPF程序發(fā)送數(shù)據(jù)的時候，只需要調(diào)用此方法，并傳遞參數(shù)就可以。此方法僅在WebView2控件內(nèi)部有用，在Edge中調(diào)用將報異常（Cannot read properties of undefined 'postMessage'）
WebMessageReceived 是 c# 事件，位于 Microsoft.Web.WebView2.Wpf.WebView2?？赏ㄟ^委托此事件來接收web網(wǎng)頁中發(fā)送過來的消息。

Html代碼示例

<!DOCTYPE html>
<html>
<head>
? ? <meta charset=utf-8 />
? ? <title>TestWebView2</title>
</head>
<body>
? ? </br></br></br></br></br>
? ? <button type="button" onclick="postMsg()">給WPF宿主程序發(fā)送msg</button>
? ? <script>
? ? ? ? window.onload = function () {
? ? ? ? ? ? //alert("onload-success");
? ? ? ? }
? ? ? ? function postMsg() {
? ? ? ? ? ? var args = "msg ，from webView2";
? ? ? ? ? ? window.chrome.webview.postMessage(args);
? ? ? ? ? ? alert("發(fā)送成功，內(nèi)容：" + args);
? ? ? ? }
? ? </script>
</body>
</html>

C#代碼示例

private void Window_Loaded(object sender, RoutedEventArgs e)
{
? ? //this.wv2.Source = new Uri("http://baidu.com");
? ? //this.wv2.Source = new Uri("about:blank");
? ? this.wv2.Source = new Uri("file:///E:/code/WPF/ramble-wpf/RambleWPF/html/PostMessage.html");
? ? this.wv2.WebMessageReceived += Wv2_WebMessageReceived;
}
private void Wv2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
? ? //接收到的字符串
? ? string msg = e.TryGetWebMessageAsString();
? ? //接收到的json
? ? string msgJson = e.WebMessageAsJson;
}

常見問題

解決程序安裝到C盤導(dǎo)致Webview2無法打開網(wǎng)頁問題

現(xiàn)象

如果將源代碼放到C盤并在VS中調(diào)試或者將打包好的程序放到C盤啟動，都會發(fā)生無法打開網(wǎng)頁的問題。

原因

此問題的原因是文件權(quán)限問題，WebView2在工作的時候需要指定一個文件夾來存放臨時文件和數(shù)據(jù)，即UserDataFloder，需要此文件夾的讀寫權(quán)限。若不顯示指定udf，將會在程序啟動文件同級目錄新建一個 RambleWPF.exe.WebView2 的文件夾存放臨時文件，RambleWPF為WPF應(yīng)用程序的名字。

解決辦法

解決辦法有兩個：

顯示指定非系統(tǒng)盤下文件夾作為UDF。比如D:\wvUDF ，需要確保此盤符一定存在，還有特殊的情況，有些操作系統(tǒng)的系統(tǒng)盤可能不是C盤，而是D盤。
程序啟動的時候修改默認(rèn)UDF的文件夾權(quán)限，這個方法看起來有趣，但是可以做到一勞永逸，因?yàn)榉椒?總有破綻。

顯示指定UDF

通過設(shè)置 WebView2控件的CreationProperties屬性可以實(shí)現(xiàn)自定義UDF。

需要注意的是，必須在WebView2.CoreWebView2對象初始化之前設(shè)置UDF，那么CoreWebView2對象什么時候初始化呢？有以下方式：

在xaml中設(shè)置 WebView2 的Source 屬性
在代碼中手動設(shè)置 Source，如 this.wv2.Source= new Uri("http://baidu.com")
調(diào)用 WebView2.EnsureCoreWebView2Async 方法

示例代碼如下：

public partial class WebView2Demo : Window
{
? ? public WebView2Demo()
? ? {
? ? ? ? InitializeComponent();
? ? ? ? InitializeAsync();
? ? }
? ? async void InitializeAsync()
? ? {
? ? ? ? wv2.CreationProperties = new Microsoft.Web.WebView2.Wpf.CoreWebView2CreationProperties
? ? ? ? {
? ? ? ? ? ? UserDataFolder = "D:\\A\\wvUDF"
? ? ? ? };
? ? ? ? await wv2.EnsureCoreWebView2Async();
? ? }
? ? private void Window_Loaded(object sender, RoutedEventArgs e)
? ? {
? ? ? ? this.wv2.Source = new Uri("http://baidu.com");
? ? }
}

提升默認(rèn)UDF文件夾權(quán)限

在程序啟動的時候提升默認(rèn)UDF的讀寫權(quán)限

示例代碼如下：

/// <summary>
/// 給 WebView2Bug.exe.WebView2 文件夾賦予寫入權(quán)限
/// </summary>
private void InitWebView2DirAccess()
{
? ? try
? ? {
? ? ? ? string path = AppDomain.CurrentDomain.BaseDirectory;
? ? ? ? string webview2DataDir = path + "WebView2Bug.exe.WebView2";
? ? ? ? DirectoryInfo dir = new DirectoryInfo(webview2DataDir);
? ? ? ? System.Security.AccessControl.DirectorySecurity security = dir.GetAccessControl();
? ? ? ? //給文件夾追加 Everyone 的寫入權(quán)限
? ? ? ? security.AddAccessRule(new System.Security.AccessControl.FileSystemAccessRule("Everyone", System.Security.AccessControl.FileSystemRights.Write, AccessControlType.Allow));
? ? ? ? dir.SetAccessControl(security);
? ? }
? ? catch (Exception ex)
? ? {
? ? ? ? string ?msg = ex.Message;
? ? }
}

上述代碼有點(diǎn)偏激，僅作為參考，實(shí)際開發(fā)中，不應(yīng)該為EveryOne 用戶提升如此大的權(quán)限。