Чтобы изучить Electron, я разделил каждую демонстрацию electron-api-demo на отдельные приложения. Я считаю, что небольшие порции размером с укус помогают мне освоить новую технологию после того, как я освоил Hello World.
В этом пошаговом руководстве показано, как закрыть это главное окно.
- Начиная с нуля, создайте новый каталог.
- Создайте новый файл package.json, содержащий следующее:
3. Из Терминала запустите
npm install
Это скажет npm установить Electron.
Кроме того, меня движет то, что я должен продолжать устанавливать эти пакеты npm. Я предполагаю, что это эффект перенесения из моих дней Visual Studio. Я продолжаю думать: «Я установил его один раз. это уже на моей локальной машине. Почему я должен продолжать переустанавливать его??» Но теперь я говорю себе, хорошо, это эквивалентно добавлению пакета в Visual Studio. Круг жизни замкнулся…
4. Добавьте файл index.html в каталог, содержащий
Я скопировал стиль из приложения electronic-api-demo, потому что я новичок в этом.
5. Добавьте в каталог файл index.js, содержащий
Теперь все становится интереснее.
- Как ни странно, самая важная строка находится внизу, потому что инженеры. Как я упоминал в предыдущем посте, вам нужно дождаться полной загрузки DOM, чтобы найти кнопки. document.addEventListener(‘DOMContentLoaded’) позаботится об этом за нас. Итак, мы подключаем кнопки после загрузки содержимого DOM.
- Нам нужен ipcRenderer для связи с главным окном.
- В wireUpButtons() мы находим кнопку в DOM и подключаем к ней прослушиватель событий для клика. При каждом нажатии кнопки (или, в данном случае, ссылки, которую можно щелкнуть только один раз), ipcRenderer отправляет сообщение в файл main.js. Говоря о которых…
6. Добавьте файл main.js
Поскольку это файл main.js, он использует ipcMain. Когда ipcMain получает сообщение «закрыть приложение», он делает именно это.
И вы возвращаетесь к своей уже запланированной операционной системе, уже работающей… (шутка от тех, кто вырос, когда MTV действительно показывал видео).
