WebView2 Deployment Visual Studio 安裝程式

這個範例 WV2DeploymentVSInstallerSample 示範如何使用 Visual Studio 安裝程式部署 WebView2 應用程式。

• 範例名稱： WV2DeploymentVSInstallerSample
• Repo directory： WV2DeploymentVSInstallerSample
• 解決方案檔案：未在倉庫中提供。 你可以依照以下步驟建立解決方案檔案。

為了示範如何在應用程式中部署 Evergreen WebView2 執行環境，本文說明如何使用 Microsoft Visual Studio 安裝程式專案擴充套件用於 Visual Studio。 你建立一個 Setup Project 類型的專案，來為 Win32 範例應用程式 (WebView2APISample) 建立安裝程式。 你建立的安裝程式會連鎖安裝 Evergreen WebView2 執行環境。

你先從倉庫編輯project.xml檔案，然後在 Visual Studio 裡，使用 Microsoft Visual Studio 安裝程式擴充功能的 Setup Project 專案範本來建立一個新專案。

此範例展示了幾種不同的部署方法：

• 透過連結下載 Evergreen WebView2 執行時啟動工具。
• 將 Evergreen WebView2 執行時啟動工具打包到你的應用程式中。
• 將 Evergreen WebView2 執行時獨立安裝程式與你的應用程式打包。

關於這些不同方法的資訊，請參閱「 部署常青 WebView2 執行環境 」中的「分 發你的應用程式」和「WebView2 執行環境」。

步驟 1 - 建置並執行 WebView2APISample

為了熟悉本範例所發佈的應用程式，並確保你的環境已準備好進行一般 Win32 WebView2 應用程式開發，請先在使用此部署範例前，先 (WebView2APISample) 建置並執行 Win32 範例應用程式。

1. 在 Win32 範例應用程式 中 (WebView2APISample) 執行步驟，然後繼續以下操作。

前置條件：如上所述，必須使用 Microsoft Visual Studio，並支援 C++。 Microsoft Visual Studio Code 不支援此 WV2DeploymentVSInstallerSample 範例。

上述頁面幫助你複製或下載 WebView2Samples 倉庫，並安裝支援 C++ 的 Visual Studio（如果還沒完成的話）。

步驟 2 - 安裝 Visual Studio 安裝程式專案

如果還沒完成，請安裝 Visual Studio 安裝程式專案：

1. 安裝 Microsoft Visual Studio 安裝程式專案，適用於 Visual Studio 2019。 請依照該頁面的步驟操作，然後返回此頁繼續以下步驟。

如果出現 「等待以下程序關閉 」的對話框，請關閉 Visual Studio。

步驟 3 - 編輯 product.xml 以設定如何分發 WebView2 執行環境

1. 打開 Visual Studio。 在開場畫面中，你可以點擊右下角的 「無程式碼繼續」 連結。

2. 打開你本地備份庫裡的以下獨立檔案： <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

   檔案在 GitHub 倉庫的位置： SampleApps/WV2DeploymentVSInstallerSample/product.xml

   

3. 檢查 product.xml。 有三 <PackageFile> 條線。 請仔細閱讀上面那三行的評論。 以下是對這些線條的簡化說明，並附有說明。

   第一 <PackageFile> 行使用 檔案 MicrosoftEdgeWebview2Setup.exe，即 Evergreen WebView2 執行時啟動工具，並指定一個 HomeSite 網站。 請使用這行來執行 方法一：透過連結下載 Evergreen WebView2 執行時啟動器：

   <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
   <!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->
   

   第二 <PackageFile> 行使用 file MicrosoftEdgeWebview2Setup.exe，即 Evergreen WebView2 執行時啟動工具。 請使用這行來執行 方法二：將 Evergreen WebView2 執行時啟動器與應用程式打包：

   <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

   第三 <PackageFile> 行使用 file MicrosoftEdgeWebView2RuntimeInstallerX64.exe，這是一個平台專屬的 Evergreen WebView2 執行時獨立安裝程式。 請使用此行執行 方法三：將 Evergreen WebView2 執行時獨立安裝程式與您的應用程式打包：

   <!-- Package the WebView Standalone Installer -->
   <!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->
   

4. 找出你使用的是哪種方法。 第二條路徑是預設;也就是說，使用 Approach 2 的那行在倉庫 product.xml 檔案中沒有註解。

5. 編輯 product.xml，請依以下步驟進行;請在下方三個部分中的一個步驟中完成。

方法一：透過連結下載 Evergreen WebView2 執行時啟動工具

如果你想讓應用程式下載 Evergreen WebView2 執行時導機， (MicrosoftEdgeWebview2Setup.exe 透過連結) ：

1. 在本 <PackageFiles CopyAllPackageFiles="false"> 區段內，請取消註解以下行 (保持長公鑰值) ，並註解其他行：

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>
   

2. PublicKey WebView2 執行時啟動器的數值可能會在未通知的情況下變動。 我們正在努力解決這個問題。 目前，你可能需要用更新PublicKey的數值替換。product.xml

3. 在 <Commands Reboot="Defer"> and </Commands> 區塊中，確保 PackageFile 指向 ， "MicrosoftEdgeWebview2Setup.exe" 讓 Visual Studio 安裝程式使用啟動器。

4. 儲存檔案。

方法二：將 Evergreen WebView2 執行時導機程式與應用程式打包

如果你想將 Evergreen WebView2 執行時啟動器 (MicrosoftEdgeWebview2Setup.exe) 打包在應用程式中：

1. 在該 <PackageFiles CopyAllPackageFiles="false"> 區塊中，取消註解以下行，並刪除其他行：

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

2. 在該 <Commands Reboot="Defer"> 區塊中，確保 PackageFile 指向 ， "MicrosoftEdgeWebview2Setup.exe" 讓 Visual Studio 安裝程式使用啟動程式。

3. 儲存檔案。

方法三：將 Evergreen WebView2 執行時獨立安裝程式與你的應用程式打包

如果你想將 Evergreen WebView2 執行時獨立安裝程式與應用程式打包：

1. 在該 <PackageFiles CopyAllPackageFiles="false"> 區塊中，取消註解以下行，並刪除其他行：

   <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />
   

2. 在 <Commands Reboot="Defer"> and </Commands> 區塊中，請確保 PackageFile 指向 "MicrosoftEdgeWebView2RuntimeInstallerX64.exe" ，讓 Visual Studio 安裝程式使用獨立安裝程式。

3. 如果你針對非 X64 裝置，請編輯 MicrosoftEdgeWebView2RuntimeInstallerX64 檔案名稱以反映正確的架構。

4. 儲存檔案。

步驟 4 - 下載 WebView2 啟動工具或獨立安裝程式

如果你想將 Bootstrapper (Approach 2) 或 Standalone Installer (Approach 3) 與應用程式一起打包，請依照本節步驟操作。 否則就跳到下一個主要的步驟部分。

1. 下載 Microsoft Edge WebView2 Bootstrapper 或獨立安裝程式。

2. 把下載的 Bootstrapper 或獨立安裝程式存到資料夾下面 <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ 。

步驟 5 - 將 WV2DeploymentVSInstallerSample 資料夾複製到 Packages 資料夾

此步驟適用於所有 (1、2或3) 方法。

1. 複製資料夾 <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ ，並貼到以下任一資料夾中：

   • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

   • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (至少需要 Visual Studio 2019 更新 7)

   典型路徑：<Visual Studio install dir>

   • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

步驟 6 - 在 Visual Studio 建立設定專案

1. 在 Visual Studio 中，選擇「新專案檔案>>」。 「 建立新專案 」視窗會跳出來。

2. 在 「搜尋範本 」的文字框中，輸入 設定專案，然後選擇 設定專案 範本。 務必選擇名稱完全相同的範本，如下所示：

   

3. 點擊 「下一個 」按鈕。

   「 配置您的新專案：設定專案 」對話框會開啟，如下所示。

4. 在 專案名稱 文字框中輸入名稱，例如 MyWin32WV2DeploySample。

5. 在 「位置 」文字框中，導向不在其他專案目錄中的地點，例如 <repo-path>\WebView2Samples\ 不在倉庫目錄中的地點。

   

6. 點擊 「建立 」按鈕。

   

步驟 7 - 將 WebView2 執行時加入為前提

1. 在 Visual Studio 的方案總管中，右鍵點擊你的專案，然後選擇屬性。 物件 頁面 對話框會打開。

2. 點擊 先修課程 按鈕：

   

3. 選擇 Edge WebView2 執行時 的勾選框。

   如果該核取方塊沒有列出，可能表示需要的檔案尚未被放入 Packages 資料夾。 檢查你使用的是哪種方法。 你可能需要依照上述步驟操作，步驟 4 - 下載 WebView2 Bootstrapper 或獨立安裝程式 ，以及 步驟 5 - 將 WV2DeploymentVSInstallerSample 資料夾複製到 Packages 資料夾。

4. 完成其他先修條件的勾選框。 然後點擊 確定 按鈕：

   

步驟八 - 建立設定專案

1. 按 F5 儲存並建立 Setup 專案。

另請參閱

• WV2DeploymentVSInstallerSample 的 README 檔案