Примерный адрес проекта:GitHub.com/clone0312/ой…
Просмотрите соответствующие накопленные знания по статьям:Github.com/ cloning человека 0312 / из ...
Недавние дополнения Vue к разработке Electron — Nuggets (juejin.cn)
A, электронное введение
Electron — это проект с открытым исходным кодом, поддерживаемый GitHub и активным сообществом участников. Создавайте кроссплатформенные настольные приложения с использованием JavaScript, HTML и CSS.
1. Особенности
-
Кроссплатформенность 可以打包成Mac、Windows 和 Linux三个平台的应用程序
-
Упрощение настольной разработки (1) Electron основан на Chromium и Node.js и может использовать HTML, CSS и JavaScript для создания приложений. (2) Предоставить API Electron и API NodeJS.
-
активное сообщество
2. Совместимость
xp отсутствует, вам может понадобиться использовать nwjs и другие решения
2. Строительство проекта
1. Создайте проект vue с помощью vue cli
vue create electron-test
2. Установите плагин vue-cli-plugin-electron-builder
vue add electron-builder
3. После установки плагина некоторые изменения в проекте
① package.json добавил несколько скриптов
npm run electron:serve electron开发模式
npm run electron:build electron打包
postinstall и postuninstall должны гарантировать, что при установке или удалении зависимостей он всегда соответствует электронному
② Добавлен файл background.js
Основные операции, связанные с процессом, записанные в этом файле
③ Добавлена переменная окружения
Может использоваться, чтобы определить, находится ли он в электронном состоянии
process.env.IS_ELECTRON
В-третьих, разработка резюме
1. Настройте значок элемента
Справочная документация:Никола тоже симпатичный. GitHub.IO/v UE-processing-running…
использоватьelectron-icon-builder, создать значок, совместимый с Electron
① Установка
npm install --save-dev electron-icon-builder
②package.jsonнастроить команду сборки в
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
③ Создать значок
npm run electron:generate-icons
4 использовать
import path from 'path'
const win = new BrowserWindow({
icon: path.join(__static, 'icon.png')
})
2. Режим разработки проекта не удалось получить предупреждение о расширении
3. В проекте используются локальные vue devtools
① Сначала вы можете клонировать код vue devtools, а затем скомпилировать его.
git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
npm install
npm run build
тогда поставьvue-devtools/packages/shell-chromeСкопируйте папку в корневой каталог проекта
② вbackground.jsдокументapp.on('ready',Загрузка в течение жизненного цикла
// 使用本地的vue开发者工具
session.defaultSession.loadExtension(path.resolve('shell-chrome'))
③ При создании окна используйте следующий пример метода для нормального отображения инструментов разработчика vue.
// src/background.js
if (process.env.WEBPACK_DEV_SERVER_URL) {
await transferWin.loadURL(
process.env.WEBPACK_DEV_SERVER_URL + '/#/test'
)
if (!process.env.IS_TEST) transferWin.webContents.openDevTools()
} else {
transferWin.loadURL('app://./index.html' + '/#/test')
}
4. Как использовать API NodeJS в процессе рендеринга
Необходимо настроить nodeIntegration на true в vue.config.js.
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}
Или настроить при создании окна
win = new BrowserWindow({
width: 500,
height: 400,
frame: false,
transparent: true,
backgroundColor: '#00000000', // 当关闭开发者工具时, 会重新创建一个新的渲染视图, 所以会使用配置的背景颜色, 如果没配置会使用默认值白色
webPreferences: {
nodeIntegration: true, // 渲染层可以使用node
webSecurity: false, // 跨域
enableRemoteModule: true // 可以使用remote
},
// eslint-disable-next-line no-undef
icon: path.resolve(__static, 'logo.png')
})
5. Сделать созданное окно кроссдоменным
Настраивается при создании окнаwebSecurity: falseТолько что
6. Как следить за состоянием окна, сворачивать, фокусировать, скрывать окно, показывать окно, закрывать окно
// 窗口最小化触发
win.on('minimize', () => {
console.log('最小化')
})
win.on('focus', () => {
console.log('聚焦')
})
// 窗口隐藏, 任务栏没有图标
win.on('hide', () => {
console.log('隐藏')
})
win.on('show', () => {
flashTray(false)
console.log('显示')
})
7. Как создать иконку в трее
Справочная документация:Woohoo.electron JS.org/docs/API/… вдруг…
let tray = null
function createTray () {
tray = new Tray(path.resolve(__static, ‘logo.png’)) // 设置托盘图标
const contextMenu = Menu.buildFromTemplate([
new MenuItem({
label: '退出程序',
click: () => {
isQuit = true
app.exit()
}
})
])
tray.setContextMenu(contextMenu) // 设置右键菜单
tray.on(‘click’, () => { // 托盘点击事件
if (win.isVisible()) {
win.focus()
} else {
win.show()
}
})
}
Прослушать закрытие главного окна, если не выйти полностью, то просто скрыть окно
win.on('close', e => {
if (isQuit) {
win = null
} else {
e.preventDefault()
win.hide()
}
})
8. Мигание трея и панели задач
① Принцип мерцания в трее регулярно переключает значки в трее и переключает между значками и прозрачными значками.
let flashInterval
function flashTray (bool) {
if (!bool) {
flashInterval && clearInterval(flashInterval)
tray.setImage(path.resolve(__static, 'logo.png'))
return
}
flashInterval && clearInterval(flashInterval)
var count = 0
flashInterval = setInterval(function() {
if (count++ % 2 == 0) {
tray.setImage(path.resolve(__static, 'empty.png'))
} else {
tray.setImage(path.resolve(__static, 'logo.png'))
}
}, 400)
}
② Мерцание панели задач
win.flashFrame(true) // 高亮
9. Как запустить только один экземпляр
Справочная документация:Woohoo.electro JS.org/docs/API/AP…
Если ваше приложение является основным экземпляром приложения и когда app.requestSingleInstanceLock() возвращает значение true, вам следует продолжать работу приложения. Если, когда он возвращает false, немедленно выйдите
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} {
app.on('second-instance', (event, argv) => {
if (process.platform === 'win32') {
if (win) {
if (win.isMinimized()) {
win.restore()
}
if (win.isVisible()) {
win.focus()
} else {
win.show()
}
} }
})
}
10. Как основной процесс взаимодействует с процессом рендеринга
Справочная документация:
① Процесс рендеринга
const {ipcRenderer} = require('electron')
ipcRenderer.send('message', 'ping') // 发送给主进程
ipcRenderer.on('message-reply', (event, arg) => {
console.log(arg) // pong
}
② основной процесс
// 监听渲染进程信息
ipcMain.on('message', (event, arg) => {
console.log('ping')
event.sender.send('message-reply', 'pong') // 回复子程序
})
// 主进程单独往渲染进程发信息
win.webContents.send('message-reply', 'pong')
11. Проблемы с упаковкой
Справочная документация:woohoo.electron.build/config тебе нравится ATI...
Используйте nsis для упаковки установочного пакета программы Windows Настройте конфигурацию упаковки в vue.config.js.
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
win: {
target: [{ target: 'nsis', arch: ['ia32', 'x64'] }]
},
nsis: {
oneClick: false, // 一键安装
perMachine: true, // 为所有用户安装
allowElevation: true, // 允许权限提升, 设置 false 的话需要重新允许安装程序
allowToChangeInstallationDirectory: true, // 允许更改安装目录
createDesktopShortcut: true, // 创建桌面图标
createStartMenuShortcut: true, // 创建开始菜单
deleteAppDataOnUninstall: true,
include: './public/nsis/installer.nsh', // 包含的脚本
guid: '53fe4cba-120d-4851-3cdc-dccb3a469019' // 软件guid
}
}
}
}
}
12. Откройте программу с веб-страницы
① Регистрация основного процесса
app.removeAsDefaultProtocolClient(‘testapp’)
app.setAsDefaultProtocolClient(‘testapp’)
② Добавьте конфигурацию в файл конфигурации упаковки nsis (installer.nsh).
Зарегистрируйте протокол URL в реестре во время установки
!macro customInstall
DetailPrint 'Register testapp URI Handler'
DeleteRegKey HKCR 'testapp'
WriteRegStr HKCR 'testapp' '' 'URL:testapp'
WriteRegStr HKCR 'testapp' 'URL Protocol' ''
WriteRegStr HKCR 'testapp\shell' '' ''
WriteRegStr HKCR 'testapp\shell\Open' '' ''
WriteRegStr HKCR 'testapp\shell\Open\command' '' '$INSTDIR\${APP_EXECUTABLE_FILENAME} %1'
!macroend
③ Перейдите по ссылке прямо в браузере, чтобы активировать открытие клиента.
testapp://?параметр=значение
④ Получить параметры с веб-страницы
// window 系统中执行网页调起应用时，处理协议传入的参数
const handleArgvFromWeb = (argv) => {
console.log(argv)
const url = argv.find(v => v.indexOf(`${URLSCHEME}://`) !== -1)
console.log(url)
if (url) handleUrlFromWeb(url)
}
// 进行处理网页传来 url 参数，参数自定义，以下为示例
// 示例调起应用的 url 为 testapp://?token=205bdf49hc97ch4146h8124h8281a81fdcdb
const handleUrlFromWeb = (urlStr) => {
console.log(urlStr)
const urlObj = new URL(urlStr)
const { searchParams } = urlObj
const token = searchParams.get('token')
console.log(token)
}
Вы можете видеть, что полученный параметр является массивом, и нам нужно получить последний элемент
В производственном режиме, если программное обеспечение не открыто заранее, при открытии через веб-страницу необходимо получить параметры согласно следующему рисунку
Если он открыт заранее, блок оценки определения состояния получает вариант осуществления
13. Загрузка электронного пакета слишком медленная при установке зависимостей или упаковки.
Создайте файл .npmrc в корневом каталоге
registry = https://registry.npm.taobao.org
sass_binary_site = https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl = http://cnpmjs.org/downloads
electron_mirror = https://npm.taobao.org/mirrors/electron/
sqlite3_binary_host_mirror = https://foxgis.oss-cn-shanghai.aliyuncs.com/
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
chromedriver_cdnurl = https://cdn.npm.taobao.org/dist/chromedriver
14. Открывайте ссылки через внешние браузеры
const { shell } = require('electron')
shell.openExternal('https://www.bing.com')
15. Если вы открываете окно в режиме разработки, если вы открываете инструмент разработчика, если вы хотите закрыть окно, вам нужно сначала закрыть инструмент разработчика, чтобы закрыть окно в обычном режиме.
Перед закрытием окна инструменты разработчики, чтобы определить, следует ли открыть, если вы отключите открытые инструменты разработчика, такие как
if (callWin.isDevToolsOpened()) {
callWin.closeDevTools()
}
16. Прозрачное безграничное окно, появляется проблема с черной рамкой при соприкосновении с краем экрана.
Использованная литература:GitHub.com/электрон/плохой…
Главное добавить задержку при создании окна,
setTimeout(() => createWindow(), 400)
Затем отключите аппаратное ускорение
app.disableHardwareAcceleration()
app.commandLine.appendSwitch('disable-gpu')
app.commandLine.appendSwitch('disable-software-rasterizer')
17. Прозрачное окно без полей, когда инструменты разработчика закрыты, фон становится белым
Использованная литература:GitHub.com/электрон/плохой…
Когда инструменты разработчика закрыты, будет воссоздано новое представление рендеринга, поэтому будет использоваться настроенный цвет фона, если он не настроен, будет использоваться значение по умолчанию белого цвета, поэтому его необходимо установить при создании окна.backgroundColorсобственность#00000000
18. Процесс рендеринга получает основные переменные среды процесса
const { remote } = require('electron')
const envData = remote.getGlobal('process').env
19. При упаковке выдает ошибку что файл asar занят
Тогда vscode может settings.json в папке конфигурации игнорировать dist_electron
"files.exclude": {
"dist_electron": true,
}
20. Обновление программного обеспечения
использоватьelectron-updater
① Конфигурацияvue.config.js настраиватьpublishКонфигурация, после настройки этой конфигурации пакет будет сгенерирован после упаковкиlatest.ymlфайл, его нужно поместить в ту же директорию, что и инсталляционный пакет на сервере,urlНастроен так, чтобы сервер мог получить доступ к URL-адресу этого каталога или использоватьautoUpdater.setFeedURL(url)URL-адрес динамической конфигурации
pluginOptions: {
electronBuilder: {
builderOptions: {
publish: [
{
provider: 'generic',
url: 'http://127.0.0.1:5000'
}
]
}
}
}
② Аналогичный примерGitHub.com/electron-США…
21. Электронная проблема с win7
① Win7 sp1 или win8 необходимо установить патч KB4019990, чтобы решить эту проблему на данный момент (примечание: ни один sp1 win7 не нужно обновлять до sp1 перед установкой патча) Необходимо установить патч для решения проблемы с черным экраномGitHub.com/электрон/плохой…
② обновление .NET.GitHub.com/электрон/плохой…
③ Отключить аппаратное ускорениеGitHub.com/электрон/плохой…
22. Плагин 7z для распаковки asar
В настоящее время, когда я использую командную строку asar для распаковки, будет сообщено об ошибке, но хотя плагин 7z сообщает об ошибке, его можно полностью распаковать.
Адрес плагина:Woohoo. Перейти на 4shell.com/en/7zip/asa…
После загрузки скопируйте dll в каталог установки 7z и создайте новыйFormatsв папке