Vue+Electron随缘更新指南

一、创建Vue+Electron项目随缘更新指南

1. 创建vue项目

vue create 项目名称
复制代码

2. 运行

yarn serve
复制代码

3. 确保项目成功运行后安装electron-builder

ctrl+c后选择Y停止项目
vue add electron-builder // 安装依赖
复制代码

安装electron-builder的过程中会选择安装electron，选择合适的版本等待安装完成。

安装完成后可以发现项目结构中多了background.js文件，这是electron项目的入口文件，也是主进程文件。

同时package.json中的脚本命令也增加了。

4. 运行vue+electron项目

yarn electron:serve
复制代码

5. 可能遇到的问题：Failed to fetch extension

我们只需要将app的ready事件中保留窗口创建就好了：

app.on('ready', async () => {
  createWindow()
})
复制代码

至此，一个vue+electron项目就搭建好了。

二、自定义标题栏

1. 标题栏样式

#background.js
const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 是否有边框（标题栏）
})

#App.vue
<template>
  <div id="nav">
    <div class="title-bar">标题栏</div>
    <div class="page-content">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <router-view />
    </div>
  </div>
</template>

<style lang="less">
body {  margin: 0;}
.title-bar {
  background-color: rgb(115, 118, 146);
  height: 32px;
  line-height: 32px;
  text-align: left;
  padding: 0 20px;
  font-size: 14px;
  color: #fff;
}
.page-content {
  height: calc(100vh - 32px);
  overflow: auto;
}
</style>
复制代码

效果图如下：

2. 设置标题栏拖动窗口

自定义标题栏是不能拖动的，当前只识别为页面主体的一部分，我们需要另外对它做些配置。

.title-bar {
  ...  -webkit-app-region: drag; // 设为可拖动
}
复制代码

此时我们的自定义标题栏就可以像原生标题栏一样拖动了。

3. 可能遇到的问题：无法点击窗口操作按钮

对于这类自定义窗口操作按钮来说，将标题栏设为可拖动会导致点击事件触发不了，此时应该为这些按钮配置为不可拖动 -webkit-app-region: no-drag。

4. 可能遇到的问题：标题栏无法resize窗口

此时的自定义标题栏是可以拖动了，但是把鼠标放在窗口边缘，会发现我们不能通过手动来调整窗口大小了，但是非标题栏部分都能resize。

解决方法：将标题栏除了下边以外，都缩小1-3px。

<style lang="less">
body {
  margin: 0;
}
.title-bar {
  width: calc(100vw - 4px);
  margin: 1px 2px 0px;
  box-sizing: border-box;
  background-color: rgb(115, 118, 146);
  height: 32px;
  line-height: 32px;
  text-align: left;
  padding: 0 20px;
  font-size: 14px;
  color: #fff;
  -webkit-app-region: drag;
}
.page-content {
  height: calc(100vh - 33px);
  overflow: auto;
}
</style>
复制代码

此时标题栏效果如下：

多余的白边视情况选择多给title套一层或者页面背景设为title同色，页面内容颜色另外设置。

三、标题栏增加窗口操作

1. 导入remote模块

#App.vue
import { remote } from 'electron'; // 导入remote模块
复制代码

2. 获取当前窗口实例

#App.vueconst CURRENT_WINDOW = remote.getCurrentWindow();
复制代码

3. 通过实例操作窗口

#App.vueconst operateWindow = (operate: any) => {
  let isSticky = ref(false);
  switch (operate) {
    case 'close':
      if (CURRENT_WINDOW.isClosable() && !CURRENT_WINDOW.isDestroyed()) {
        CURRENT_WINDOW.hide();
        CURRENT_WINDOW.close();
        CURRENT_WINDOW.destroy();
      }
      break;
    case 'minimize':
      CURRENT_WINDOW.minimize();
      break;
    case 'sticky':
      isSticky.value = !CURRENT_WINDOW.isAlwaysOnTop();
      let mode = ['screen-saver', 'normal'];
      CURRENT_WINDOW.setAlwaysOnTop(
        isSticky.value,
        (<any>mode)[+isSticky.value]
      );
      break;
  }
};
复制代码

四、窗口阴影

#background.js
const win = new BrowserWindow({
    width: 800,
    height: 600,
    hasShadow: true,
})
复制代码

1. 可能出现的问题：设置阴影无效

一般情况下设置hasShodow:true后窗口阴影就显示出来了，但有的脚手架生成的background.js文件会将窗口的transparent属性设置为true，将窗口透明，在这种情况下的阴影是看不出效果的。

五、主进程、渲染进程之间通信

1. 渲染进程向主进程

渲染进程发送：
ipcRenderer.send('loginSuccess', data);
主进程接收：
ipcMain.on('loginSuccess', (e, data) => {  ...});
复制代码

1. 主进程向渲染进程

主进程发送：
ipcMain.send('msg', 'massage');
渲染进程接收：ipcRenderer
ipcRenderer.on('msg', (e, data) => {
  ...
});
复制代码