从 BrowserView 迁移到 WebContentsView
BrowserView
自 Electron 30 起已被弃用,并由 WebContentView
替代。 值得庆幸的是,迁移过程相当轻松。
Electron 正在从 BrowserView
迁移到 WebContentsView
,以与 Chromium 的 UI 框架 Views API 对齐。 WebContentsView
提供了一个可重用的视图,直接与 Chromium 的渲染管道绑定,从而简化了未来的升级,并为开发者集成非 Web 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
的每个用法
-
迁移实例化。 这应该非常简单,因为 WebContentsView 和 BrowserView 的构造函数基本上具有相同的形状。 两者都通过
webPreferences
参数接受 WebPreferences。- this.tabBar = new BrowserView({
+ this.tabBar = new WebContentsView({信息默认情况下,
WebContentsView
实例化时具有白色背景,而BrowserView
实例化时具有透明背景。 要在WebContentsView
中获得透明背景,请将其背景颜色设置为 RGBA 十六进制值,并将 alpha(不透明度)通道设置为00
+ this.webContentsView.setBackgroundColor("#00000000");
-
迁移
BrowserView
添加到其父窗口的位置。- this.browserWindow.addBrowserView(this.tabBar)
+ this.browserWindow.contentView.addChildView(this.tabBar); -
迁移父窗口上的
BrowserView
实例方法调用。旧方法 新方法 备注 win.setBrowserView
win.contentView.removeChildView
+win.contentView.addChildView
win.getBrowserView
win.contentView.children
win.removeBrowserView
win.contentView.removeChildView
win.setTopBrowserView
win.contentView.addChildView
在现有视图上调用 addChildView
会将其重新排序到顶部。win.getBrowserViews
win.contentView.children
-
迁移
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 的 issue tracker 上的 WebContentsView 标签,看看您遇到的问题是否已被报告。 如果您在那里没有看到您的问题,请随时添加新的错误报告。 包括测试用例 gists 将有助于我们更好地分类您的问题!
恭喜,您已迁移到 WebContentsViews! 🎉