基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】

1、概述

开发平台OS:windows

开发平台IDE:vs code

本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预加载(preload.js)和进程间通信(ipc)的方式来完成。

2、窗口最大化

 一些应用在实际情况中,希望启动的时候就以窗口最大化的方式呈现,BrowserWindow对象提供了窗口最大化的方法:win.maximize(),具体如下所示:

 

  const win = new BrowserWindow({
    //窗体宽度(像素),默认800像素
    width: 800,
    //窗体高度(像素),默认600像素
    height: 600,
    //窗口标题,如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`,则该属性将被忽略。
    title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  //窗体最大化
  win.maximize();

点击查看代码

通过设置后,启动应用就会发现,最大化的过程中会出现黑底闪屏,这样会给用户造成困扰。

 

造成这个现象的原因是实例化窗体的时候,默认显示了窗口,然后再最大化,从默认窗口大小到最大化窗口大小的这个过程中窗体还没绘制好,就会出现黑色背景直至最大化完成后,现在稍加改造就可以解决这个问题:实例化的时候不显示窗体,最大化后再显示窗体。

  const win = new BrowserWindow({
    //窗体宽度(像素),默认800像素
    width: 800,
    //窗体高度(像素),默认600像素
    height: 600,
    //窗口标题,如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`,则该属性将被忽略。
    title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,
    //不显示窗体
    show: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  //窗体最大化
  win.maximize();
  //显示窗体
  win.show();

点击查看代码

3、自定义标题栏

为什么要自定义标题栏?electron应用自带的标题栏不能满足日益复杂的功能需求时,就只能自定义了。自定义标题除了实现基本的窗口功能外,它还能方便的快速的扩展其他功能需求。

自定义标题栏使用的是css3-flex+scss 来实现布局和样式的编写,其主体划分为两个区域:标题栏区域和功能区域,如下图所示:

为了使用scss语言来编写样式,我们需要安装 sass-loader 插件,在终端输入命令:npm install sass-loader@^10 sass –save-dev 指定版本尤为重要,高版本对于webpack版本也有要求

3.1、iconfront 图标添加

功能区域处的功能按钮需要图标,此块是在 iconfront 官网上找了合适的图标加入购物车后以下载代码的方式下载资源,然后通过下载的demo中第二种方式集成在项目中。

3.2、编写标题栏页面

在src/renderer/App.vue 修改其内容以完成标题栏的改造,主要是通过css3-flex来完成的布局,包含了标题栏原有的基本功能,改造后效果(gif有失真效果)以及改造的代码如下所示:

<template>
  <div id="app">
    <header>
      <div class="titleArea">
        <img :src="winIcon" />
        <span>{{ winTitle }}</span>
      </div>
      <div class="featureArea">
        <div title="扩展">
          <span class="iconfont icon-xiakuozhanjiantou"></span>
        </div>
        <div title="最小化">
          <span class="iconfont icon-minimum"></span>
        </div>
        <div :title="maximizeTitle">
          <span
            :class="{
              iconfont: true,
              'icon-zuidahua': isMaximized,
              'icon-window-max_line': !isMaximized,
            }"
          ></span>
        </div>
        <div title="关闭">
          <span class="iconfont icon-guanbi"></span>
        </div>
      </div>
    </header>
    <main>我是主体</main>
  </div>
</template>

<script>
export default {
  data: () => ({
    winIcon: `${process.env.BASE_URL}favicon.ico`,
    winTitle: process.env.VUE_APP_NAME,
    isMaximized: true,
  }),

  computed: {
    maximizeTitle() {
      return this.isMaximized ? "向下还原" : "最大化";
    },
  },
};
</script>

<style lang="scss">
$titleHeight: 40px;
body {
  margin: 0px;
}
#app {
  font-family: "微软雅黑";
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  header {
    background: #16407b;
    color: #8c8663;
    height: $titleHeight;
    width: 100%;
    display: flex;

    .titleArea {
      flex-grow: 10;
      padding-left: 5px;
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
      }
      span {
        padding-left: 5px;
      }
    }

    .featureArea {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;

      div {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }

      /* 最小化 最大化悬浮效果 */
      div:hover {
        background: #6fa8ff;
      }
      /* 关闭悬浮效果 */
      div:last-child:hover {
        background: red;
      }
    }
  }

  //   主体区域铺满剩余的整个宽、高度
  main {
    background: #e8eaed;
    width: 100%;
    height: calc(100vh - $titleHeight);
  }
}
</style>

点击查看代码

 3.3、标题栏页面添加交互

从electron机制上来说,BrowserWindow是属于主进程模块,要想实现在页面中(渲染进程)调用主进程窗口的功能,这涉及到渲染进程与主进程的通信和安全性,在这通过预加载(preload.js)和 ipc 来实现该需求。

  1. src/main 目录下添加 preload.js 文件,具体内容如下所示:

    import { contextBridge, ipcRenderer } from "electron";
    
    //窗体操作api
    contextBridge.exposeInMainWorld("windowApi", {
      //最小化
      minimize: () => {
        ipcRenderer.send("window-min");
      },
      //向下还原|最大化
      maximize: () => {
        ipcRenderer.send("window-max");
      },
      //关闭
      close: () => {
        ipcRenderer.send("window-close");
      },
      /**
       * 窗口重置大小
       * @param {重置大小后的回调函数} callback
       */
      resize: (callback) => {
        ipcRenderer.on("window-resize", callback);
      },
    });

    点击查看代码

  2. src/main/index.js 添加窗体最大化、最小化、关闭、重置大小监听、预先加载指定脚本等功能,具体内容如下所示:

    "use strict";
    
    import { app, protocol, BrowserWindow, ipcMain } from "electron";
    import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
    import path from "path";
    // 取消安装devtools后,则不需要用到此对象,可以注释掉
    // import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
    const isDevelopment = process.env.NODE_ENV !== "production";
    
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([
      { scheme: "app", privileges: { secure: true, standard: true } },
    ]);
    
    //创建应用主窗口
    const createWindow = async () => {
      const win = new BrowserWindow({
        //窗体宽度(像素),默认800像素
        width: 800,
        //窗体高度(像素),默认600像素
        height: 600,
        //窗口标题,如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`,则该属性将被忽略。
        title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,
        //不显示窗体
        show: false,
        webPreferences: {
          // Use pluginOptions.nodeIntegration, leave this alone
          // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
          // 是否开启node集成,默认false
          nodeIntegration: false,
          // 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true
          contextIsolation: true,
          //在页面运行其他脚本之前预先加载指定的脚本
          preload: path.join(__dirname, "preload.js"),
        },
        //fasle:无框窗体(没有标题栏、菜单栏)
        frame: false,
      });
      //窗体最大化
      win.maximize();
      //显示窗体
      win.show();
    
      if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
        if (!process.env.IS_TEST) win.webContents.openDevTools();
      } else {
        createProtocol("app");
        // Load the index.html when not in development
        await win.loadURL("app://./index.html");
      }
    
      //监听窗口重置大小后事件,若触发则给渲染进程发送消息
      win.on("resize", () => {
        win.webContents.send("window-resize", win.isMaximized());
      });
    };
    
    // Quit when all windows are closed.
    app.on("window-all-closed", () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== "darwin") {
        app.quit();
      }
    });
    
    app.on("activate", () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
    
    // 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件
    // 通常我们使用触发器的 .on 函数来监听 Node.js 事件。
    // 但是 Electron 暴露了 app.whenReady() 方法,作为其 ready 事件的专用监听器,这样可以避免直接监听 .on 事件带来的一些问题。 参见 //github.com/electron/electron/pull/21972。
    app.whenReady().then(() => {
      createWindow();
    
      //窗口最小化
      ipcMain.on("window-min", function (event) {
        const win = BrowserWindow.fromId(event.sender.id);
        win.minimize();
      });
      //窗口向下还原|最大化
      ipcMain.on("window-max", function (event) {
        const win = BrowserWindow.fromId(event.sender.id);
        const isMaximized = win.isMaximized();
        if (isMaximized) {
          win.unmaximize();
        } else {
          win.maximize();
        }
      });
      //窗口关闭
      ipcMain.on("window-close", function (event) {
        const win = BrowserWindow.fromId(event.sender.id);
        win.destroy();
      });
    });
    // 注释了此种方式改用官方推荐的专用方法来实现事件的监听
    // app.on("ready", async () => {
    //   //启动慢的原因在此,注释掉它后能换来极致的快感
    //   //   if (isDevelopment && !process.env.IS_TEST) {
    //   //     // Install Vue Devtools
    //   //     try {
    //   //       await installExtension(VUEJS_DEVTOOLS);
    //   //     } catch (e) {
    //   //       console.error("Vue Devtools failed to install:", e.toString());
    //   //     }
    //   //   }
    //   createWindow();
    // });
    
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === "win32") {
        process.on("message", (data) => {
          if (data === "graceful-exit") {
            app.quit();
          }
        });
      } else {
        process.on("SIGTERM", () => {
          app.quit();
        });
      }
    }

    点击查看代码

  3. 完成上述两个步骤后启用应用,控制面板中提示有错误消息,如下图所示:

     

     解决办法:根目录下vue.config.js 文件 pluginOptions.electronBuilder 节点添加内容 preload: “src/main/preload.js”,具体内容如下所示:

      pluginOptions: {
        electronBuilder: {
          mainProcessFile: "src/main/index.js", // 主进程入口文件
          mainProcessWatch: ["src/main"], // 检测主进程文件在更改时将重新编译主进程并重新启动
          preload: "src/main/preload.js", // 预加载js
        },
      },

    点击查看代码

  4.  src/renderer/App.vue 在功能区域为功能按钮绑定点击事件及处理,具体内容如下所示:

    <template>
      <div id="app">
        <header>
          <div class="titleArea">
            <img :src="winIcon" />
            <span>{{ winTitle }}</span>
          </div>
          <div class="featureArea">
            <div title="扩展" @click="expand">
              <span class="iconfont icon-xiakuozhanjiantou"></span>
            </div>
            <div title="最小化" @click="minimize">
              <span class="iconfont icon-minimum"></span>
            </div>
            <div :title="maximizeTitle" @click="maximize">
              <span
                :class="{
                  iconfont: true,
                  'icon-zuidahua': isMaximized,
                  'icon-window-max_line': !isMaximized,
                }"
              ></span>
            </div>
            <div title="关闭" @click="close">
              <span class="iconfont icon-guanbi"></span>
            </div>
          </div>
        </header>
        <main>我是主体</main>
      </div>
    </template>
    
    <script>
    export default {
      data: () => ({
        winIcon: `${process.env.BASE_URL}favicon.ico`,
        winTitle: process.env.VUE_APP_NAME,
        isMaximized: true,
      }),
    
      mounted() {
        window.windowApi.resize(this.resize);
      },
    
      computed: {
        maximizeTitle() {
          return this.isMaximized ? "向下还原" : "最大化";
        },
      },
    
      methods: {
        //扩展
        expand() {
          this.$message({
            type: "success",
            message: "我点击了扩展",
          });
        },
        //最小化
        minimize() {
          window.windowApi.minimize();
        },
        //向下还原|最大化
        maximize() {
          window.windowApi.maximize();
        },
        // 窗口关闭
        close() {
          window.windowApi.close();
        },
        /**
         * 重置窗体大小后的回调函数
         * @param {事件源对象} event
         * @param {参数} args
         */
        resize(event, args) {
          this.isMaximized = args;
        },
      },
    };
    </script>
    
    <style lang="scss">
    $titleHeight: 40px;
    $iconSize: 35px;
    body {
      margin: 0px;
    }
    #app {
      font-family: "微软雅黑";
      color: #2c3e50;
      display: flex;
      flex-direction: column;
      header {
        background: #16407b;
        color: #8c8663;
        height: $titleHeight;
        width: 100%;
        display: flex;
    
        .titleArea {
          flex-grow: 10;
          padding-left: 5px;
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
          }
          span {
            padding-left: 5px;
          }
        }
    
        .featureArea {
          flex-grow: 1;
          display: flex;
          justify-content: flex-end;
          color: white;
    
          div {
            width: $iconSize;
            height: $iconSize;
            line-height: $iconSize;
            text-align: center;
          }
    
          /* 最小化 最大化悬浮效果 */
          div:hover {
            background: #6fa8ff;
          }
          /* 关闭悬浮效果 */
          div:last-child:hover {
            background: red;
          }
        }
      }
    
      //   主体区域铺满剩余的整个宽、高度
      main {
        background: #e8eaed;
        width: 100%;
        height: calc(100vh - $titleHeight);
      }
    }
    </style>

    点击查看代码

  5. 现在还差最后一步,在拖拽标题栏的时候,也需要能改变窗体位置和大小,具体内容如下所示:

标题栏最终的交互效果,如下图所示:

 

 4、自定义右键菜单项

当前在开发模式下启动应用后也会自启动调试工具(devtools)便于技术人员分析并定位问题,如果关闭调试工具后就没有渠道再次启用调试工具了。还有场景就是在非开发模式下默认是不启用调试工具的,应用出现问题后也需要启用调试工具来分析定位问题。这个时候呢,参考浏览器鼠标右键功能,给应用添加右键菜单项功能包含有:重新加载、调试工具等。右键菜单项在主进程中 src/main/index.js 管理,通过给 BrowserWindow 对象 webContents 属性绑定鼠标右键处理监听处理,具体内容如下所示:

"use strict";

import { app, protocol, BrowserWindow, ipcMain, Menu } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import path from "path";
// 取消安装devtools后,则不需要用到此对象,可以注释掉
// import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

//创建应用主窗口
const createWindow = async () => {
  const win = new BrowserWindow({
    //窗体宽度(像素),默认800像素
    width: 800,
    //窗体高度(像素),默认600像素
    height: 600,
    //窗口标题,如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`,则该属性将被忽略。
    title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`,
    //不显示窗体
    show: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // 是否开启node集成,默认false
      nodeIntegration: false,
      // 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true
      contextIsolation: true,
      //在页面运行其他脚本之前预先加载指定的脚本
      preload: path.join(__dirname, "preload.js"),
    },
    //fasle:无框窗体(没有标题栏、菜单栏)
    frame: false,
  });
  //窗体最大化
  win.maximize();
  //显示窗体
  win.show();

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    await win.loadURL("app://./index.html");
  }

  //监听窗口重置大小后事件,若触发则给渲染进程发送消息
  win.on("resize", () => {
    win.webContents.send("window-resize", win.isMaximized());
  });

  //添加右键菜单项
  createContextMenu(win);
};

//给指定窗体创建右键菜单项
const createContextMenu = (win) => {
  //自定义右键菜单
  const template = [
    {
      label: "重新加载",
      accelerator: "ctrl+r", //快捷键
      click: function () {
        win.reload();
      },
    },
    {
      label: "调试工具",
      click: function () {
        const isDevToolsOpened = win.webContents.isDevToolsOpened();
        if (isDevToolsOpened) {
          win.webContents.closeDevTools();
        } else {
          win.webContents.openDevTools();
        }
      },
    },
  ];
  const contextMenu = Menu.buildFromTemplate(template);
  win.webContents.on("context-menu", () => {
    contextMenu.popup({ window: win });
  });
};

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件
// 通常我们使用触发器的 .on 函数来监听 Node.js 事件。
// 但是 Electron 暴露了 app.whenReady() 方法,作为其 ready 事件的专用监听器,这样可以避免直接监听 .on 事件带来的一些问题。 参见 //github.com/electron/electron/pull/21972。
app.whenReady().then(() => {
  createWindow();

  //窗口最小化
  ipcMain.on("window-min", function (event) {
    const win = BrowserWindow.fromId(event.sender.id);
    win.minimize();
  });
  //窗口向下还原|最大化
  ipcMain.on("window-max", function (event) {
    const win = BrowserWindow.fromId(event.sender.id);
    const isMaximized = win.isMaximized();
    if (isMaximized) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  });
  //窗口关闭
  ipcMain.on("window-close", function (event) {
    const win = BrowserWindow.fromId(event.sender.id);
    win.destroy();
  });
});
// 注释了此种方式改用官方推荐的专用方法来实现事件的监听
// app.on("ready", async () => {
//   //启动慢的原因在此,注释掉它后能换来极致的快感
//   //   if (isDevelopment && !process.env.IS_TEST) {
//   //     // Install Vue Devtools
//   //     try {
//   //       await installExtension(VUEJS_DEVTOOLS);
//   //     } catch (e) {
//   //       console.error("Vue Devtools failed to install:", e.toString());
//   //     }
//   //   }
//   createWindow();
// });

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

点击查看代码

 

下一篇中将介绍项目打包等事宜

感谢您阅读本文,如果本文给了您帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货~

源码地址://gitee.com/libaitianya/electron-vue-element-template