共用方式為

WiX 自訂動作以部署 WebView2 執行環境

此範例 WV2DeploymentWiXCustomActionSample 示範如何使用 WiX 自訂動作部署 WebView2 執行環境。

為了幫助你了解如何將 Evergreen WebView2 執行環境部署到你的應用程式中，這個範例為 WebView2APISample 建立了一個 WiX 安裝程式，並使用 WiX 自訂動作來串接安裝 Evergreen WebView2 執行環境。

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

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

步驟 1 - 安裝支援 C++ 的 Visual Studio 2019

必須使用 Microsoft Visual Studio。 本範例不支援 Microsoft Visual Studio Code。

  1. Visual Studio - 若尚未安裝 Visual Studio 2019 (支援 C++ 的最低) 版本，請在獨立視窗或分頁中查看「安裝 Visual Studio」的「設置你的開發環境」中的「安裝 Visual Studio」。 請依照該部分的步驟安裝支援 C++ 的 Visual Studio 2019，然後返回本頁繼續以下步驟。

步驟 2 - 安裝 WiX 工具組建置工具

如果還沒完成，請安裝 WiX 工具組：

  1. 在新視窗或分頁中，前往 WiX 工具組 ，然後下載 WiX 工具組建置工具。

  2. 點選檔案， wixnnn.exe 然後點 選開啟檔案。

    可能會開啟一個對話框，需要啟用 .NET Framework 3.5.1：

    需要 .NET Framework 對話框

    如果您的機器已經啟用了 .NET Framework 3.5.1，請跳過繼續安裝這個 WiX 元件。

  3. 點擊 確定 按鈕。 WiX 安裝程式視窗關閉。

  4. 按下 Windows 標誌鍵，輸入 Windows 功能，然後按下 Enter。 螢幕上會出現 「開啟或關閉 Windows 功能 」的對話框。

  5. 選擇包含 .NET 2.0 和 3.0) 的 3.5 .NET Framework (

    開啟或關閉 > Windows 功能 .NET Framework 3.5

    你不需要選擇子項目。

  6. 按一下確定。 你可能會被提示是否允許 Windows Update 下載檔案。

    欲了解更多資訊，請參閱「在 Windows 11、Windows 10、Windows 8.1 及 Windows 8 上安裝 .NET Framework 3.5」。

  7. 啟用 .NET Framework 3.5.1 後，再次執行該wixnnn.exe檔案。 例如，在 Microsoft Edge 中，點選設定及更多，點選下載，然後點擊下方wix311.exe的「開啟檔案」。

  8. 點選 WiX 安裝程式的 安裝 面板。

  9. 在 使用者帳戶控制中，點擊 「是」 按鈕。 WiX 安裝程式的頂部顯示「成功安裝」。

另外，安裝 WiX Visual Studio 元件，詳見下一節。

步驟 3 - 安裝 WiX 工具組 Visual Studio 擴充功能

如果還沒完成，請安裝 WiX 工具組 Visual Studio 2019 擴充功能：

  1. 在新視窗或分頁中，進入 WiX 工具組 ，然後下載並安裝擴充功能：

    • WiX 工具組 Visual Studio 2019 擴充功能 - 已下載的安裝程式檔案： Votive2019.vsix

  2. 在 使用者帳戶控制中，點擊 「是」 按鈕。 VSIX 安裝程式用於 WiX Visual Studio 擴充功能開啟：

    WiX Visual Studio 2019 擴充功能的 VSIX 安裝程式

  3. 點擊 安裝 按鈕。

  4. 如果有 等待程序關閉的 VSIX 對話框打開，請關閉 Visual Studio。 VSIX 安裝人員繼續進行。

    VSIX 安裝程式顯示 安裝完成：

    VSIX 安裝程式 - 安裝完整 - WiX 工具組 Visual Studio 2019 擴充套件

  5. 在 VSIX 安裝程式中，點擊 關閉 按鈕。

  6. 在 WiX 安裝程式中，點選 退出 面板。

步驟 4 - 複製 WebView2Samples 儲存庫

  1. 如果還沒做，請將倉庫複製 WebView2Samples 到你的本地硬碟。 在另一個視窗或分頁中，請參考「為 WebView2 設定你的開發環境，Clone the WebView2Samples repo」。 請依照該部分的步驟操作，然後返回此頁繼續下方。

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

  1. 在你本機的 WebView2Samples 倉庫中，用 Visual Studio 開啟 <repo-location>\WebView2Samples\SampleApps\WebView2Samples.sln (不要Visual Studio Code) 。

步驟 6 - 編輯 Product.wxs 以設定如何分發 WebView2 執行環境

  1. 在專案下方WV2DeploymentWiXCustomActionSample開啟Product.wxs。

  2. 根據你想採用哪種方法，補充 Product.wxs 說明：

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

  1. 在 <!-- Step 4: Config Custom Action to download/install Bootstrapper -->下，取消註解 <CustomAction Id='DownloadAndInvokeBootstrapper' ...> 下方 <!-- [Download Bootstrapper] ... -->元素。

  2. 請留言其他<Binary>元素<CustomAction>Step 4。

  3. 在 <!-- Step 5: Config execute sequence of custom action -->下，取消註解 <Custom Action='DownloadAndInvokeBootstrapper' ...> 下方 <!-- [Download Bootstrapper] ...-->元素。

  4. 請在下方註解其他 <Custom> 元素 Step 5。

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

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

  1. 在 <!-- Step 4: Config Custom Action to download/install Bootstrapper -->下，取消註解<Binary Id="MicrosoftEdgeWebview2Setup.exe" ...>下方<!-- [Package Bootstrapper] ... -->的<CustomAction Id='InvokeBootstrapper' ...>元素。

  2. 請留言其他<Binary>元素<CustomAction>Step 4。

  3. 在 <!-- Step 5: Config execute sequence of custom action -->下，取消註解 <Custom Action='InvokeBootstrapper' ...> 下方 <!-- [Package Bootstrapper] ...-->元素。

  4. 請在下方註解其他 <Custom> 元素 Step 5。

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

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

  1. 在 <!-- Step 4: Config Custom Action to download/install Bootstrapper -->下，取消註解<Binary Id="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" ...>下方<!-- [Package Standalone Installer] ... -->的<CustomAction Id='InvokeStandalone' ...>元素。

  2. 請留言其他<Binary>元素<CustomAction>Step 4。

  3. 如果你的目標裝置是非 X64 的，你也可以編輯 MicrosoftEdgeWebView2RuntimeInstallerX64 檔名以反映正確的架構。

  4. 在 <!-- Step 5: Config execute sequence of custom action -->下，取消註解 <Custom Action='InvokeStandalone' ...> 下方 <!-- [Package Standalone Installer] ...-->元素。

  5. 請在下方註解其他 <Custom> 元素 Step 5。

步驟 7 - 在資料夾中放入 bootstrapper 或安裝程式

如果你打算將 Bootstrapper (Approach 2) 或 Standalone Installer (Approach 3) 與應用程式打包：

  1. 下載 Bootstrapper 或獨立安裝程式。 在 Microsoft Edge WebView2 頁面，點擊 立即下載，往下滑至 下載 WebView2 執行時 區塊。

  2. 將下載的 Bootstrapper 或獨立安裝程式放在包圍 SampleApps 資料夾下方。

步驟八 - 建立安裝程式專案

  1. 建立專案 WV2DeploymentVSInstallerSample 。

另請參閱

  • Last updated on