### 启动白屏（和设置的窗口颜色一样的颜色） > 原因：在窗口对象中设置颜色，启动程序是先显示窗口在加载，那么就看到了窗口设置的。 >解决方案：先进行隐藏窗口，当加载完成后，进行显示窗口即可 ```js mainWindow = new BrowserWindow({ minHeight: 650, height: 650, show: false, // 1、解决启动后白屏：先隐藏 }) // 2、在此声明周期中打开 mainWindow.on('ready-to-show', function () { mainWindow.show() // 3、解决启动后白屏：初始化后再显示 }) ``` ### 开启设备摄像头 > 需要申请权限。 - https://www.bugs.cc/p/electron-app-request-camera-and-microphone-permission-by-macos/ - http://chenhaichao.cn/showmarkdown/15 - https://github.com/Azure/BatchExplorer/blob/master/electron-builder.yml ### 拒绝多个同一个程序启动（单个窗口） > 同一个程序只能开一个窗口，其他的只能关闭。比如，一个程序双击后启动一个，但是如果多次双击会启动多个。 ~~~js const gotTheLock = app.requestSingleInstanceLock() if (!gotTheLock) { app.quit() } ~~~ > 第二个版本 ``` js const gotTheLock = app.requestSingleInstanceLock() if (!gotTheLock) { app.quit() } else { app.on('second-instance', (event, commandLine, workingDirectory) => { // 当运行第二个实例时,将会聚焦到mainWindow这个窗口 if (mainWindow) { if (mainWindow.isMinimized()) mainWindow.restore() mainWindow.focus() mainWindow.show() } }) } ``` ## 制作菜单栏 ### 第一步：去除边框窗口 > 底层部分，设置frame为false。frame默认为true ```js mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000, frame: false // 设置false为去除边框 }) ``` ### 第二步：自定义布局 > 布局部分 ```html <section id="kw"> <h1>Hello World!</h1> <div class="noDrag" ondragover="dragover(event)" ondrop="drop(event)"> <button type="button" id="maxbt">max</button> <button type="button" id="minbt">>min</button> <button type="button" id="closebt">>close</button> </div> </section> <script> import {ipcRenderer, remote} from 'electron'; // 最小化 document.getElementById("minbt").addEventListener("click", function (e) { var win = remote.getCurrentWindow(); win.minimize(); }); // 最大化或者还原 document.getElementById("maxbt").addEventListener("click", function (e) { var win = remote.getCurrentWindow(); if (!win.isMaximized()) { win.maximize(); } else { win.unmaximize(); } }); // 结束窗口 document.getElementById("closebt").addEventListener("click", function (e) { var win = remote.getCurrentWindow(); win.close(); }); // 设置是否最大化和还原： ipcRenderer.on('setMaxReset', (event, arg) => { // 接收到Main进程返回的消息 if(arg) { // 最大化了，设置还原样式 }else { // 还原了，设置最大化样式 } }) // 阻止外面文件拖拽到导航栏，进行打开了 function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); } </script> <style> #kw { /* 去除拖拽 */ -webkit-app-region: drag; /* 禁止选中文本 */ -webkit-user-select: none; } .noDrag { /* 下面这句话加不加都可以 */ -webkit-app-region: no-drag; } </style> ``` > 主程序 ``` // 监听最大化事件 mainWindow.on('maximize', function () { // 发给视图 mainWindow.webContents.send('setMaxReset', true); }) // 监听还原 mainWindow.on('unmaximize', function () { // 发给视图 mainWindow.webContents.send('setMaxReset', false); }) ``` ### 禁止系统刷新 > 我们在开发的时候，是有f5或者 ctrl + r 进行刷新。正式环境的话，一版都不会刷新。在ready-to-show生命周期内进行禁止按键 ```js /*找到主程序的index.js*/ mainWindow.on('ready-to-show', function () { if(process.env.NODE_ENV === 'production') { // 禁止默认快捷键 globalShortcut.register('F5', () => { console.log('你按了f5'); // Do stuff when Y and either Command/Control is pressed. }) globalShortcut.register('ctrl+r', () => { console.log('你按了ctrl+r'); // Do stuff when Y and either Command/Control is pressed. }) // 显示窗口 } }) ```