Electron-开发实践：创建Window

【前言】

Electron入门就需要创建一个window，

window是用来展示ui的，

window是在渲染进程。

【创建window】

新建一个前端项目，

package.json内容如下，

{
  "name": "window-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "electron": "^25.2.0"
  }
}

可以看到安装了Electron的开发依赖，

即执行过下面的命令，

npm i -D electron

且有一个start命令用来本地启动Electron应用，

对应的main.js中的内容如下，

创建了一个BrowserWindow并加载了一个在线的url。

// In the main process.
const { BrowserWindow } = require("electron");

const win = new BrowserWindow({ width: 800, height: 600 });

// Load a remote URL
win.loadURL("https://github.com");

执行npm start查看效果如下，

这个提示是不能在app ready前创建window，

修改代码如下，

// electron
const { app, BrowserWindow } = require("electron");

// app ready
app.on("ready", () => {
  const win = new BrowserWindow({ width: 800, height: 600 });

  // Load a remote URL
  win.loadURL("https://github.com");
});

再次执行npm start，应用跑起来了，

【loadURL】

可以看到上面使用的是loadURL这个方法，

这个方法可以加载一个已经可以访问的网页，

这个方法也是将一个在线网站转为Electron应用最快的办法，

但是可能会有一些兼容性问题，

并且启动window后要等待网页加载完，

用户体验较差。

【ready-to-show】

解决先显示window在加载页面的问题，

可以将代码修改一下，如下，

1.创建window时添加了一个show属性

2.在ready-to-show事件后才展示window

// electron
const { app, BrowserWindow } = require("electron");

// app ready
app.on("ready", () => {
  // create window
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
  });

  // ready to show
  win.once("ready-to-show", () => {
    win.show();
  });

  // load url
  win.loadURL("https://github.com");
});

【背景色】

上面ready-to-show的事件，

在一些性能较差的电脑上响应较慢，

用户实际的体验可能是点击了应用，

但是没有响应，

其实Electron已经在启动了，

但是ready-to-show事件比较慢，

这种情况下推荐另一种方案，

给window设置一个背景色，

这样的效果：

1.性能较好的电脑，快速启动window和展示内容

2.性能较差的电脑，先显示window和背景色，然后展示内容

修改代码如下：

// electron
const { app, BrowserWindow } = require("electron");

// app ready
app.on("ready", () => {
  // create window
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: "#2e2c29",
  });

  // load url
  win.loadURL("https://github.com");
});

【常见属性】

下面看一些window常见的属性,

包括宽高，位置，最大最小宽高，是否可以改变大小等等，

// electron
const { app, BrowserWindow } = require("electron");

// app ready
app.on("ready", () => {
  // create window
  const win = new BrowserWindow({
    width: 400,
    height: 400,
    x: 0,
    y: 0,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 800,
    maxHeight: 800,
    resizable: true,
    movable: true,
    minimizable: true,
    maximizable: true,
    closable: true,
    focusable: true,
    backgroundColor: "#2e2c29",
  });

  // load url
  win.loadURL("https://github.com");
});

【标题栏】

titleBarStyle属性用来设置标题栏的样式，

‘default’是默认效果，mac下效果：

‘hidden’是隐藏标题栏，mac上只保留左上角按钮，

‘hiddenInset’也是隐藏标题栏，mac上保留左上角按钮，

【loadFile】

上面介绍了使用loadURL加载一个已经存在的页面，

这种方法不管使用ready-to-show还是使用背景色，

在用户体验方面都有会一点问题，

1.使用ready-to-show：在性能较低的电脑上启动慢

2.使用背景色：虽然用户可以先看到窗口，但是要等待内容的加载

其实在Electron的开发过程中一般不使用loadURL，

loadURL只是加载网页，

Electron开发应用更多的是加载本地文件，

这样就基本没有等待网页记载的过程了。

而加载本地文件使用loadFile即可，

代码如下，

// electron
const { app, BrowserWindow } = require("electron");

// app ready
app.on("ready", () => {
  // create window
  const win = new BrowserWindow({
    width: 400,
    height: 400,
  });

  // load file
  win.loadFile("./renderer/index.html");
});

【qiao-x-window】

封装了electron的window常见方法，

https://code.insistime.com/#/qiao-x-window

例如通过本地文件打开窗口，

可以将代码修改为下面的，

// electron
const { app } = require("electron");

// q
const { openWindowByFile } = require("qiao-x-window");

// app ready
app.on("ready", async () => {
  const win = await openWindowByFile("./renderer/index.html");
  console.log(win);
});

【总结】

1.创建window-loadURL

2.创建window-loadFile

3.创建window-ready-to-show

4.创建window-背景色

5.创建window-标题栏

6.Electron window工具： https://code.insistime.com/#/qiao-x-window