設定 WebView2 的開發環境

本文涵蓋 WebView2 開發開發環境的一般用途設定。 有些 使用者入門 教學課程會指向這裡進行初步設定步驟，然後新增平臺特定或專案特定的設定步驟。

安裝 Visual Studio

1. 安裝 Visual Studio 2015 或更新版本，例如 Visual Studio Professional 2019 或 Visual Studio 2022 Community 版本。 大部分的 WebView2 範例都是使用 Visual Studio 2019 來建立和測試。 如果使用 Visual Studio 2019 建立範例，您應該先在 Visual Studio 2019 中建置並執行範例，再使用 Visual Studio 2022 中的範例。

   WebView2 範例是專為 Microsoft Visual Studio 而設計，而不是 Microsoft Visual Studio Code。

   如果您要安裝 Visual Studio，您現在可以接受預設值;您可以按下 [ 安裝]，然後拒絕目前安裝工作負載。 當您稍後開啟特定 .sln 檔案時，Visual Studio 會提示您安裝適合平臺的工作負載。

安裝 Microsoft Edge 的預覽通道

在支援的操作系統上 (Beta、Dev 或 Canary) 安裝任何 Microsoft Edge 預覽通道：

• Windows 10
• Windows 11

若要這樣做，請移至 成為 Microsoft Edge 測試人員。 預覽頻道也稱為 測試人員頻道。

我們建議使用 Canary 通道。 最小必要版本為 82.0.488.0。

需要 Microsoft Edge 的預覽通道，才能使用 WebView2 SDK 的發行前版本。 發行前版本 SDK 可讓您針對最新的 API 測試您的應用程式，並試用最新的 API。

下載 WebView2Samples 存放庫

有兩個存放庫包含 WebView2 範例：

• WebView2Samples 存放庫
• WebView2Browser 存放庫

您可以下載存放庫作為 .zip 檔案，或複製存放庫。

• 如果您將存放庫 (下載為 .zip 檔案) ，您會取得存放庫的快照集復本。 您之後可以下載另一個已更新的存放庫複本。

• 如果您複製存放庫，您可以使用 git 命令或各種開發人員應用程式的功能來更新本地副本。

若要將存放庫 (下載為 .zip 檔案) ：

1. 在新視窗或索引標籤中開啟 WebView2Samples 存放庫 (或 WebView2Browser 存放庫) 。

2. 按兩下 GitHub 存放庫右上方的綠色 [ 程序代碼 ] 按鈕，然後按兩下 [ 下載 ZIP]。

   

   [ 下載] 彈出視窗會出現在 Microsoft Edge 中：

   

   在 Microsoft Edge 中，如果看不到 [下載 ] 彈出視窗，請按兩下 [ 設定及更多 (...) ]，然後按兩下 [ 下載]。

3. 在 [ 下載] 彈出視窗中，將滑鼠停留在 右 WebView2Samples-main.zip 側，然後按兩下 [ 在資料夾中顯示 ] (資料夾) 圖示。

   建議您不要按兩下 [ 開啟檔案 ] 鏈接，因為這會立即解壓縮 [下載] 區域中的檔案，這可能會讓您 (更困難，) 移至您所需的位置時速度會變慢。

4. 將檔案從 Downloads 目錄複製或剪下 WebView2Samples-main.zip 至一般目錄，例如 Documents。

5. 將檔案解壓縮， WebView2Samples-main.zip 並記下解壓縮檔案的位置。

   

6. 研究主要目錄的分組。

   -main 是這個下載的目錄快照集所代表的存放庫分支名稱。 您可以切換至 GitHub 的不同分支，然後下載，例如 。 WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip 在此情況下，下載的 .zip 檔案是存放庫分支的快照 smoketest-1.0.1054.27-prerelease-testing 集。 本檔假設您已 main 下載存放庫的 分支。

7. 建議：將根目錄從 WebView2Samples-main 重新命名為 WebView2Samples，以符合存放庫名稱和路徑。

複製 WebView2Samples 存放庫

您可以將存放庫下載為 .zip 檔案，或複製存放庫。

• 如果您將存放庫 (下載為 .zip 檔案) ，您會取得存放庫的快照集復本。 您之後可以下載另一個已更新的存放庫複本。

• 如果您複製存放庫，您可以使用 git 命令或各種開發人員應用程式的功能來更新本地副本。

若要複製 WebView2Samples 存放庫 (或 WebView2Browser 存放庫) ，您必須先安裝 git。 您可以如上所述下載存放庫，或加以複製。

安裝 git

1. 如果您想要將存放庫複製 WebView2Samples (，而不是) 下載，而且如果尚未安裝 git，請 下載 git 並加以安裝。

取得複製 WebView2Samples 存放庫的 URL

1. 在新的視窗或索引標籤中開啟 WebView2Samples 存放庫 。

2. 按兩下 GitHub 存放庫右上方的綠色 [ 程序代碼 ] 按鈕，選取 [ 複製]，然後按兩下 [ 複製 ] 圖示 (或選取文字框中的 [HTTPS URL] 字串，然後將它複製) 。

   

3. 決定要使用哪一種工具在本機複製存放庫：

   • Visual Studio
   • GitHub Desktop
   • Git Bash 殼層或命令提示字元

接下來，將 GitHub 存放庫複製到您的本機磁碟驅動器。 若要這樣做，請針對您想要使用的工具，遵循下列適當步驟。

使用 Visual Studio 複製存放庫

如果您想要使用 Visual Studio 將 GitHub 存放庫複製到本機磁碟驅動器：

1. 在 Visual Studio 中，選取 [檔案>複製存放庫]。

2. 輸入您從 GitHub 存放庫複製的 URL。

3. 從相同的對話框中，或在檔案總管公用程式中，您可以在可寫入的位置建立一般用途的根 git 或 GitHub 資料夾，然後選取該目錄，以便將存放庫複製到該處作為新目錄。

   例如，您可以在父資料夾中建立存放庫： C:\Users\myUserName\Documents\GitHub\，以便複製作業建立新的目錄 C:\Users\myUserName\Documents\GitHub\WebView2Samples。

您已將存放庫複製到本機磁碟驅動器。 跳至下一個主要區段。

使用 GitHub Desktop 複製存放庫

如果您想要使用 GitHub Desktop 將 GitHub 存放庫複製到本機磁碟驅動器：

1. 安裝 GitHub Desktop。

2. 在 GitHub Desktop 中，選取 [檔案>複製存放庫]。

3. 在 Visual Studio 或 GitHub Desktop 中，輸入您從 GitHub 存放庫複製的 URL。

4. 從相同的對話框中，或在檔案總管公用程式中，您可以在可寫入的位置建立一般用途的根 git 或 GitHub 資料夾，然後選取該目錄，以便將存放庫複製到該處作為新目錄。

   例如，您可以在父資料夾中建立存放庫： C:\Users\myUserName\Documents\GitHub\，以便複製作業建立新的目錄 C:\Users\myUserName\Documents\GitHub\WebView2Samples。

您已將存放庫複製到本機磁碟驅動器。 跳至下一個主要區段。

使用 Git Bash 殼層或命令提示字元複製存放庫

如果您要改為使用 Git Bash 殼層或命令提示字元來複製存放庫：

1. 將存放庫複製到本機磁碟驅動器，並輸入您從 GitHub 存放庫複製的 URL 字串：

   # example location where the repo directory will be added:
   cd c:/users/myusername/documents/github/
   git clone https://github.com/MicrosoftEdge/WebView2Samples.git
   

   

   目錄會建立在您指定路徑的本機磁碟驅動器上，如下圖所示：

   

   您已將存放庫複製到本機磁碟驅動器。

另請參閱:

• 複製存放庫 - GitHub 檔。
• 下載或複製DevTools範例程式代碼中的示範存放庫。
• 步驟 6：在安裝適用於 Visual Studio Code 的 DevTools 擴充功能中設定 localhost 伺服器。

在 Visual Studio 中開啟 WebView2Samples .sln檔案

複製或下載 WebView2Samples 存放庫之後，請在 Visual Studio 中開 .sln 啟檔案。

1. 在存放庫目錄結構的本地副本中，找出 .sln 檔案。 WebView2Samples 存放庫中的最上層自述檔提供類似的概觀。

2. .sln在 Visual Studio 中開啟檔案。 例如，開啟 WebView2Samples.sln的本地副本。 此存放庫的方案檔需要 Visual Studio，而不是 Visual Studio Code。

3. 開啟其中 .sln 一個檔案。 例如，開啟主要 Win32 解決方案檔案 WebView2Samples/SampleApps/WebView2Samples.sln的本地副本， ( 下載為 Microsoft Visual Studio 中的路徑 WebView2Samples-main/SampleApps/WebView2Samples.sln) 。 當您在 Visual Studio 中開啟該方案檔時，方案總管 包含下列專案：

   

針對一般初始開發環境設定，您可以從WebView2Samples存放庫開啟任何類型的.sln檔案：

• 目錄子目錄GettingStartedGuides中的平臺特定.sln檔案。 這些專案符合 使用者入門 教學課程，且已完成示範幾個 API 功能的範例。

• 在目錄中SampleApps包含多個平台專案的 Win32 .sln 檔案。 這是完整的 API 示範。

• 目錄子目錄SampleApps中的平臺特定.sln檔案。 這些是完整的 API 示範。

安裝 Visual Studio 工作負載

如果出現提示，請安裝 Visual Studio 工作負載。 當您在 Microsoft Visual Studio 2019 或 2022 中從複製或下載的WebView2Samples存放庫開.sln啟檔案時，可能會看到[無法開啟] 對話框。

1. 按兩下 [ 確定] 按鈕。 然後您可能會看到工作負載安裝程式，例如：

   。

2. 選取複選框，然後按下 [ 安裝 ] 按鈕。

   Visual Studio 安裝程式會針對平臺的工作負載執行：

   。

   [移轉報告記錄檔] 頁面可能會開啟，例如在 file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm：

   

   若要縮放，請以滑鼠右鍵按兩下 > [在新索引卷標中開啟影像]。

   上圖是 -main 存放庫下載檔的目錄後綴 .zip ，如果您複製了存放庫，則不存在。

   Visual Studio 會在 方案總管 中開啟選取.sln的檔案：

   

安裝或更新 WebView2 SDK

WebView2 SDK 包含由 Microsoft Edge 支援的 WebView2 控制件，可讓您將 Web 技術 (HTML、CSS 和 JavaScript) 內嵌在原生應用程式中。

您會為每個檔案的每個 .sln 項目節點安裝一次 WebView2 SDK。 WebView2 SDK 安裝僅適用於其安裝的專案。

您不需要從 nuget.org 下載 Microsoft.Web.WebView2 SDK NuGet 套件，而是透過 Visual Studio 中的 [NuGet 套件管理員] 面板安裝 WebView2 SDK NuGet 套件。 複製或下載 WebView2Samples 存放庫之後，您接著會在 Visual Studio 中開啟其中一個存放庫 .sln 檔案，然後以滑鼠右鍵按兩下方案內的項目節點。 您可以使用 [NuGet 套件管理員] 面板將 SDK 安裝 Microsoft.Web.WebView2 為 NuGet 套件。

Microsoft.Web.WebView2 SDK 可在發行版和發行前版本中使用。 若要開始使用，建議使用發行版。

安裝或更新發行前版本 WebView2 SDK，如下所示：

1. .sln在 Visual Studio 中開啟檔案。 例如，開啟 WebView2Samples.sln的本地副本。 此存放庫的方案檔需要 Visual Studio，而不是 Visual Studio Code。

2. 在 方案總管 中，以滑鼠右鍵按兩下方案的項目節點，例如 WebView2GettingStarted 項目節點 (不是方案節點) ，然後選取 [管理 NuGet 套件]。

   下圖顯示特定.sln檔案和專案;使用您要安裝 SDK 的任何項目：

   

   [NuGet 套件管理員] 索引標籤會在 Visual Studio 中開啟。

3. 在 [NuGet] 視窗中，按兩下 [ 瀏覽] 索引標籤 。

4. 在搜尋列右側，清除 [ 包含發行前版本 ] 複選框，或如果您想要包含實驗性 API 的 SDK 發行前版本，請加以設定。

5. 在左上方的搜尋列中，輸入 Microsoft.Web.WebView2。

6. 在搜尋列下方，按下 Microsoft.Web.WebView2 卡 片。

7. 在右窗格中，按兩下 [ 安裝 (] 或 [ 更新) ] 按鈕。 NuGet 會將 WebView2 SDK 下載到您的電腦，供此專案使用。

   

   若要縮放，請以滑鼠右鍵按兩下 > [在新索引卷標中開啟影像]。

8. 關閉 [NuGet 套件管理員] 索引 標籤。

現在已安裝 WebView2 SDK，因此您的開發環境現在已設定為將 WebView2 功能新增至 WebView2 應用程式。

另請參閱:

• NuGet.org > Microsoft.Web.WebView2 SDK

更新 WebView2 運行時間

若要更新開發計算機和用戶電腦上的 WebView2 運行時間，請參閱 散發您的應用程式和 WebView2 運行時間。

另請參閱

• 複製存放庫 - GitHub 檔。
• 下載或複製DevTools範例程式代碼中的示範存放庫。
• 步驟 6：在安裝適用於 Visual Studio Code 的 DevTools 擴充功能中設定 localhost 伺服器。