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 标签 ``，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 0, 0, 1)"> nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: </span>!<span style="color: rgba(0, 0, 0, 1)">process.env.ELECTRON_NODE_INTEGRATION, }, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> win.maximize();</pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> <p>通过设置后，启动应用就会发现，最大化的过程中会出现黑底闪屏，这样会给用户造成困扰。</p> <p style="margin: 0"><img src="https://1000bd.com/contentImg/2023/06/14/020302791.png" alt="" height="334" loading="lazy" class="medium-zoom-image"></p> <p style="margin: 0"> </p> <p style="margin: 0">造成这个现象的原因是实例化窗体的时候，默认显示了窗口，然后再最大化，从默认窗口大小到最大化窗口大小的这个过程中窗体还没绘制好，就会出现黑色背景直至最大化完成后，现在稍加改造就可以解决这个问题：<span style="color: rgba(255, 153, 204, 1)">实例化的时候不显示窗体，最大化后再显示窗体。</span></p> <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_cd453a70-adc6-4e1f-9e19-9c4d742548c8" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_cd453a70-adc6-4e1f-9e19-9c4d742548c8" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_cd453a70-adc6-4e1f-9e19-9c4d742548c8" class="cnblogs_code_hide"> <pre> const win = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 0, 0, 1)"> nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: </span>!<span style="color: rgba(0, 0, 0, 1)">process.env.ELECTRON_NODE_INTEGRATION, }, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> win.show();</pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> <p><strong><span style="font-family: "Microsoft YaHei"; font-size: 18px">3、自定义标题栏</span></strong></p> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 15px">为什么要自定义标题栏？electron应用自带的标题栏不能满足日益复杂的功能需求时，就只能自定义了。自定义标题除了实现基本的窗口功能外，它还能方便的快速的扩展其他功能需求。</span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 15px">自定义标题栏使用的是css3-flex+scss 来实现布局和样式的编写，其主体划分为两个区域：标题栏区域和功能区域，如下图所示：</span></p> <p><img src="https://1000bd.com/contentImg/2023/06/14/020300018.png" alt="" loading="lazy" class="medium-zoom-image"></p> <p>为了使用scss语言来编写样式，我们需要安装 <span style="color: rgba(115, 178, 236, 1)">sass-loader</span> 插件，在终端输入命令：<span style="color: rgba(115, 178, 236, 1)">npm install sass-loader@^10 sass --save-dev<span style="color: rgba(0, 0, 0, 1)"> <span style="color: rgba(255, 153, 204, 1)">指定版本尤为重要，高版本对于webpack版本也有要求</span></span></span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">3.1、iconfront 图标添加</span></span></strong></span></p> <p><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">功能区域处的功能按钮需要图标，此块是在 <span style="color: rgba(138, 206, 246, 1)">iconfront</span> 官网上找了合适的图标加入购物车后以下载代码的方式下载资源，然后通过下载的demo中第二种方式集成在项目中。</span></span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">3.2、编写标题栏页面</span></span></strong></span></p> <p><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">在src/renderer/App.vue 修改其内容以完成标题栏的改造，主要是通过css3-flex来完成的布局，包含了标题栏原有的基本功能，改造后效果(gif有失真效果)以及改造的代码如下所示：</span></span></p> <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_ed1c6007-7e23-4d28-b518-278d6164ee07" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_ed1c6007-7e23-4d28-b518-278d6164ee07" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_ed1c6007-7e23-4d28-b518-278d6164ee07" class="cnblogs_code_hide"> <pre><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 style="color: rgba(0, 0, 0, 1)">span :class</span>="<span style="color: rgba(0, 0, 0, 1)">{ iconfont: true, 'icon-zuidahua': isMaximized, 'icon-window-max_line': !isMaximized, }</span>" ></span> </div> <div title="关闭"> <span class="iconfont icon-guanbi"></span> </div> </div> </header> <main>我是主体</main> </div> </template> <script><span style="color: rgba(0, 0, 0, 1)"> export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> { data: () </span>=><span style="color: rgba(0, 0, 0, 1)"> ({ winIcon: `${process.env.BASE_URL}favicon.ico`, winTitle: process.env.VUE_APP_NAME, isMaximized: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, }), computed: { maximizeTitle() { </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized ? "向下还原" : "最大化"<span style="color: rgba(0, 0, 0, 1)">; }, }, }; </span></script> <style lang="scss"><span style="color: rgba(0, 0, 0, 1)"> $titleHeight: 40px; body { margin: 0px; } #app { font</span>-family: "微软雅黑"<span style="color: rgba(0, 0, 0, 1)">; color: #2c3e50; display: flex; flex</span>-<span style="color: rgba(0, 0, 0, 1)">direction: column; header { background: #16407b; color: #8c8663; height: $titleHeight; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; display: flex; .titleArea { flex</span>-grow: 10<span style="color: rgba(0, 0, 0, 1)">; padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; display: flex; align</span>-<span style="color: rgba(0, 0, 0, 1)">items: center; img { width: 24px; height: 24px; } span { padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; } } .featureArea { flex</span>-grow: 1<span style="color: rgba(0, 0, 0, 1)">; display: flex; justify</span>-content: flex-<span style="color: rgba(0, 0, 0, 1)">end; div { width: 30px; height: 30px; line</span>-<span style="color: rgba(0, 0, 0, 1)">height: 30px; text</span>-<span style="color: rgba(0, 0, 0, 1)">align: center; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 最小化 最大化悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:hover { background: #6fa8ff; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 关闭悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:last</span>-<span style="color: rgba(0, 0, 0, 1)">child:hover { background: red; } } } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主体区域铺满剩余的整个宽、高度</span> <span style="color: rgba(0, 0, 0, 1)"> main { background: #e8eaed; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; height: calc(100vh </span>-<span style="color: rgba(0, 0, 0, 1)"> $titleHeight); } } </span></style></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> <p style="margin: 0"><img src="https://1000bd.com/contentImg/2023/06/14/020302369.gif" alt="" loading="lazy" class="medium-zoom-image"></p> <p><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px"> 3.3、标题栏页面添加交互</span></strong></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 15px">从electron机制上来说，BrowserWindow是属于主进程模块，要想实现在页面中(渲染进程)调用主进程窗口的功能，这涉及到渲染进程与主进程的通信和安全性，在这通过预加载(preload.js)和 ipc 来实现该需求。</span></p> <ol> <li><span style="color: rgba(58, 195, 243, 1)">src/main</span> 目录下添加 <span style="color: rgba(58, 195, 243, 1)">preload.js</span> 文件，具体内容如下所示： <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_05278627-e6b5-41da-a970-bfdc204e1bc1" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_05278627-e6b5-41da-a970-bfdc204e1bc1" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_05278627-e6b5-41da-a970-bfdc204e1bc1" class="cnblogs_code_hide"> <pre>import { contextBridge, ipcRenderer } from "electron"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体操作api</span> contextBridge.exposeInMainWorld("windowApi"<span style="color: rgba(0, 0, 0, 1)">, { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最小化</span> minimize: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-min"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">向下还原|最大化</span> maximize: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-max"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">关闭</span> close: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-close"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* * 窗口重置大小 * @param {重置大小后的回调函数} callback </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> resize: (callback) </span>=><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.on(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, callback); }, });</span></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> </li> <li><span style="color: rgba(58, 195, 243, 1)">src/main/index.js</span> 添加窗体最大化、最小化、关闭、重置大小监听、预先加载指定脚本等功能，具体内容如下所示： <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_f51c37f7-dda7-44ab-9bd1-93f8bcbc7a8c" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_f51c37f7-dda7-44ab-9bd1-93f8bcbc7a8c" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_f51c37f7-dda7-44ab-9bd1-93f8bcbc7a8c" class="cnblogs_code_hide"> <pre>"use strict"<span style="color: rgba(0, 0, 0, 1)">; import { app, protocol, BrowserWindow, ipcMain } from </span>"electron"<span style="color: rgba(0, 0, 0, 1)">; import { createProtocol } from </span>"vue-cli-plugin-electron-builder/lib"<span style="color: rgba(0, 0, 0, 1)">; import path from </span>"path"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 取消安装devtools后，则不需要用到此对象，可以注释掉</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";</span> const isDevelopment = process.env.NODE_ENV !== "production"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Scheme must be registered before the app is ready</span> <span style="color: rgba(0, 0, 0, 1)">protocol.registerSchemesAsPrivileged([ { scheme: </span>"app", privileges: { secure: <span style="color: rgba(0, 0, 255, 1)">true</span>, standard: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> } }, ]); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建应用主窗口</span> const createWindow = async () =><span style="color: rgba(0, 0, 0, 1)"> { const win </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否开启node集成，默认false</span> nodeIntegration: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true</span> contextIsolation: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在页面运行其他脚本之前预先加载指定的脚本</span> preload: path.join(__dirname, "preload.js"<span style="color: rgba(0, 0, 0, 1)">), }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">fasle:无框窗体(没有标题栏、菜单栏)</span> frame: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> <span style="color: rgba(0, 0, 0, 1)"> win.show(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (process.env.WEBPACK_DEV_SERVER_URL) { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the url of the dev server if in development mode</span> <span style="color: rgba(0, 0, 0, 1)"> await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">process.env.IS_TEST) win.webContents.openDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { createProtocol(</span>"app"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the index.html when not in development</span> await win.loadURL("app://./index.html"<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">监听窗口重置大小后事件，若触发则给渲染进程发送消息</span> win.on("resize", () =><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.send(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, win.isMaximized()); }); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Quit when all windows are closed.</span> app.on("window-all-closed", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it is common for applications and their menu bar</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> to stay active until the user quits explicitly with Cmd + Q</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform !== "darwin"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); app.on(</span>"activate", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it's common to re-create a window in the app when the</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> dock icon is clicked and there are no other windows open.</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (BrowserWindow.getAllWindows().length === 0<span style="color: rgba(0, 0, 0, 1)">) createWindow(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 通常我们使用触发器的 .on 函数来监听 Node.js 事件。</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 但是 Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。 参见 https://github.com/electron/electron/pull/21972。</span> app.whenReady().then(() =><span style="color: rgba(0, 0, 0, 1)"> { createWindow(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口最小化</span> ipcMain.on("window-min", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.minimize(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口向下还原|最大化</span> ipcMain.on("window-max", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); const isMaximized </span>=<span style="color: rgba(0, 0, 0, 1)"> win.isMaximized(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isMaximized) { win.unmaximize(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.maximize(); } }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口关闭</span> ipcMain.on("window-close", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.destroy(); }); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 注释了此种方式改用官方推荐的专用方法来实现事件的监听</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> app.on("ready", async () => {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> //启动慢的原因在此，注释掉它后能换来极致的快感</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // if (isDevelopment && !process.env.IS_TEST) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // // Install Vue Devtools</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // try {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // await installExtension(VUEJS_DEVTOOLS);</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // } catch (e) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // console.error("Vue Devtools failed to install:", e.toString());</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> createWindow();</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> });</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Exit cleanly on request from parent process in development mode.</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevelopment) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform === "win32"<span style="color: rgba(0, 0, 0, 1)">) { process.on(</span>"message", (data) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (data === "graceful-exit"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { process.on(</span>"SIGTERM", () =><span style="color: rgba(0, 0, 0, 1)"> { app.quit(); }); } }</span></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> </li> <li><span>完成上述两个步骤后启用应用，控制面板中提示有错误消息，如下图所示：</span> <div><img src="https://1000bd.com/contentImg/2023/06/14/020300033.png" alt="" loading="lazy" class="medium-zoom-image"> <p> </p> <p style="margin: 0"> 解决办法：根目录下<span style="color: rgba(58, 195, 243, 1)">vue.config.js</span> 文件 <span style="color: rgba(58, 195, 243, 1)">pluginOptions.electronBuilder</span> 节点添加内容 <span style="color: rgba(58, 195, 243, 1)">preload: "src/main/preload.js"</span>，具体内容如下所示：</p> <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_d170136a-d469-4306-8463-5ca07a9851e5" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_d170136a-d469-4306-8463-5ca07a9851e5" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_d170136a-d469-4306-8463-5ca07a9851e5" class="cnblogs_code_hide"> <pre><span style="color: rgba(0, 0, 0, 1)"> pluginOptions: { electronBuilder: { mainProcessFile: </span>"src/main/index.js", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主进程入口文件</span> mainProcessWatch: ["src/main"], <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 检测主进程文件在更改时将重新编译主进程并重新启动</span> preload: "src/main/preload.js", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 预加载js</span> <span style="color: rgba(0, 0, 0, 1)"> }, },</span></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> </div> </li> <li> <span style="color: rgba(58, 195, 243, 1)">src/renderer/App.vue</span> <span>在功能区域为功能按钮绑定点击事件及处理，具体内容如下所示：</span> <div> <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_627d4249-a2ec-4053-ba4e-a2d80d875ecf" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_627d4249-a2ec-4053-ba4e-a2d80d875ecf" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_627d4249-a2ec-4053-ba4e-a2d80d875ecf" class="cnblogs_code_hide"> <pre><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 style="color: rgba(0, 0, 0, 1)">span :class</span>="<span style="color: rgba(0, 0, 0, 1)">{ iconfont: true, 'icon-zuidahua': isMaximized, 'icon-window-max_line': !isMaximized, }</span>" ></span> </div> <div title="关闭" @click="close"> <span class="iconfont icon-guanbi"></span> </div> </div> </header> <main>我是主体</main> </div> </template> <script><span style="color: rgba(0, 0, 0, 1)"> export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> { data: () </span>=><span style="color: rgba(0, 0, 0, 1)"> ({ winIcon: `${process.env.BASE_URL}favicon.ico`, winTitle: process.env.VUE_APP_NAME, isMaximized: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, }), mounted() { window.windowApi.resize(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.resize); }, computed: { maximizeTitle() { </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized ? "向下还原" : "最大化"<span style="color: rgba(0, 0, 0, 1)">; }, }, methods: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">扩展</span> <span style="color: rgba(0, 0, 0, 1)"> expand() { </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$message({ type: </span>"success"<span style="color: rgba(0, 0, 0, 1)">, message: </span>"我点击了扩展"<span style="color: rgba(0, 0, 0, 1)">, }); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最小化</span> <span style="color: rgba(0, 0, 0, 1)"> minimize() { window.windowApi.minimize(); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">向下还原|最大化</span> <span style="color: rgba(0, 0, 0, 1)"> maximize() { window.windowApi.maximize(); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 窗口关闭</span> <span style="color: rgba(0, 0, 0, 1)"> close() { window.windowApi.close(); }, </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* * 重置窗体大小后的回调函数 * @param {事件源对象} event * @param {参数} args </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> resize(event, args) { </span><span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized =<span style="color: rgba(0, 0, 0, 1)"> args; }, }, }; </span></script> <style lang="scss"><span style="color: rgba(0, 0, 0, 1)"> $titleHeight: 40px; $iconSize: 35px; body { margin: 0px; } #app { font</span>-family: "微软雅黑"<span style="color: rgba(0, 0, 0, 1)">; color: #2c3e50; display: flex; flex</span>-<span style="color: rgba(0, 0, 0, 1)">direction: column; header { background: #16407b; color: #8c8663; height: $titleHeight; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; display: flex; .titleArea { flex</span>-grow: 10<span style="color: rgba(0, 0, 0, 1)">; padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; display: flex; align</span>-<span style="color: rgba(0, 0, 0, 1)">items: center; img { width: 24px; height: 24px; } span { padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; } } .featureArea { flex</span>-grow: 1<span style="color: rgba(0, 0, 0, 1)">; display: flex; justify</span>-content: flex-<span style="color: rgba(0, 0, 0, 1)">end; color: white; div { width: $iconSize; height: $iconSize; line</span>-<span style="color: rgba(0, 0, 0, 1)">height: $iconSize; text</span>-<span style="color: rgba(0, 0, 0, 1)">align: center; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 最小化 最大化悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:hover { background: #6fa8ff; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 关闭悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:last</span>-<span style="color: rgba(0, 0, 0, 1)">child:hover { background: red; } } } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主体区域铺满剩余的整个宽、高度</span> <span style="color: rgba(0, 0, 0, 1)"> main { background: #e8eaed; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; height: calc(100vh </span>-<span style="color: rgba(0, 0, 0, 1)"> $titleHeight); } } </span></style></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> </div> </li> <li><span>现在还差最后一步，在拖拽标题栏的时候，也需要能改变窗体位置和大小，具体内容如下所示：</span> <div><img src="https://1000bd.com/contentImg/2023/06/14/020301375.png" alt="" loading="lazy" class="medium-zoom-image"></div> </li> </ol> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(255, 153, 204, 1)">标题栏最终的交互效果，如下图所示：</span></strong></span></p> <p style="margin: 0"><img src="https://1000bd.com/contentImg/2023/06/14/020301190.gif" alt="" loading="lazy" class="medium-zoom-image"></p> <p> </p> <p> <span style="font-family: "Microsoft YaHei"; font-size: 18px"><strong>4、自定义右键菜单项</strong></span></p> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 15px">当前在开发模式下启动应用后也会自启动调试工具（devtools）便于技术人员分析并定位问题，如果关闭调试工具后就没有渠道再次启用调试工具了。还有场景就是在非开发模式下默认是不启用调试工具的，应用出现问题后也需要启用调试工具来分析定位问题。这个时候呢，参考浏览器鼠标右键功能，给应用添加右键菜单项功能包含有：重新加载、调试工具等。右键菜单项在主进程中 <span style="color: rgba(58, 195, 243, 1)">src/main/index.js</span> 管理，通过给 </span><span style="color: rgba(58, 195, 243, 1)">BrowserWindow</span> 对象 <span style="color: rgba(58, 195, 243, 1)">webContents</span> 属性绑定鼠标右键处理监听处理，具体内容如下所示：</p> <div class="cnblogs_code"><img src="https://1000bd.com/contentImg/2022/06/12/011133416.gif" id="code_img_closed_6c02438e-981c-4f9f-a585-c50490329440" class="code_img_closed"><img src="https://1000bd.com/contentImg/2022/06/12/011133546.gif" id="code_img_opened_6c02438e-981c-4f9f-a585-c50490329440" class="code_img_opened" style="display: none"> <div id="cnblogs_code_open_6c02438e-981c-4f9f-a585-c50490329440" class="cnblogs_code_hide"> <pre>"use strict"<span style="color: rgba(0, 0, 0, 1)">; import { app, protocol, BrowserWindow, ipcMain, Menu } from </span>"electron"<span style="color: rgba(0, 0, 0, 1)">; import { createProtocol } from </span>"vue-cli-plugin-electron-builder/lib"<span style="color: rgba(0, 0, 0, 1)">; import path from </span>"path"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 取消安装devtools后，则不需要用到此对象，可以注释掉</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";</span> const isDevelopment = process.env.NODE_ENV !== "production"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Scheme must be registered before the app is ready</span> <span style="color: rgba(0, 0, 0, 1)">protocol.registerSchemesAsPrivileged([ { scheme: </span>"app", privileges: { secure: <span style="color: rgba(0, 0, 255, 1)">true</span>, standard: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> } }, ]); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建应用主窗口</span> const createWindow = async () =><span style="color: rgba(0, 0, 0, 1)"> { const win </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否开启node集成，默认false</span> nodeIntegration: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true</span> contextIsolation: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在页面运行其他脚本之前预先加载指定的脚本</span> preload: path.join(__dirname, "preload.js"<span style="color: rgba(0, 0, 0, 1)">), }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">fasle:无框窗体(没有标题栏、菜单栏)</span> frame: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> <span style="color: rgba(0, 0, 0, 1)"> win.show(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (process.env.WEBPACK_DEV_SERVER_URL) { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the url of the dev server if in development mode</span> <span style="color: rgba(0, 0, 0, 1)"> await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">process.env.IS_TEST) win.webContents.openDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { createProtocol(</span>"app"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the index.html when not in development</span> await win.loadURL("app://./index.html"<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">监听窗口重置大小后事件，若触发则给渲染进程发送消息</span> win.on("resize", () =><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.send(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, win.isMaximized()); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">添加右键菜单项</span> <span style="color: rgba(0, 0, 0, 1)"> createContextMenu(win); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">给指定窗体创建右键菜单项</span> const createContextMenu = (win) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自定义右键菜单</span> const template =<span style="color: rgba(0, 0, 0, 1)"> [ { label: </span>"重新加载"<span style="color: rgba(0, 0, 0, 1)">, accelerator: </span>"ctrl+r", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">快捷键</span> click: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () { win.reload(); }, }, { label: </span>"调试工具"<span style="color: rgba(0, 0, 0, 1)">, click: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () { const isDevToolsOpened </span>=<span style="color: rgba(0, 0, 0, 1)"> win.webContents.isDevToolsOpened(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevToolsOpened) { win.webContents.closeDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.openDevTools(); } }, }, ]; const contextMenu </span>=<span style="color: rgba(0, 0, 0, 1)"> Menu.buildFromTemplate(template); win.webContents.on(</span>"context-menu", () =><span style="color: rgba(0, 0, 0, 1)"> { contextMenu.popup({ window: win }); }); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Quit when all windows are closed.</span> app.on("window-all-closed", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it is common for applications and their menu bar</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> to stay active until the user quits explicitly with Cmd + Q</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform !== "darwin"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); app.on(</span>"activate", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it's common to re-create a window in the app when the</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> dock icon is clicked and there are no other windows open.</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (BrowserWindow.getAllWindows().length === 0<span style="color: rgba(0, 0, 0, 1)">) createWindow(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 通常我们使用触发器的 .on 函数来监听 Node.js 事件。</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 但是 Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。 参见 https://github.com/electron/electron/pull/21972。</span> app.whenReady().then(() =><span style="color: rgba(0, 0, 0, 1)"> { createWindow(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口最小化</span> ipcMain.on("window-min", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.minimize(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口向下还原|最大化</span> ipcMain.on("window-max", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); const isMaximized </span>=<span style="color: rgba(0, 0, 0, 1)"> win.isMaximized(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isMaximized) { win.unmaximize(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.maximize(); } }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口关闭</span> ipcMain.on("window-close", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.destroy(); }); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 注释了此种方式改用官方推荐的专用方法来实现事件的监听</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> app.on("ready", async () => {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> //启动慢的原因在此，注释掉它后能换来极致的快感</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // if (isDevelopment && !process.env.IS_TEST) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // // Install Vue Devtools</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // try {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // await installExtension(VUEJS_DEVTOOLS);</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // } catch (e) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // console.error("Vue Devtools failed to install:", e.toString());</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> createWindow();</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> });</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Exit cleanly on request from parent process in development mode.</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevelopment) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform === "win32"<span style="color: rgba(0, 0, 0, 1)">) { process.on(</span>"message", (data) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (data === "graceful-exit"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { process.on(</span>"SIGTERM", () =><span style="color: rgba(0, 0, 0, 1)"> { app.quit(); }); } }</span></pre> </div> <span class="cnblogs_code_collapse">点击查看代码</span></div> <p><img src="https://1000bd.com/contentImg/2023/06/14/020301517.gif" alt="" loading="lazy" class="medium-zoom-image"></p> <p> </p> <p>下一篇中将介绍项目打包等事宜</p> <p>感谢您阅读本文，如果本文给了您帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货~</p> <p>源码地址：<a href="https://gitee.com/libaitianya/electron-vue-element-template" rel="noopener" target="_blank">https://gitee.com/libaitianya/electron-vue-element-template</a></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1342627">李沐深度学习记录3：11模型选择、欠拟合和过拟合</a> <br /> <a href="/Article/Index/633525">Api接口封装</a> <br /> <a href="/Article/Index/1188620">LeetCode刷题复盘笔记—一文搞懂0 - 1背包之474. 一和零问题（动态规划系列第十篇）</a> <br /> <a href="/Article/Index/1480031">气膜体育馆：低碳环保体育新潮流</a> <br /> <a href="/Article/Index/1171708">python异常常见处理</a> <br /> <a href="/Article/Index/922478">无服务器学习02:挑战及发展</a> <br /> <a href="/Article/Index/732797">webpack高级应用篇（十五）：基于 Promise 的动态 Remote，让模块联邦版本化</a> <br /> <a href="/Article/Index/1050145">ORA-16171当DG出现GAP的时候,如何强制启动备库</a> <br /> <a href="/Article/Index/664614">prompt learning受控文本生成作诗</a> <br /> <a href="/Article/Index/1640527">Unix环境高级编程--8-进程控制---8.1-8.2进程标识-8.3fork函数-8.4 vfork函数</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://www.cnblogs.com/libaitianya/p/16704155.html </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>