跳转到主要内容

从 BrowserView 迁移到 WebContentsView

·阅读时长 4 分钟
yangannyx
yangannyx

BrowserView 自 Electron 30 起已被弃用，并由 WebContentsView 取代。幸运的是，迁移过程相当简单。

Electron 正在从 BrowserView 迁移到 WebContentsView，以与 Chromium 的 UI 框架 Views API 对齐。WebContentsView 提供了一个可重用的视图，直接与 Chromium 的渲染管道相关联，简化了未来的升级，并为开发者提供了将非 Web UI 元素集成到 Electron 应用程序的可能性。通过采用 WebContentsView，应用程序不仅为即将到来的更新做好准备，而且还可以从减少代码复杂性和长期减少潜在错误的优势中受益。

熟悉 BrowserWindow 和 BrowserView 的开发者应该注意，BrowserWindow 和 WebContentsView 分别是继承自 BaseWindow 和 View 基类的子类。为了充分理解可用的实例变量和方法，请务必查阅这些基类的文档。

迁移步骤​

1. 将 Electron 升级到 30.0.0 或更高版本​

警告

Electron 版本可能包含影响您的应用程序的破坏性更改。在继续进行其余迁移之前，先在您的应用程序上测试并应用 Electron 升级是一个好主意。每个 Electron 主要版本的破坏性更改列表可以在 此处 以及 Electron 博客上每个主要版本的发行说明中找到。

2. 熟悉您的应用程序中使用 BrowserView 的位置​

一种方法是在您的代码库中搜索 new BrowserView(。这应该能让您了解您的应用程序是如何使用 BrowserViews 的，以及有多少调用点需要迁移。

提示

在大多数情况下，您的应用程序中实例化新 BrowserViews 的每个地方都可以与其他地方隔离开来，独立进行迁移。

3. 迁移 BrowserView 的每个用法​

  1. 迁移实例化过程。这应该相当简单，因为 WebContentsView 和 BrowserView 的构造函数本质上具有相同的形状。两者都接受 WebPreferences 通过 webPreferences 参数。

    - this.tabBar = new BrowserView({
    + this.tabBar = new WebContentsView({
    信息

    默认情况下，WebContentsView 实例化时带有白色背景，而 BrowserView 实例化时带有透明背景。要在 WebContentsView 中获得透明背景，请将其背景颜色设置为 alpha（不透明度）通道设置为 00 的 RGBA 十六进制值。

    + 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 实例方法迁移到一个 resize 监听器。

    - 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！🎉