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

1、概述

开发平台OS：windows

开发平台IDE：vs code

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

2、窗口最大化

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

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

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

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有失真效果)以及改造的代码如下所示：

 3.3、标题栏页面添加交互

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

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

   

   点击查看代码

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

   

   点击查看代码

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

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

   

   点击查看代码

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

   

   点击查看代码

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

标题栏最终的交互效果，如下图所示：

 4、自定义右键菜单项

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

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

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

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