跳到主要內容

從 BrowserView 遷移到 WebContentsView

·3 分鐘閱讀
yangannyx
yangannyx

BrowserView 自 Electron 30 起已被棄用，並由 WebContentView 取代。 值得慶幸的是，遷移過程相當輕鬆。

Electron 正在從 BrowserView 遷移到 WebContentsView，以符合 Chromium 的 UI 框架 Views API。 WebContentsView 提供可重複使用的視圖，直接與 Chromium 的渲染管線綁定，簡化了未來的升級，並為開發人員開啟了將非網頁 UI 元素整合到其 Electron 應用程式的可能性。 透過採用 WebContentsView，應用程式不僅為即將到來的更新做好準備，還可以在長期內受益於降低的程式碼複雜度和更少的潛在錯誤。

熟悉 BrowserWindows 和 BrowserViews 的開發人員應注意，BrowserWindow 和 WebContentsView 分別是繼承自 BaseWindow 和 View 基礎類別的子類別。 若要充分理解可用的實例變數和方法，請務必查閱這些基礎類別的文件。

遷移步驟​

1. 升級 Electron 至 30.0.0 或更高版本​

警告

Electron 版本發布可能包含會影響您的應用程式的重大變更。 最好在繼續進行此遷移的其餘步驟之前，先在您的應用程式上測試並部署 Electron 升級。 每個 Electron 主要版本的重大變更清單可以在此處以及 Electron 部落格上每個主要版本的版本發布說明中找到。

2. 熟悉您的應用程式使用 BrowserViews 的位置​

一種方法是在您的程式碼庫中搜尋 new BrowserView(。 這應該讓您了解您的應用程式如何使用 BrowserViews 以及有多少呼叫點需要遷移。

提示

在大多數情況下，您的應用程式實例化新的 BrowserViews 的每個實例都可以與其他實例隔離遷移。

3. 遷移 BrowserView 的每個用法​

  1. 遷移實例化。 這應該相當簡單，因為 WebContentsView 和 BrowserView 的建構函式基本上具有相同的形狀。 兩者都透過 webPreferences 參數接受 WebPreferences。

    - this.tabBar = new BrowserView({
    + this.tabBar = new WebContentsView({
    資訊

    預設情況下，WebContentsView 實例化時具有白色背景，而 BrowserView 實例化時具有透明背景。 若要在 WebContentsView 中取得透明背景，請將其背景顏色設定為 RGBA 十六進位值，並將 Alpha（不透明度）通道設定為 00

    + this.webContentsView.setBackgroundColor("#00000000");

  2. 遷移 BrowserView 新增至其父視窗的位置。

    - this.browserWindow.addBrowserView(this.tabBar)
    + this.browserWindow.contentView.addChildView(this.tabBar);

  3. 遷移父視窗上的 BrowserView 實例方法呼叫。

    舊方法新方法備註
    win.setBrowserViewwin.contentView.removeChildView + win.contentView.addChildView
    win.getBrowserViewwin.contentView.children
    win.removeBrowserViewwin.contentView.removeChildView
    win.setTopBrowserViewwin.contentView.addChildView對現有視圖呼叫 addChildView 會將其重新排序到頂部。
    win.getBrowserViewswin.contentView.children

  4. 遷移 setAutoResize 實例方法至調整大小監聽器。

    - this.browserView.setAutoResize({
    -   vertical: true,
    - })

    + this.browserWindow.on('resize', () => {
    +   if (!this.browserWindow || !this.webContentsView) {
    +     return;
    +   }
    +   const bounds = this.browserWindow.getBounds();
    +   this.webContentsView.setBounds({
    +     x: 0,
    +     y: 0,
    +     width: bounds.width,
    +     height: bounds.height,
    +    });
    +  });
    提示

    所有現有的 browserView.webContents 用法以及實例方法 browserView.setBounds、browserView.getBounds 和 browserView.setBackgroundColor 都不需要遷移，並且應該可以直接與 WebContentsView 實例搭配使用！

4. 測試並提交您的變更​

遇到問題？ 查看 Electron 問題追蹤器上的 WebContentsView 標籤，看看您遇到的問題是否已被回報。 如果您在那裡沒有看到您的問題，請隨時新增錯誤報告。 包括測試案例 gist 將有助於我們更好地分類您的問題！

恭喜，您已遷移到 WebContentsViews！ 🎉