WinUI 2 (UWP) 範例應用程式

發行項
03/29/2023

此 WebView2 範例示範如何使用 WebView2 控制項和 WebView2 API，在 WinUI 2 (UWP) 應用程式中實作網頁瀏覽器。

範例名稱： webview2_sample_uwp
存放庫目錄： webview2_sample_uwp
方案檔： webview2_sample_uwp.sln

已安裝的 NuGet 套件

此範例包含下列 NuGet 套件：

Microsoft.NETCore.UniversalWindowsPlatform
Microsoft.UI.Xaml - 發行前 版本 - 包含 Microsoft.Web.WebView2 SDK 作為相依性。

為了示範最新功能，WebView2Samples 存放庫中的這個範例已設定為使用發行前版本的 WinUI 2 SDK (在 NuGet 套件管理員) 中列為 Microsoft.UI.Xaml ，而不是穩定版本。 WinUI 2 SDK 包含相容版本的 WebView2 SDK，作為 Microsoft.UI.Xaml的相依性。

另請參閱讀我檔案以取得webview2_sample_uwp。

步驟 1 - 安裝 Visual Studio

需要 Microsoft Visual Studio。此範例不支援 Microsoft Visual Studio Code。

如果尚未安裝 Visual Studio (最低必要版本) ，請在個別的視窗或索引標籤中，參閱在設定 WebView2 的開發環境中安裝 Visual Studio。遵循該節中的步驟，然後返回此頁面並繼續執行下列步驟。

步驟 2 - 安裝 Microsoft Edge 的預覽通道

如果尚未在個別視窗或索引標籤中安裝 Microsoft Edge (Beta、Dev 或 Canary) 的預覽通道，請參閱在設定 WebView2 的開發環境中安裝 Microsoft Edge 的預覽通道。遵循該節中的步驟，然後返回此頁面並繼續執行下列步驟。

步驟 3 - 複製或下載 WebView2Samples 存放庫

如果尚未完成，請將存放庫複製或下載 WebView2Sample 到本機磁片磁碟機。在個別的視窗或索引標籤中，請參閱為WebView2 設定開發環境中的下載 WebView2Samples 存放庫。請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 4 - 在 Visual Studio 中開啟解決方案

在本機磁片磁碟機上 .sln ，在 Visual Studio 的目錄中開啟檔案：
- <your-repos-directory>/WebView2Samples/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln
或：
- <your-repos-directory>/WebView2Samples-main/SampleApps/webview2_sample_uwp/webview2_sample_uwp.sln

步驟 5 - 出現提示時安裝工作負載

如果出現提示，請安裝任何要求的 Visual Studio 工作負載。在個別的視窗或索引標籤中，請參閱為WebView2 設定開發環境中的安裝 Visual Studio 工作負載。請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 6 - 使用預先安裝的套件建置和執行專案

方案總管顯示webview2_sample_uwp專案：

在 visual Studio 中開啟的webview2_sample_uwp範例方案總管

使用存放庫範例中安裝的 NuGet 套件版本，建置並執行專案：

在 [ 方案組態] 下拉式清單中，選取設定，例如 [偵錯]。
在 [ 解決方案平臺] 下拉式清單中，選取平臺，例如 x64。
在方案總管中，以滑鼠右鍵按一下webview2_sample_uwp專案，然後選取 [建置]。

專案會建置。
選取 [偵錯>開始偵錯] (F5) 。

空的格線視窗一開始會出現一段時間：

範例應用程式視窗接著會顯示網頁內容：
在 Visual Studio 中，選取 [偵錯>停止偵錯]。 Visual Studio 會關閉應用程式。

接下來，根據下列各節更新專案的 NuGet 套件。

步驟 7 - 更新 NuGet 套件

在此步驟中，我們將更新專案的 NuGet 套件，以取得 WinUI 2 SDK 的最新發行前版本。 WinUI 2 SDK 包含相容的發行前版本或 WebView2 SDK 發行版本。

更新專案的 NuGet 套件：

在 Visual Studio 的方案總管中，以滑鼠右鍵按一下webview2_sample_uwp專案， (非其上方的方案節點) ，然後選取 [管理 NuGet 套件]。

[NuGet 套件管理員]面板會在 Visual Studio 中開啟。
在 NuGet 套件管理員中，按一下 [ 已安裝] 索引卷 標。
選取 [ 包含發行前版本] 核取方塊。

列出 Microsoft.UI.Xaml 套件的發行前版本，指出 WinUI 2 SDK。 Microsoft.UI.Xaml套件包含 WebView2 SDK;Microsoft.Web.WebView2列在Microsoft.UI.Xaml套件的 [相依性] 區段中。更新 Microsoft.UI.Xaml 套件也會導致對相容的 WebView2 SDK 進行更新。
在[NuGet 套件管理員]中，按一下[更新] 索引標籤。
按一下左邊的 Microsoft.UI.Xaml 卡片。
在 [ 版本] 文字方塊中，確定已選取 [最新發行前版本 ]。
按一下右側的 [ 更新 ] 按鈕：

取得最新的套件之後，可能需要幾分鐘的時間，[ 預覽變更 ] 對話方塊隨即開啟。 Microsoft.Web.WebView2 (WebView2 SDK) 會分別列在 [ 預覽變更 ] 對話方塊中：
按一下 [ 確定] 按鈕。
[ 接受授權 ] 對話方塊隨即出現：
按一下 [ 我接受] 按鈕。在 Visual Studio 中 readme.txt ，檔案隨即顯示，指出您已安裝 WinUI 套件：

讀我檔案會列出一些類似我們將新增的程式程式碼。
使用類似的步驟更新 Microsoft.NETCore.UniversalWindowsPlatform NuGet 套件。

取得最新的 UWP 套件之後，可能需要幾分鐘的時間，[ 預覽變更 ] 對話方塊隨即出現：
選取 [全部儲存檔>案]。

您現在已為專案安裝 Microsoft.UI.Xaml 套件，也就是 WinUI (WinUI 2) 。檢查產生的已安裝套件，如下所示：
在 [NuGet 套件管理員] 中，按一下 [ 已安裝 ] 索引標籤，然後檢查更新的套件：
- Microsoft.NETCore.UniversalWindowsPlatform
- Microsoft.UI.Xaml - 發行前版本
關閉 [NuGet 套件管理員] 視窗。