Команда фронтенда Могуцзе официально обосновалась в Наггетс.Надеюсь все не поскупятся на ваши похвалы(спасибо)!
Ноль, введение
Мы опубликуем серию Электрон. Эта статья в основном знакомит с основами Электрона. В будущем мы предоставим больше навыков и решений проблем в реальном бою. Надеюсь, вы продолжите обращать на нас внимание.
Эта статья в основном включает:
- Введение в Электрон
- быстрый старт
- обработать
- Пакет
- Пошаговая сводка
один,ElectronВведение
ElectronЭто платформа, которая расширяет возможности интерфейса для кроссплатформенной разработки, позволяя разработчикам создавать кроссплатформенные настольные приложения с использованием таких интерфейсных технологий, как JavaScript, HTML и CSS.ElectronпоставивChromiumа такжеNode.jsОбъедините его в одну среду выполнения и упакуйте его как приложение в системах Mac, Windows и Linux, а разработчикам нужно будет сосредоточиться только на разработке внешнего кода.
2. Быстрый старт Электрон + Реагировать
электрон предоставляет файл с именемelectron-quick-startПроект можно клонировать и использовать в качестве шаблона.В этой статье для пошагового обучения используется create-реагировать-приложение.
Создать реактивный проект
# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 electron-react 项目
create-react-app electron-react
# 启动项目
cd electron-react && npm start
Браузер открывает localhost:3000 и появляется следующий экран:
Настроить электронную среду
Создайте новый index.html в общей папке и напишите что-нибудь небрежно:
...
<div>hello world</div>
...
Затем создайте файл основного потока электрона, public/main.js, который рекомендуется писать по общедоступному пути.
const {app, BrowserWindow} = require('electron')
// 创建全局变量并在下面引用，避免被GC
let win
function createWindow () {
// 创建浏览器窗口并设置宽高
win = new BrowserWindow({ width: 800, height: 600 })
// 加载页面
win.loadFile('./index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 添加window关闭触发事件
win.on('closed', () => {
win = null // 取消引用
})
}
// 初始化后 调用函数
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
Наконец, измените путь, соответствующий основному полю в package.json, и добавьте команду запуска.
{
...
"main": "main.js",
"scripts": "electron ."
}
Выполните npm start, и появится следующий интерфейс:
Здесь я просто написал страничку, вы тоже можете писать о том, что вам интересно.
Итак, было разработано простое настольное приложение, которое действительно так просто.
3. Процесс
Электронный процесс делится на主进程а также渲染进程
Основной процесс и процесс рендеринга
Давайте взглянем на базовую структуру каталогов электронного проекта.
app
└─public
└─index.html---------------入口文件
├─main.js----------------------程序启动入口，主进程
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─src--------------------------窗口管理，渲染进程
├─components---------------通用组件模块
├─store--------------------数据共享模块
├─statics------------------静态资源模块
└─pages----------------------窗口业务模块
├─窗口A----------------窗口
└─窗口B----------------窗口
в пакете.jsonmainПроцесс файла, соответствующего полю,主进程. Electron интегрирует Chromium для отображения интерфейса окна, а содержимое, отображаемое в окне, отображается с использованием HTML. Сам Chromium представляет собой многопроцессорную архитектуру для рендеринга страниц (по умолчанию стратегия Chromium по умолчанию заключается в открытии нового процесса для каждой вкладки, чтобы гарантировать, что каждая страница независима и не влияет друг на друга. Избегайте сбоя одной страницы и вызывайте все страницы нельзя использовать), поэтому Electron также будет использовать многопроцессорную архитектуру Chromium при отображении окна. И эта многопроцессорная архитектура рендеринга называется в Electron.渲染进程（render process）.
межпроцессного взаимодействия
В электронном модуле модули, связанные с графическим интерфейсом (такие как диалог, меню и т. д.), доступны только в основном процессе, а не в процессе рендеринга. Для того, чтобы использовать их в процессе рендеринга, вам нужно использоватьipcМодуль отправляет сообщения основному процессу Ниже приведены несколько методов межпроцессного взаимодействия.
Асинхронная связь между основным процессом и процессом рендеринга, сообщения также могут отправляться из основного процесса в процесс рендеринга, см.webContents.send.
При отправке сообщения имя события — канал.
При ответе на синхронное сообщение необходимо установить event.returnValue.
Чтобы отправить асинхронные сообщения обратно отправителю, вы можете использовать event.reply(...) , этот вспомогательный метод будет автоматически обрабатывать сообщения из процесса рендеринга, тогда как event.sender.send(...) этот метод всегда будет отправлять сообщения к основному процессу.
Вот пример отправки и обработки сообщений между рендерером и основным процессом:
// 在主进程中
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg); // 输出 'ping'
event.reply('asynchronous-reply', 'pong');
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // 输出 ‘ping’
event.returnValue = 'pong'
})
// 在渲染进程（网页）中
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // 输出 'pong'
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg); // 输出 'pong'
})
ipcRenderer.send('asynchronous-message', 'ping')
remoteдля渲染进程Он обеспечивает простой способ связи с основным процессом. Вы можете вызывать методы основного объекта процесса без явной отправки межпроцессных сообщений. Например: создайте окно браузера из процесса визуализации
const { BrowserWindow } = require('electron').remote
let win = new BrowserWindow({ width: 800, height: 600 })
win.loadUrl('https://www.mogu.com')
Уведомление:И наоборот (если вам нужно получить доступ к процессу рендеринга из основного процесса), вы можете использоватьwebContents.executeJavascript.
пройти через
channelОтправьте асинхронное сообщение процессу визуализации с произвольными параметрами. Внутренне параметры сериализуются в JSON, поэтому цепочка функций и прототипов объектов параметров не отправляется.
В дополнение к вышеперечисленным методам также можно использовать localStorage, sessionStorage и т. д.
В-четвертых, упаковка
После завершения разработки приложение нужно запаковать в исполняемый файл Яма в этой ссылке пока самая наступившая при обучении электрон.
Текущие основные инструменты упаковки:electron-packagerа такжеelectron-builder
electron-packager
Установите зависимости:
npm i electron-packager --save-dev
Пакет:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
Может также быть запущен напрямуюnpm run electron-packager .Пакет.
electron-builder
Официальное объяснение:
Полное решение для упаковки и создания готового к распространению приложения Electron, Proton Native или Muon для macOS, Windows и Linux с поддержкой «автоматического обновления» из коробки.
Проще говоря, у electronic-builder более богатые функции, чем у electronic-packager, он поддерживает больше платформ, а также поддерживает автоматические обновления. В дополнение к этим пунктам, пакет, созданный электрон-билдером, более легкий и может упаковать установщик установки, не раскрывая исходный код. Кроме того, он чувствует себя немного менее ямчатым, чем электронный упаковщик.
Установите зависимости:
npm i electron-builder --save-dev
Пакет:
- в проекте
package.jsonопределено в файлеbuildполе
{
"build": {
"appId": "com.xxx.app",
"extends": null,
"files": [
"build/**/*"
],
"mac": {
"icon": "icons/icon.icns"
},
"win": {
"target": "nsis",
"icon": "icons/icon.png"
}
}
}
Это самая базовая конфигурация.Конечно, в процессе упаковки могут возникнуть и другие проблемы, и конфигурацию необходимо изменить. Обычно недостаточно написать только одну папку сборки для конфигурации файлов, и другие пути должны быть добавлены в соответствии со структурой проекта и ситуацией с упаковкой.
- команда добавления скриптов
{
"scripts": {
"pack": "electron-builder"
}
}
- Запустите npm run pack для упаковки
После создания пакета в каталоге dist находится исполняемый файл.
Пять, наступив на яму
Большинство из них — это ямки, встречающиеся в упаковке.
- Сообщение об ошибке при использовании электронного упаковщика
Сгенерированная контрольная сумма для "electron-v6.0.2-darwin-x64.zip" не соответствует ожидаемой контрольной сумме. Просто обновите версию узла до 8.x или выше.
- Сообщается об ошибке при открытии упакованного исполняемого файла
Эта проблема может возникнуть по следующим причинам:
- Локальный путь может быть доступен непосредственно в проекте, и браузер не разрешает доступ из соображений безопасности.
- Проблема конфигурации сборки в package.json, если main.js находится в глубоком пути, вам нужно добавить путь main.js отдельно ниже
"build": {
...
+ "public/main.js"
...
}
- Путь в конфигурации веб-пакета использует __dirname напрямую, вы можете использовать удаленный модульgetAppPathспособ получить путь
const remote = require('remote')
const app = remote.require('app')
console.log(app.getAppPath());
Ссылаться наGitHub.com/электрон/плохой…
- dependencies & devDependencies
При электронной упаковке мы должны различать, какие зависимости зависят от производственной среды, а какие — от среды разработки. Избегайте таких ошибок:
- О медленной упаковке: npm и cnpm
Все виды node_modules, установленные cnpm. Таким образом, все пакеты устанавливаются плоско. При расширении node_modules появляется много файлов, что делает процесс упаковки очень медленным. Но если пришло время установить node_modules с npm, все пакеты находятся в древовидной структуре, и иерархия становится глубже. Но упаковка будет гораздо быстрее. Подробнее см.:Прошло 2 часа с момента упаковки электрона, а он все еще не в порядке?