跳到主要内容

从 BrowserView 迁移到 WebContentsView

·3 分钟阅读

BrowserViewElectron 30 起已被弃用,并由 WebContentView 替代。 值得庆幸的是,迁移过程相当轻松。


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

熟悉 BrowserWindows 和 BrowserViews 的开发者应该注意到,BrowserWindowWebContentsView 分别是从 BaseWindowView 基类继承的子类。 要充分理解可用的实例变量和方法,请务必查阅这些基类的文档。

迁移步骤

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

警告

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

2. 熟悉您的应用程序使用 BrowserViews 的位置

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

提示

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

3. 迁移 BrowserView 的每个用法

  1. 迁移实例化。 这应该非常简单,因为 WebContentsViewBrowserView 的构造函数基本上具有相同的形状。 两者都通过 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 实例方法到 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.setBoundsbrowserView.getBoundsbrowserView.setBackgroundColor 都不需要迁移,并且应该与 WebContentsView 实例开箱即用!

4. 测试并提交您的更改

遇到问题? 查看 Electron 的 issue tracker 上的 WebContentsView 标签,看看您遇到的问题是否已被报告。 如果您在那里没有看到您的问题,请随时添加新的错误报告。 包括测试用例 gists 将有助于我们更好地分类您的问题!

恭喜,您已迁移到 WebContentsViews! 🎉