предисловие
Есть много вещей, которые может сделать Интернет, но когда дело доходит до операционных систем, он может быть немного ошеломляющим. Когда я разрабатывал веб-систему некоторое время назад, я столкнулся с похожей ситуацией. Нам нужно получить некоторую информацию об операционной системе компьютера, например, mac-адрес и т. д. Наша веб-система полностью размещена на сервере и работает через браузер, но желаемый эффект не может быть достигнут напрямую через веб-часть.
Проблемы оставляют решать людям. После обсуждений среди коллег, т.к. сама система не сложная и требует быстрой разработки. Решил использовать Electron + страницы оригинальной веб-системы для решения проблем, связанных с информацией об операционной системе.
В этой статье описаны некоторые проблемы и решения, с которыми я столкнулся при использовании Electron.
Что такое Электрон?
Создавайте кроссплатформенные настольные приложения с помощью JavaScript, HTML и CSS — здесьElectronЗнакомство с официальным сайтом
Electron — это фреймворк с открытым исходным кодом, разработанный GitHub. Это позволяет разрабатывать настольные приложения с графическим интерфейсом, используя Node.js (в качестве серверной части) и Chromium (в качестве внешнего интерфейса). В настоящее время Electron используется для разработки внешнего и внутреннего интерфейса несколькими веб-приложениями с открытым исходным кодом, известными проектами, включая Atom GitHub и Visual Studio Code от Microsoft. --Знаю почти
Можно просто понять, что Electron ставит на веб-проект оболочку среды Node.js, чтобы мы могли вызывать богатый API Node.js. Таким образом, мы можем использовать JavaScript для написания настольных приложений, расширяя многие возможности, которые мы не можем делать в Интернете.
Как создавать приложения Electron?
Создавать приложения Electron очень просто, либо изучив официальную документацию, либо используя существующие колеса. В основном его можно разделить на две категории: шаблоны и инструменты командной строки. Оба метода имеют свои преимущества, и какой метод выбрать, зависит от вашей реальной ситуации. Возьмите меня в качестве примера, потому что у проекта, который я хочу сделать, уже есть веб-страница, и эти шаблоны в основном неприменимы.Чтобы не отставать от прогресса, я буду напрямую ссылаться на официальный сайт для начала——Создайте свое первое электронное приложение, а также исходный код для сборки проекта.
Ниже приведены некоторые часто используемые шаблоны сборки и инструменты командной строки.
шаблон
- electron-react-boilerplate: электрон + реагировать
- electron-vue: electron + vue
- ...
инструмент командной строки
- Создайте свое первое электронное приложение: Учебное пособие на официальном сайте
- electron-forge: полный инструмент для создания современных приложений Electron.
- ...
один пример
Ниже приведен самый простой проект Electron, и последующий код расширяется на его основе.
npm install --save-dev electron
общая структура
demo/
├── package.json
├── main.js
└── index.html
package.json
{
"name": "demo",
"version": "1.0.0",
"description": "electornDemo",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "xmanlin",
"license": "MIT",
"devDependencies": {
"electron": "^9.0.0"
}
}
main.js
const {app, BrowserWindow} = require('electron')
app.on('ready', function createWindow () {
// 可以创建多个渲染进程
let win = new BrowserWindow({
width: 800,
height: 600,
})
win.show()
// 渲染进程中的web页面可以加载本地文件
win.loadFile('index.html')
// 记得在页面被关闭后清除该变量，防止内存泄漏
win.on('closed', function () {
win = null
})
})
// 页面全部关闭后关闭主进程,不同平台可能有不同的处理方式
app.on('window-all-closed', () => {
app.quit()
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<body>
<div>一个electron项目</div>
<script>
</script>
</body>
</html>
Каковы основной процесс и процесс рендеринга?
В Electron концепции основного процесса и процесса рендеринга очень важны.Подробности см. во введении на официальном сайте:Основной процесс и процесс рендеринга.
основной процесс
- бегать
package.jsonсерединаmainПроцесс сценария является основным процессом. - Электронное приложение имеет один и только один основной процесс.
- Основной процесс может выполнять собственные операции API, связанные с графическим интерфейсом.
процесс рендеринга
- Electron использует Chromium для отображения веб-страниц, поэтому также используется многопроцессорная архитектура Chromium.
- Каждая веб-страница работает в своем собственном процессе рендеринга.
- использовать
BrowserWindowКласс запускает процесс рендеринга и запускает экземпляр в этом процессе, когдаBrowserWindowПосле уничтожения экземпляра соответствующий процесс рендеринга также прекращается. - Собственные ресурсы нельзя вызывать в процессе рендеринга, но процесс рендеринга также содержит среду Node.js, поэтому Node.js можно внедрить. Модули при поддержке Node.js могут выполнять некоторые низкоуровневые взаимодействия с операционной системой на странице.
Как вызвать Node.js API в процессе рендеринга?
После версии Electron 5.0 процесс рендеринга по умолчанию не может вызывать API Node.js, его можно установить только после настройки:
Основной процесс (main.js)
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, //设置为true就可以在这个渲染进程中调用Node.js
}
})
Как открыть инструменты разработчика?
Хотя Electron использует Chromium, он не похож на браузер, чтобы открывать инструменты разработчика, такие как нажатие F12 по умолчанию в Windows.
Есть два способа открыть инструменты разработчика в Electron:
Первый — установить его в основном процессе.После настройки запустите проект, и процесс рендеринга по умолчанию откроет инструменты разработчика.
win.webContents.openDevTools();
Второй вариант — выбрать View -> Toggle Developer Tools в строке меню окна процесса рендерера. (Или просто следуйте сочетаниям клавиш выше)
Электронная консоль печатает искаженные символы?
У нас может быть проблема искаженных китайских символов в консоли Windows.Когда мы вводим chcp в консоли Windows, мы можем просмотреть текущую кодировку символов.Общее значение gb2312 — 936, а значение utf8 — 65001. Только в этом случаеpackage.jsonНастройка исправит.
"start": "chcp 65001 && electron ."
Как наладить связь между основным процессом и процессом рендерера?
Между основным процессом и процессом рендеринга может проходитьipcRendererиipcMainсвязь модуля.
Основной процесс активно отправляет сообщение процессу рендеринга.
Основной процесс (main.js)
//主进程向渲染进程发送消息，'did-finish-load':当导航完成时发出事件，onload 事件也完成
win.webContents.on('did-finish-load', () => {
win.webContents.send('msg', '消息来自主进程')
})
Процесс рендеринга (index.html)
<script>
const {ipcRenderer} = require('electron')
ipcRenderer.on('msg', (event, message) => {
console.log(message) // 消息来自主进程
})
</script>
Процесс рендеринга активно отправляет сообщение основному процессу
Процесс рендеринга (index.html)
const {ipcRenderer} = require('electron')
ipcRenderer.send('indexMsg','消息来自渲染进程')
Основной процесс (main.js)
const {ipcMain} = require('electron')
ipcMain.on('indexMsg',(event,msg) => {
console.log(msg) //消息来自渲染进程
})
Как взаимодействуют процессы рендеринга?
Существует множество способов взаимодействия между процессами рендеринга, и перечислены следующие:
Использовать глобальные общие свойства
//主进程
global.sharedObject = {
user: ''
}
//渲染进程一
const {remote} = require('electron')
remote.getGlobal('sharedObject').user = 'xmanlin'
//渲染进程二
const {remote} = require('electron')
console.log(remote.getGlobal('sharedObject').user) //xmanlin
ipcRenderer.sendTo()
НижеipcRenderer.sendTo()параметры
ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...])
ipcRenderer.sendTo(windowId, 'ping', 'someThing')
//webContentsId : Number
//channel : String
//...args : any[]
конкретное использование
Основной процесс (main.js)
//创建一个新的渲染进程
let win2 = new BrowserWindow({
width: 800,
height: 600,
})
//为渲染进程设置唯一id
win2.id = 2
процесс рендеринга 1
<script>
const {ipcRenderer} = require('electron')
//向id为2的渲染进程发送消息
ipcRenderer.sendTo(2,'msg1','来自渲染进程1的消息')
</script>
процесс рендеринга 2
<script>
const {ipcRenderer} = require('electron')
ipcRenderer.on('msg1', (event, message) => {
console.log(message) // 来自渲染进程1的消息
})
</script>
Использовать основной процесс в качестве станции ретрансляции сообщений
//主进程
ipcMain.on('msg1', (event, message) => {
yourWindow.webContents.send('msg2', message);
}
//渲染进程1
ipcRenderer.send('msg1', '来自渲染进程1的消息')
//渲染进程2
ipcRenderer.on('msg2', (event, message) => {
console.log(message) //来自渲染进程1的消息
}
)
Как упаковать проект?
Упаковка также является важным шагом.Вот еще два зрелых упаковочных инструмента:electron-packagerиelectron-builder. Эти два инструмента в основном настраивают его.
electron-packager
Мы можем использовать electronic-packager для упаковки нашего существующего электронного приложения в исполняемый файл.
Установить первым
npm install electron-packager --save-dev
После установки вам необходимо настроить основные команды electronic-packager.В официальной документации представлен основной формат:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
Кратко представим значение каждого параметра:
- sourcedir: путь, по которому находится проект
- appname: имя приложения (имя упакованного файла)
- платформа: определяет, на какой платформе вы хотите создать приложение (Windows, Mac или Linux).
-
platform=win32от имени Windows -
platform=darwinдля Mac -
platform=linuxрасшифровывается как линукс
-
- arch: определяет, использовать ли x86 или x64 или обе архитектуры
- дополнительные опции: дополнительные опции
Ниже приведен пример для справки
package.json
"scripts": {
"build32": "electron-packager ./ appDemo --platform=win32 --arch=ia32 --out=./app --app-version=1.0.0 --overwrite --icon=./favicon.ico",
"build64": "electron-packager ./ appDemo --platform=win32 --arch=x64 --out=./app --app-version=1.0.0 --overwrite --icon=./favicon.ico"
}
Вышеупомянутое все упакованное программное обеспечение под Windows, build32 упакован как 32-битный, а build64 упакован как 64-битный. В дополнение к основным параметрам значения других параметров, указанных выше, следующие:
- --out указывает каталог файлов, сгенерированных после упаковки
- --app-version указывает номер версии упакованного сгенерированного файла
- --overwrite означает удаление исходного файла пакета и создание нового файла пакета.
- --icon представляет значок упакованного файла
electron-builder
Электрон-билдер может быть упакован не только в виде исполняемых файлов, но и в виде устанавливаемых программ, и его функции также богаче, чем у электрона-упаковщика.
Официальный сайт предпочитает пряжу для установки
yarn add electron-builder --dev
Конечно, npm также возможен
npm install electron-builder --save-dev
Затем мы можем настроить
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"productName": "appDemo", // app中文名称
"appId": "appDemoId",// app标识
"directories": { // 打包后输出的文件夹
"buildResources": "resources",
"output": "dist/"
}
"files": [ // 打包后依然保留的源文件
"dist/electron",
"node_modules/",
"package.json"
],
"mac": { // mac打包配置
"target": "dmg",
"icon": "icon.ico"
},
"win": { // windows打包配置
"target": "nsis",
"icon": "icon.ico"
},
"dmg": { // dmg文件打包配置
"artifactName": "appDemo.dmg",
"contents": [
{
"type": "link",
"path": "/Applications",
"x": 410,
"y": 150
},
{
"type": "file",
"x": 130,
"y": 150
}
]
},
"nsis": { // nsis文件打包配置
"oneClick": false,
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"installerIcon": "./build/icons/aaa.ico",// 安装图标
"uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "xxxx", // 图标名称
"include": "build/script/installer.nsh", //包含的自定义nsis脚本这个对于构建需求严格得安装过程相当有用。
},
}
При упаковке с электрон-билдером вы также можете указать параметры
--mac, -m, -o, --macos macOS打包
--linux, -l Linux打包
--win, -w, --windows Windows打包
--mwl 同时为macOS，Windows和Linux打包
--x64 x64 (64位安装包)
--ia32 ia32(32位安装包)
Все параметры могут относиться кCommand Line Interface (CLI)
Что касается NSIS, вы также можете узнать об этом методе упаковки:процесс электронной упаковки электронный упаковщик + NSIS
Как установить окно по умолчанию развернутым и полноэкранным?
Развернуть по умолчанию
//主进程（main.js）
let win = new BrowserWindow({show: false})
win.maximize()
win.show()
полноэкранный режим по умолчанию
//主进程（main.js）
let win = new BrowserWindow({fullscreen: true})
Как настроить панель меню?
Вы можете напрямую ссылаться на эту статью-Настройка меню с помощью Electron, написанное более подробно, также можно напрямую обратиться к официальной документации. Конечно, мы также можем скрыть встроенную строку меню, а затем вызвать API написания Electron, чтобы написать строку меню. Например, VSCode делает это, откройте VSCode, а затем найдите в справке переключатель инструментов разработчика, вы можете найти новый мир~.
Как получить mac-адрес операционной системы?
В основном это вызов API Node.js для получения mac-адреса системы.
var os=require("os");
//获取mac地址
var mac = ''
var networkInterfaces=os.networkInterfaces();
for(var i in networkInterfaces){
for(var j in networkInterfaces[i]){
if(networkInterfaces[i][j]["family"]==="IPv4" && networkInterfaces[i][j]["mac"]!=="00:00:00:00:00:00" && networkInterfaces[i][j]["address"]!=="127.0.0.1"){
mac = networkInterfaces[i][j]["mac"]
}
}
}
Ссылаться на
woohoo.brief.com/afraid/62 упаковки от 45Ed…
сегмент fault.com/ah/119000001…
Наконец
В этой статье описаны проблемы, с которыми я столкнулся при изучении и применении Electron, а также решения, которые я нашел, и я надеюсь, что она будет полезна для всех. Если есть какие-либо недостатки или ошибки, пожалуйста, укажите на них ~