Недавно у компании появилась новая линейка продуктов, для которой необходимо упаковать приложение в клиент, чтобы обеспечить частное развертывание. Учитывая, что большинство требований реализовано на линии Web, для технического отбора используется Electron. Эта статья не является ликбезом для помощи читателям, а просто для записи ям, встречающихся в проекте, поэтому чтение этой статьи требует знаний в Интернете и электронике.
Согласно требованиям к продукту, развертывание приватизации в основном рассматривает сторону Windows, а затем сторону Mac. Выбор рамы и ее использование.electron-vueScaffolding (также настоятельно рекомендуется здесь), скаффолдинг содержит полный процесс одностраничного приложения стека технологии Vue + электронная + упаковка. Встроенный Vuex, Vue-Router, Webpack, электронный сборщик и т. д. Большинство следующих практикисходный код здесь
1. Настройте строку заголовка
Это должно быть проблемой, с которой столкнется каждый веб-клиент, использующий электрон.Используя родную внешнюю границу, первое слишком некрасиво, а второе неоднородно.
Решение: фрейм + перетаскивание css
frame: false: Задайте параметры формы в основном процессе. удалить строку заголовка по умолчанию
-webkit-app-region: drag: Установите CSS во время процесса рендеринга. Соответствующий компонент можно перетащить
mainWindow = new BrowserWindow({
height: 350,
width: 550,
useContentSize: true,
resizable: isDev, // 是否可调整大小
alwaysOnTop: !isDev, // 应用是否始终在所有顶层之上
transparent: true, // 透明边框
frame: false, // 不使用默认边框
center: true
})
.u-header {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
-webkit-app-region: drag; /* as window header */
}
2. Недействительная кнопка строки заголовка -- только окна
Ошибка отображается только на платформе Windows и отлично работает на Mac. Настройте перетаскивание компонента заголовка, чтобы элементы в компоненте нельзя было щелкнуть.
Решение: добавьте элементы без перетаскивания, которые нужно щелкнуть.-webkit-app-region: no-drag;Смотрите это подробноissue
3. Настраиваемая строка заголовка не может реализовывать наведение css — только окна.
Когда установлено перетаскивание, все события мыши блокируются в окнах, поэтому наведение не работает. Эта проблема вызвана операционной системой и не может быть исправлена.issue.
Решение: удалить-webkit-app-region: drag;Вот и все.
Если вы хотите сохранить перетаскивание и в то же время есть изменения при наведении, этого временно невозможно добиться в окнах, вам нужно сделать выбор или изменить дизайн взаимодействия.
4. Отладка программы после упаковки
electronic-vue по умолчанию включает подключаемый модуль электронной отладки в среде разработки для включения отладки. Однако после того, как упаковка завершена и доставлена учащимся, необходимо открыть инструмент разработчика, чтобы обнаружить проблему при возникновении ошибки.
Решение: Включите режим разработчика в Интернете, зарегистрировав сочетания клавиш.
globalShortcut.register('CommandOrControl+Shift+L', () => {
let focusWin = BrowserWindow.getFocusedWindow()
focusWin && focusWin.toggleDevTools()
})
5. Текст нельзя выбрать
Поскольку это клиент, он должен действовать как клиентская программа и не может выполнять пользовательский выбор отображаемого текста.
Решение: используйте css-webkit-user-select: none;
html {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
height: 100%;
-webkit-user-select: none; /* disable user select text */
}
6. Настройки параметров упаковки
Электронное приложение необходимо упаковать и превратить в исполняемый файл для пользователя. Для упаковки рекомендуется использовать новейший электрон-билдер (данная опция доступна в скаффолдинге электрон-вью). Общие настройки описаны здесь
scripts: {
/** 打包成windows系统 **/
"build": "node .electron-vue/build.js && electron-builder --win",
/** 打包成macos系统 **/
"build:mac": "node .electron-vue/build.js && electron-builder --mac",
},
"build": {
/** 最终可执行文件名称：${productName}-${version}.${ext} **/
"productName": "sight-electron-app",
"appId": "netease.sight.controller",
/** 压缩形式，默认normal;store打包最快，适合测试;maximum打包体积最小，适合生产模式 **/
"compression": "maximum",
/** 是否将多个文件合并为tar风格的归档模式 **/
"asar": true,
"directories": {
"output": "build" /** 打包结果目标地址 **/
},
"files": [
"dist/electron/**/*" /** 需要打包的文件地址 **/
],
/** 不同平台设置 **/
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
}
7. Увеличение и уменьшение масштаба сенсорной панели — только для Mac
В системе macOS команда увеличения или уменьшения масштаба на сенсорной панели приводит к увеличению и уменьшению содержимого веб-фрейма в электронной программе.
Решение: установите диапазон масштабирования в процессе рендеринга.require('electron').webFrame.setZoomLevelLimits(1, 1)
8. Веб-сторона вызывает локального клиента
электрон предоставляет эту возможность API:app.setAsDefaultProtocolClient(protocol[, path, args])
9. Не открывайте несколько окон
Двойной щелчок по исполняемому файлу окна несколько раз откроет несколько окон; одно открыто по умолчанию под Mac, но вы все равно можете открыть больше с помощью команд.
Решение: оценка одного экземпляра:app.makeSingleInstance(callback)
/**
* 防止应用多开。bugfix:sholudQuit总是返回true，故暂时注释以下代码
* 当进程是第一个实例时，返回false。
* 如果是第二个实例时，返回true，并且执行第一个实例的回调函数
*/
const shouldQuit = app.makeSingleInstance((commandLine, workingDir) => {
if (mainWindow) {
mainWindow.isMinimized() && mainWindow.restore()
mainWindow.focus()
}
})
if (shouldQuit) {
app.quit()
}
Детектор состояния сети
Клиент часто сталкивается с обработкой обрыва сети, при отключении сети необходимо подсказывать пользователю, и продолжать обслуживать при подключении к сети. Обычно дело берется轮询Режим сервера, но этот метод потребляет производительность сервера. Здесь вы можете использовать инструментарий узла электронаpublic-ipвынести приговор. public-ip запросите DNS, чтобы получить IP-адрес общедоступной сети, если вы можете получить значение, это означает, что сеть работает нормально. Это может быть хорошим решением, но клиент, которого требует продукт,Необходимо обеспечить как публичное развертывание, так и частное развертывание без внешней сети.
решение:public-ip + 轮询Способ. Сначала запросите IP-адрес общедоступной сети. Если запрос верен, возвращается состояние сети. Если запрос не выполнен, будет выполнена проверка работоспособности сервера. Ссылка на реализациюis-online
11. Мониторинг журнала
Мониторинг исключений каждой системы необходим, особенно в режиме частного развертывания клиентов, важно ведение журнала. Поскольку у электрона есть среда узла, он собирает информацию об ошибках в сочетании с window.onerror, а интерфейс записывает журнал в локальный файл. При возникновении проблемы пользователь может напрямую отправить файл журнала разработчику, чтобы определить причину. Если это режим сетевой версии, вы можете собирать информацию об ошибках через Ajax. Если программа аварийно завершает работу, window.onerror не сможет ее отследить.К счастью, электрон предоставляет коллекцию CrashReporter.
Решение: рекомендуетсяelectron-log + CrashReporter
const log = require('electron-log')
log.transports.file.level = 'info'
log.transports.file.format = '{h}:{i}:{s}:{ms} {text}'
log.transports.file.maxSize = 5 * 1024 * 1024
log.transports.console.level = false
12. Автоматические обновления
Спрос остается в исследованиях, этостатьяОн очень подробный и будет обновляться после того, как практика станет хорошей.
И, наконец, я прикрепляю подробную ментальную карту @changkun, сделанную им в электронном виде. Резюме очень хорошее, и многие детали принесли большую пользу автору.происхождение