### 啟動白屏（和設置的窗口顏色一樣的顏色） > 原因：在窗口對象中設置顏色，啟動程序是先顯示窗口在加載，那么就看到了窗口設置的。 >解決方案：先進行隱藏窗口，當加載完成后，進行顯示窗口即可 ```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. }) // 顯示窗口 } }) ```