Предварительное исследование электрона - теория

Когда дело доходит до создания настольных приложений, первое, что приходит на ум, должно быть NW.js, но это было прохладно. До появления Electron все это было доведено до пика, а фронтенд-щупальца распространились на более широкое системное приложение.

Статья впервые опубликована в блоге Jartto, при перепечатке статьи обязательно указывайте источник статьи в виде гиперссылки.

1. Что такое Электрон?

ElectronКGithubразвиваться сHTML,CSSа такжеJavaScriptБиблиотека с открытым исходным кодом для создания кроссплатформенных настольных приложений.ElectronпоставивChromiumа такжеNode.jsв ту же среду выполнения и упаковать его какMac,Windowsа такжеLinuxПриложение в системе достигает этой цели.
elctron

ChromiumдаGoogleдля развитияChromeПроект с открытым исходным кодом, запущенный браузером,ChromiumэквивалентноChromeИнженерная или экспериментальная версия (хотяChromeТакже естьβверсии), новые функции будут первыми вChromiumОн будет реализован наChromeвверх, такChromeФункция будет относительно отсталой, но более стабильной.

2. Быстрый старт

Сначала следуйте инструкциям на официальном сайте, чтобы быстро начать проект, что является самым простым и самым грубым шагом входа.

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start

3. Простой пример

После запуска проекта вы увидитеHello World!Окно приложения очень простое, поэтому не буду вдаваться в подробности. меня больше интересуетElectron API Demos app, все могут идтиЗагрузка с официального сайта:

Electron API Demos app

существуетElectron API Demos app, мы можем проверить официальный API и несколько демонстраций, и настоятельно рекомендуется получить представление о нем. Только когда вы узнаете силу этого, вы будете взволнованы и зажжете страсть к обучению.

В-четвертых, структура каталогов

Что ж, приступим к делу, давайте воспользуемся официальным стартовым проектом, чтобы сделать простое объяснение. Давайте сначала рассмотрим базовую структуру каталогов:

.
├── LICENSE.md
├── README.md
├── index.html
├── main.js
├── node_modules
│   ├── @types
│   ├── ajv
│   ├── ansi-regex
│   ├── ...
│   ├── wrappy
│   ├── xtend
│   └── yauzl
├── package.json
└── renderer.js

Здесь мы в основном сосредоточимся на следующих трех файлах:
1.main.js, то есть вход всего приложения, которое в основном используется для создания окон настольных приложений и наблюдения за событиями основного процесса.

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // 启动文件入口，如 index.html
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  // 开启 Chromium DevTools
  mainWindow.webContents.openDevTools()
  // 监听窗口关闭事件
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
// 加载就绪
app.on('ready', createWindow)
// 监听所有窗口关闭的事件
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
// 激活窗口
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

2.index.html, относится к процессу рендеринга, просто простая страница.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- 在渲染进程中可以使用所有的 Node.js APIs -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    <script>
      // 当然，我们也可以引入其他 js 文件
      require('./renderer.js')
    </script>
  </body>
</html>

3.renderer.js, принадлежит процессу рендеринга, который должен загрузить бизнес-логика нашей страницыJS, простой пример может быть следующим.

let myNotification = new Notification('Jartto', {
  body: 'Hello Everybody!'
})
myNotification.onclick = () => {
  console.log('Click!')
}

Основной процесс и процесс рендеринга будут подробно описаны ниже, и здесь вам нужно только понять общую структуру кода.

Пять, весь пакет от имени волос

В началеCodingПрежде нам необходимо знать базовый состав и основные модули десктопных приложений. здесь сOS XПример:

base modules

На приведенном выше рисунке перечислены основные функции, которые должно охватывать десктопное приложение.Конечно, есть еще много низкоуровневых модулей, визуально не заметных, но все же важных. Далее они будут перечислены один за другим и попытаются проиллюстрировать их примерами.

пример кодаположить все этоGithubвверх, добро пожаловатьStar.

6. Основной процесс и процесс рендеринга

Самое важное в изучении Electron — это понимание основного процесса и процесса рендеринга, иначе уникальный метод процесса может не вызваться.

Electronв, поpackage.jsonсерединаmain.jsВыполняемый процесс является основным процессом. Основной процесс используется для созданияGUIинтерфейс дляwebотображение страницы.ElectronЗависит отChromiumОтвечает за отображение страницы, поэтому при создании страницы будет создан соответствующий процесс визуализации.

Electron Process

Основной процесс создаетсяBrowserWindowобъект для созданияwebпоказать страницу,BrowserWindowработает в своем собственном процессе рендеринга. когдаBrowserWindowПри уничтожении соответствующий процесс рендеринга также будет прекращен.

Семь, межпроцессное взаимодействие

Поскольку есть два процесса, обязательно будет задействована взаимная связь между процессами.Вот два понятия:
1.Electron ipcMainмодуль
ipcMainмодули - это классыEventEmitterпример. При использовании в основном процессе он управляет асинхронными или синхронными сообщениями, отправляемыми процессом рендеринга (веб-страницей). Сообщения, отправленные из процесса рендерера, инициируют события.

2.Electron ipcRendererмодуль
pcRendererмодуль - этоEventEmitterэкземпляр класса. Он предоставляет ограниченное количество способов отправки синхронных или асинхронных сообщений из процесса визуализации в основной процесс. Также может быть получен ответ от основного процесса.

В основном процессе, т.main.js, добавьте следующий код:

// 主进程
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});
ipcMain.on('synchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});

В процессе рендеринга, т.ipc/index.jsДобавьте в файл следующий код:

// 渲染进程 (web page).
const ipcRenderer = require('electron').ipcRenderer;
console.log(ipcRenderer.sendSync('synchronous-message', 'sync-ping')); // prints "pong"
ipcRenderer.on('asynchronous-reply', function(event, arg) {
  console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'async-ping');

Подробный код можно посмотретьПример кода: ipc

Существует также метод межпроцессного взаимодействия:Electron remoteмодуль.

remoteМодули обеспечивают простой способ межпроцессного взаимодействия (IPC) между процессом визуализации (веб-страницей) и основным процессом.

пройти черезremoteвызов основного процессаBrowserWindowдля создания окна приложения:

// 渲染进程
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
let win = new BrowserWindow({ width: 100, height: 100 });
win.loadURL('http://www.jartto.wang');

Подробный код можно посмотретьПример кода: удаленный

Восемь, модуль BrowserWindow

в основном процессеmain.js, мы тоже виделиBrowserWindowЛегко использовать простое окно вызова, а более сложные приложения могут потребовать от нас чтенияДокументация, знаком сAPI.

// 在主进程中.
const {BrowserWindow} = require('electron')
// 或者从渲染进程中使用 `remote`.
// const {BrowserWindow} = require('electron').remote
let win = new BrowserWindow({width: 800, height: 600})
win.on('closed', () => {
  win = null
})
// 加载远程 URL
win.loadURL('http://jartto.wang')
// 或加载本地 HTML 文件
win.loadURL(`file://${__dirname}/app/index.html`)

9. Используйте веб-просмотр

а такжеiframeразные,webviewи ваше приложение выполняет другой процесс. Он не владеет разрешениями процесса рендеринга, а взаимодействие между приложением и внедренным содержимым полностью асинхронно, потому что это гарантирует, что встроенное содержимое не повлияет на безопасность приложения.

webviewЗапуская в процессе рендеринга, мы добавляем следующееjsКод:

window.onload = function() {
  var webview = document.getElementById("foo");
  var indicator = document.querySelector(".indicator");
  var loadstart = function() {
    indicator.innerText = "loading...";
  }
  var loadstop = function() {
    indicator.innerText = "";
  }
  webview.addEventListener("did-start-loading", loadstart);
  webview.addEventListener("did-stop-loading", loadstop);
  webview.addEventListener("dom-ready", function() {
    // webview.openDevTools();
    console.log(webview.getTitle());
  });
}

И вhtmlДобавьте два контейнера в:

<div class="indicator"></div>
<webview id="foo" src="http://www.jartto.wang/"></webview>

Чтобы не выглядеть слишком уродливо, добавим следующий код css:

body { margin: 0; }
#foo {
  width: 100%;
  height: 100vh;
}

хорошо,webviewЭто так просто в использовании.

Подробный код можно посмотретьПример кода: веб-просмотр

10. Диалоговый модуль

Dialogмодуль обеспечиваетAPIдля отображения собственных системных диалогов, таких как окно открытия файла,alertкоробка, такwebПриложения могут предоставлять пользователям те же возможности, что и системные приложения. Простой пример приведен ниже:

1. Откройте выбранные файлы и каталоги

var win = ...;  // BrowserWindow in which to show the dialog
const dialog = require('electron').dialog;
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));

2. Подсказка окна ошибки

const dialog = require('electron').dialog;
dialog.showErrorBox('Jartto', 'Hello world');
// 或者传入更多的参数
// console.log(dialog.showMessageBox({
//   browserWindow: mainWindow,
//   options: {
//     type: 'error',
//     title: 'Jartto',
//     message: 'Hello World',
//   }
// }));

Подробный код можно посмотретьПример кода: main.js

Одиннадцать, модуль Global-Shortcut

global-shortcutМодуль может удобно задавать (регистрировать/дерегистрировать) горячие клавиши для различных пользовательских операций за вас, давайте зарегистрируем одну для приложения.ctrl+xГлобальная клавиша быстрого доступа, когда мы нажимаем клавишу быстрого доступа, системное всплывающее сообщение отвечает нам:

const globalShortcut = require('electron').globalShortcut;
const dialog = require('electron').dialog;
app.on('ready', function(){
  createWindow();
  // Register a 'ctrl+x' shortcut listener.
  var ret = globalShortcut.register('ctrl+x', function() {
    dialog.showErrorBox('Jartto', 'ctrl+x is pressed')
  })
  if (!ret) {
    dialog.showErrorBox('Jartto', 'registration failed')
  }
  // Check whether a shortcut is registered.
  console.log(globalShortcut.isRegistered('ctrl+x'));
})
app.on('will-quit', function() {
  // Unregister a shortcut.
  globalShortcut.unregister('ctrl+x');
  // Unregister all shortcuts.
  globalShortcut.unregisterAll();
});

Подробный код можно посмотретьПример кода: main.js

MenuСуществует три типа меню, и использование каждого меню отличается.Давайте приведем пример ниже:
1. Системное меню

// 窗口菜单
const remote = require('electron').remote;
const Menu = remote.Menu;
let template = [...]; // 省略参数，具体请查看 demo
let menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

2. Контекстное меню

const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
// 右键菜单
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
window.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);

3. Меню в трее

let appIcon = new Tray(path.normalize(__dirname + '/image/icon.png'));
let contextMenu = Menu.buildFromTemplate([
  { label: '菜单一', type: 'radio' },
  { label: '菜单二', type: 'radio' },
  { label: '菜单三', type: 'radio', checked: true },
  { label: '关于', type: 'radio' }
]);
appIcon.setContextMenu(contextMenu);

Подробный код можно посмотретьПример кода: меню

Тринадцать, электронный монитор мощности

power-monitorМодули используются для прослушивания изменений энергетических зон. Может использоваться только в основном процессе. существуетappмодульныйreadyПосле срабатывания события модуль нельзя использовать.

// 能源区变化，系统挂起和恢复，交流电和电池切换时
require('electron').powerMonitor.on('suspend', function() {
  console.log('The system is going to sleep');
});
require('electron').powerMonitor.on('on-ac', function() {
  console.log('The system is using AC power');
});

Подробный код можно посмотретьПример кода: main.js

14. Системный лоток

В OS X панель обычно отображается в правом верхнем углу монитора, простой пример может выглядеть так:

appIcon = new Tray(path.normalize(__dirname + '/image/icon.png'));
var contextMenu = Menu.buildFromTemplate([
  { label: 'Item1', type: 'radio' },
  { label: 'Item2', type: 'radio' },
  { label: 'Item3', type: 'radio', checked: true },
  { label: 'Item4', type: 'radio' }
]);
console.log(appIcon);
appIcon.setToolTip('This is my application.');
appIcon.setContextMenu(contextMenu);

Если вы хотите поддерживать отображение изображений с разными разрешениями одновременно, вы можетеsizeКартинки помещаются в одну папку, нет необходимостиDPIсуффикс Например:

images/
├── icon.png
├── icon@2x.png
└── icon@3x.png

Подробный код можно посмотретьПример кода: main.js

15. Модуль Electron desktopCapturer

desktopCapturerМодули можно использовать для получения доступных ресурсов, доступ к которым можно получить черезgetUserMediaзахвачен. Таким образом, мы можем захватывать другие окна и отображать содержимое по желанию. Здесь мы подошли, чтобы захватить имяScreen 2экран, код выглядит следующим образом:

// 在渲染进程中.
var desktopCapturer = require('electron').desktopCapturer;
desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
  console.log('sources', sources);
  if (error) throw error;
  for (var i = 0; i < sources.length; ++i) {
    if (sources[i].name == "Screen 2") {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});
function gotStream(stream) {
  console.log(stream, 'stream');
  document.querySelector('video').src = URL.createObjectURL(stream);
}
function getUserMediaError(e) {
  console.log('getUserMediaError');
}

существуетhtml, нужно добавитьvideoэлемент:

<video> desktop capturer </video>

В процессе обучения я пытался захватить видеоокно, чтобы мы могли захватить содержимое разных окон и поместить их в одно и то же окно, это немного похоже на систему наблюдения?

sourcesЯвляетсяSourceмассив объектов, каждыйSourceПредставляет захваченный экран или отдельное окно и имеет следующие свойства:

id string - идентификатор окна захвата или экрана, используемого в Navigator.webkitgetUsermedia. Формат - это окно: XX или экран: XX, XX - случайное число.
Name String - описательное имя окна захвата или экрана. Если ресурс представляет собой экран, имя является целый экран или экран ; Если ресурс представляет собой окно, имя является заголовка окна.
thumbnail NativeImage — миниатюра.

Подробный код можно посмотретьПример кода: desktopCapturer

16. Электронный модуль webFrame

Затем продолжайте тему выше, мы хотим захватить все окна в одном окне, тогда вы можете использоватьweb-frame, этот модуль позволяет настроить способ отображения текущей веб-страницы. Например, увеличить текущую страницу, чтобы200%.

let webFrame = require('electron').webFrame;
webFrame.setZoomFactor(2);

Подробный код можно посмотретьПример кода: веб-фрейм

Seventeen, модуль буфера обмена Electron

clipboardМодули предоставляют методы для операций копирования и вставки, очень полезная функция. В следующем примере показано, как записать строку вclipboard :

const clipboard = require('electron').clipboard;
clipboard.writeText('Hello Jartto!');

Подробный код можно посмотретьПример кода: буфер обмена

Восемнадцать, Модуль Electron CrashReporter

crash-reporterМодуль позволяет отправлять отчеты о сбоях приложений.Об этом нечего сказать.Собирайте информацию обратной связи для лучшего взаимодействия с пользователем.

const crashReporter = require('electron').crashReporter;
crashReporter.start({
  productName: 'Jartto',
  companyName: 'Jartto blog',
  submitURL: 'http://jartto.com/url-to-submit',
  autoSubmit: true
});

Девятнадцать, модуль электронного экрана

screenэкран извлечения модуляsize, дисплей, положение мыши и т. д. существуетappмодульныйreadyЭтот модуль нельзя использовать, пока не будет запущено событие.

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var mainWindow;
app.on('ready', function() {
  var electronScreen = electron.screen;
  var size = electronScreen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({ width: size.width, height: size.height });
});

20. Модуль электронной оболочки

shellМодули предоставляют связанные функции для интеграции с другими клиентами для настольных ПК.

在渲染进程中使用
const { shell } = require('electron')
// 播放声音
shell.beep();
// shell.openItem('/Users/Jartto/Documents/my-demo');
shell.openExternal('http://jartto.wang');

Подробный код можно посмотретьПример кода: оболочка

21. Модуль уведомлений-уведомлений

Все три операционные системы предоставляют приложениям средства для отправки уведомлений пользователям.ElectronРазрешить разработчикам использоватьHTML5 Notification APIОтправляйте уведомления и используйте собственные уведомления текущей операционной системы.APIчтобы отобразить его.

Примечание. Поскольку это API HTML5, его можно использовать только в процессе визуализации. Если вы хотите отображать уведомления в основном процессе, проверьте модуль уведомлений.

let myNotification = new Notification('Jartto', {
  body: 'Hello Everybody!'
})
myNotification.onclick = () => {
  console.log('通知被点击')
}

Подробный код можно посмотретьПример кода: уведомление

22. Отображение в доке

существуетOS XсерединаDockОн будет включен по умолчанию, и мы также можем сделать некоторые дополнительные элементы управления в основном процессе, такие как скрытие, настройка меню и т. д.

app.dock.hide();
app.dock.setMenu(menu);

23. Резюме демонстрации

Все примеры кодов здесь, для облегчения переключения стартовой страницы, различаем по разным директориям, нужно только поменятьmain.jsсерединаpathв пути следующим образом:

mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, '${dir-name}/index.html'),
  protocol: 'file:',
  slashes: true
}))

DemoСтруктура каталогов следующая:

.
├── LICENSE.md
├── README.md
├── clipboard
│   ├── index.html
│   └── index.js
├── desktopCapturer
│   ├── index.css
│   ├── index.html
│   └── index.js
├── file
│   ├── index.html
│   └── index.js
├── image
│   ├── icon.png
│   ├── icon@1x.png
│   └── icon@2x.png
├── index.html
├── ipc
│   ├── index.html
│   └── index.js
├── main.js
├── menu
│   ├── index.html
│   ├── index.js
│   └── index1.js
├── node_modules
│   ├── @types
│   ├── _@types_node@7.0.50@@types
│   ├── _ajv@5.5.2@ajv
│   ├── ...
│   ├── wrappy
│   ├── xtend
│   └── yauzl
├── notification
│   ├── index.html
│   └── index.js
├── offline
│   └── index.html
├── package.json
├── remote
│   ├── index.html
│   └── index.js
├── renderer.js
├── shell
│   ├── index.html
│   └── index.js
├── webFrame
│   ├── index.html
│   └── index.js
└── webview
    ├── index.html
    └── index.js

ты можешь измениться${dir-name}для переключения между различными элементами автозагрузки и просмотра демонстрации.

Двадцать четыре, отладка кода

разработать полныйElectronПриложение, отладка кода обязательно будет использоваться.Здесь он разделен на две части для отладки:
1 параGUIОтладку основного процесса, то есть отладку основного процесса, можно сделать с помощью средств разработки, здесь я используюVS CodeПроиллюстрировать:

существует.vscodeдобавить в каталогlaunch.jsonфайл, если он есть, переходим сразу ко второму шагу;

Открытьlaunch.json, напишите следующую конфигурацию;

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron Main",
      "protocol": "auto",
      "program": "${workspaceFolder}/electron-quick-start/main.js"
    },
  ]
}

бегатьdebug, Это оно;

2. Для отладки процесса рендеринга вы можете открыть инструмент отладки:

// 主进程中使用
mainWindow.webContents.openDevTools()

После отладки вы будетеChromeиспользуется вDevToolТо же, просто и эффективно.

25. Выпуск пакета

ElectronПосле того, как разработка приложения завершена, соответствующие платформенные приложения упаковываются и производятся.Рекомендуемые инструменты:electron-packagerа такжеasar.

1. использоватьelectron-packagerУпаковать ваше приложение для всех систем очень просто. Проще говоря,electron-packagerпомочь тебе сделать всеElectronРабота по упаковке вашего приложения, которая в конечном итоге создает установочный пакет для платформы, которую вы хотите распространять.

его можно использовать какCLIЧасть приложения или процесса сборки, более сложные ситуации сборки выходят за рамки этой статьи, но мы можем упростить упаковку, если воспользуемся скриптом упаковки. использоватьelectron-packagerБолее хлопотно, основная команда для упаковки приложения:

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

Конкретные параметры описываются следующим образом:

location of projectрасположение папки вашего проекта;
name of projectОпределите название вашего проекта;
platformРешите, на какой платформе строить (allвключая Windows, Mac и Linux);
architectureРешите, на какой архитектуре строить (x86 или x64, все означает обе);
electron versionпусть вы выбираете, что использоватьElectronВерсия;

Первая упаковка занимает много времени, т.к. нужно скачивать бинарные файлы платформы, а последующая упаковка будет намного быстрее.

существуетOS XКоманда для упаковки приложения выглядит следующим образом:

electron-packager ~/Projects/jartto-demo MyElectron --all --version=0.30.2 --out=~/Desktop --overwrite --icon=~/Projects/jartto-demo/app/img/app-icon.icns

Параметры команды относительно просты для понимания. Чтобы получить красивые значки, вам сначала нужно найти программное обеспечение, подобное этому, которое может помещатьPNGинструмент для преобразования файлов в эти форматы, преобразовать его в.icnsФормат(Macс) или.icoФормат(Windowиспользовать). если в не-Windowsсистема даетWindowsПакет приложений платформы, необходимо установитьwine(Macдля пользователейbrew,Linuxдля пользователейapt-get).

Очень неудобно каждый раз набирать такую длинную команду.package.jsonДобавьте еще один скрипт. Во-первых, поставитьelectron-packagerУстановить как зависимость разработки:

npm install --save-dev electron-packager

Теперь мы можемpackage.jsonДобавьте скрипт в:

"scripts": {
  "start": "electron .",
  "package": "electron-packager ./ MyElectron --all --out ~/Desktop/jartto-demo --version 0.30.2 --overwrite --icon=./app/img/app-icon.icns"
}

Выполните следующую команду в командной строке:

npm run-script package

Эта команда упаковки запуститсяelectron-packager, найдите файл целевого приложения в текущем каталоге, упакуйте его и сохраните на рабочем столе. если вы используетеWindowssystem, скрипт нужно модифицировать, но изменения небольшие.

2. Используйтеasar
Установитьasar

npm i asar -g
npm i asar --save-dev

редактироватьpackage.json

"scripts": {
    "start": "electron .",
    "build": "electron-packager . MyFirstApp --ignore=node_modules/electron-* --platform=win32 --arch=x64 --version=0.32.3",
    "package": "asar pack MyFirstApp-win32-x64/resources/app MyFirstApp-win32-x64/resources/app.asar && rm -rf MyFirstApp-win32-x64/resources/app"
}

Затем выполните:

npm run package

26. Структура исходного кода Электрона

Конечно, если нужно копнуть глубжеElectron, официальный также оказывает некоторую помощь, мы можем узнать в глубину через следующую структуру.

Electron
├──atom - Electron 的源代码
|  ├── app - 系统入口代码
|  ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面
|  |   ├── lib - 主进程初始化代码中 JavaScript 部分的代码
|  |   ├── ui - 不同平台上 UI 部分的实现
|  |   |   ├── cocoa - Cocoa 部分的源代码
|  |   |   ├── gtk - GTK+ 部分的源代码
|  |   |   └── win - Windows GUI 部分的源代码
|  |   ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
|  |   ├── api - 主进程 API 的实现
|  |   |   └── lib - API 实现中 Javascript 部分的代码
|  |   ├── net - 网络相关的代码
|  |   ├── mac - 与 Mac 有关的 Objective-C 代码
|  |   └── resources - 图标，平台相关的文件等
|  ├── renderer - 运行在渲染进程中的代码
|  |   ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
|  |   └── api - 渲染进程 API 的实现
|  |       └── lib - API 实现中 Javascript 部分的代码
|  └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环
|      |        整合到 Chromium 的事件循环中时用到的工具函数和代码
|      ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
|      └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
|          └── lib - API 实现中 Javascript 部分的代码
├── chromium_src - 从 Chromium 项目中拷贝来的代码
├── docs - 英语版本的文档
├── docs-translations - 各种语言版本的文档翻译
├── spec - 自动化测试
├── atom.gyp - Electron 的构建规则
└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则

27. Учебные ресурсы

В процессе обучения я нашла много хороших ресурсов, делюсь ими со всеми и вместе развиваюсь:
Электронная официальная документация
Электронная китайская документация
Начало работы с Электроном
Разрабатывайте настольные приложения с помощью Electron
Electron-Docs
Vue и Electron реализуют облачный музыкальный клиент NetEase
awesome electron
Создавайте кроссплатформенные настольные программы для парсинга с помощью Electron
electron-builder
gulp-electron

Двадцать восемь, написано в конце

Поскольку места слишком много, я намерен оставить проблемы, возникшие при разработке, в последующих статьях. Сначала спойлер, в продолжении должно быть еще две заключительные статьи, название придумали, буду github Постоянно обновляется. Покиньте портал первым!

Предварительное исследование электрона - сублимация
Предварительное изучение электрона — практика

1. Что такое Электрон?

2. Быстрый старт

3. Простой пример

В-четвертых, структура каталогов

Пять, весь пакет от имени волос

6. Основной процесс и процесс рендеринга

Семь, межпроцессное взаимодействие

Восемь, модуль BrowserWindow

9. Используйте веб-просмотр

10. Диалоговый модуль

Одиннадцать, модуль Global-Shortcut

12. Модуль меню

Тринадцать, электронный монитор мощности

14. Системный лоток

15. Модуль Electron desktopCapturer

16. Электронный модуль webFrame

Seventeen, модуль буфера обмена Electron

Восемнадцать, Модуль Electron CrashReporter

Девятнадцать, модуль электронного экрана

20. Модуль электронной оболочки

21. Модуль уведомлений-уведомлений

22. Отображение в доке

23. Резюме демонстрации

Двадцать четыре, отладка кода

25. Выпуск пакета

26. Структура исходного кода Электрона

27. Учебные ресурсы

Двадцать восемь, написано в конце