Небольшой отчет об обновлении электронной упаковки и интеграции sqlite

В этой статье основное внимание уделяется следующим моментам

Краткое введение в электрон
Процесс электрона взаимодействует со слоем рендеринга
Конфигурация электронной упаковки
Автоматическое обновление электрона
Как электрон интегрирует sqlite3
Электронный обмен данными
Небольшое предложение по развитию электронного интранета
Жизненный цикл основного процесса электрона

Быстрый старт электрона и введение

что такое электрон

Откройте официальный сайт с первого взгляда使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用, более популярным пунктом является десктопный браузер, на самом деле это понимание тоже правильное. Поскольку электрон использует javaScript для использования хрома для отображения веб-страниц.

почему я это использую

Фронтенд можно использовать для создания кроссплатформенных приложений.
хорошая экосистема
Разработано и поддерживается github
электрон (70+k) вдвое больше, чем nw.js (35+k) Star
Я использовал электронные продукты, и они хорошо работают
- Vscode
- Atom
- Рабочий стол gitHub
- ...

Как быстро начать работать с электроном

Я думаю, что следующий лучший способ быстро начать работу

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

Используйте пример, предоставленный электроном напрямую

// 看这个的源码，很简单可以快速上手
# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

Если вы хотите узнать API этого электрона, вы можете клонировать эту библиотеку и запустить

git clone https://github.com/electron/electron-api-demos

cd electron-api-demos

npm install

npm start

Как отладить электрон

Отладка процесса рендеринга (веб-страница)Процесс рендеринга такой же, как и в браузере Chrome, который добавляется после того, как BrowserWindow создаст окно.窗口实例.webContents.open

Основной процесс Электронная отладкаИспользуйте отладку в vsCode, обратите внимание на путь отладки, если вам нужно увеличить переменную среды, вы можете увеличить ее в соответствии с конфигурацией

Жизненный цикл основного процесса в электронных и общих событиях и слоях рендеринга

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

Жизненный цикл в основном процессе

схема жизненного цикла

Жизненные циклы, запускаемые обычными процессами

will-finish-launching: Запускается, когда приложение завершает базовый запуск.
web-contents-created:webContents создан
browser-window-created:BrowserWindow создан
ready: срабатывает, когда Electron закончил инициализацию
remote-require: Вызывается при введении пульта
before-quit: Запускается до того, как приложение начнет закрывать окно
will-quit: испускается, когда все окна закрыты и приложение закрывается
quit: испускается при выходе из приложения
window-all-closed: срабатывает, когда все окна закрыты

Здесь следует отметить, что если процесс убит и завершен, он не будет запущен, если онcmd+Qили разработчики используютapp.quit()покидатьwindow-all-closedне сработает, базовые операции обычно выполняются в готовом виде

Связанный с процессом

gpu-process-crashed: Запускается, когда происходит сбой или уничтожение процесса графического процессора.

разное

browser-window-focus: испускается, когда browserWindow получает фокус
browser-window-blur: испускается, когда browserWindow теряет фокус

Процесс рендеринга --(браузер)-BrowserWindow

ready-to-show: срабатывает, когда страница отрисована (но еще не отображена) и окно можно отобразить.
move: перемещение окна
resize: срабатывает при изменении размера окна
close: Запускается, когда окно вот-вот закроется. Он срабатывает перед событиями DOM beforeunload и unload.
blur: потерять фокус, как и в приложении
focus: получить фокус, как и приложение
maximize: срабатывает, когда окно развернуто
unmaximize: срабатывает, когда окно развернуто и закрыто
minimize: срабатывает, когда окно свернуто
restore: срабатывает, когда окно восстанавливается из свернутого состояния.
...

WebContents в экземпляре BrowserWindow процесса рендеринга

did-finish-load: Запускается, когда навигация завершена, т.е. спиннер вкладки перестанет вращаться, и после назначения события onload
did-finish-load: это событие похоже на did-finish-load, но срабатывает при сбое или отмене загрузки.
dom-ready: После загрузки текста фреймворка это событие вызывается
crashed: Запускается при сбое или завершении процесса рендеринга.
unresponsive: Страница не ответила на триггер
devtools-opened: это событие запускается при открытии инструментов разработчика.
devtools-closed: это событие запускается при закрытии инструментов разработчика.
...

Процесс электрона взаимодействует со слоем рендеринга

Процесс главного процесса и рендерера
Разница между основным процессом и процессом рендерера

Поскольку каждая вкладка браузера Chrome представляет собой процесс, а процесс, запускаемый электроном, называется основным процессом и существует только один, основной процесс для управления веб-страницей каждой вкладки браузера называется процессом рендеринга, как общаться?

Основной процесс и процесс визуализации

обработать

Процесс — это экземпляр работающей программы (в узком смысле).

основной процесс в электроне

Процесс, в котором Electron запускает основной скрипт package.json, называется основным процессом. Сценарий, который запускается в основном процессе, представляет пользовательский интерфейс, создавая веб-страницы. Приложение Electron всегда имеет один и только один главный процесс.

Процесс рендерера в электроне

Поскольку Electron использует Chromium для отображения веб-страниц, также используется многопроцессорная архитектура Chromium. Каждая веб-страница в Electron работает в собственном процессе рендеринга.

Разница между процессом визуализации и основным процессом

Основной процесс запущен с самого начала, процесс рендеринга создает экземпляр через BrowserWindow, а при уничтожении экземпляра процесс рендеринга уничтожается

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

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

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

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

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

Как основной процесс взаимодействует с процессом визуализации

Основной процесс и процесс визуализации взаимодействуют через ipcMain и ipcRenderer.

Основной процесс взаимодействует с процессом рендерера

Этот способ в основном используется в основном процессе для использования IPCMain для прослушивания, прослушивания приобретенияevent.sender(эквивалент веб-контента)sendЧтобы отправить событие, процесс рендеринга использует ipcRenderer, чтобы получить его через on, если он синхронный, его можно получить черезevnet.returnValueКод результата для возврата к основному процессу выглядит следующим образом:

Процесс рендерера взаимодействует с основным процессом

Процесс рендерера в основном отправляется через send в модуле ipcRenderer.Этот метод может отправлять сообщения синхронно и асинхронно, а также использовать on для получения сообщений.

Упаковка электронов

Общий способ:

электронный строитель (я в основном использую это)
electron-pakager
electron-forge

electron-builder

электрон-билдер — это комплексное решение, которое поставляется со стратегией автоматического обновления.

электрон-билдер запакован в скрипт пакета и настроен

Общие параметры упаковки:

  "build": {
    "appId": "your.id", // appid
    "productName": "程序名称", // 程序名称
    "files": [    // 打包需要的不过滤的文件
      "build/**/*",
      "main.js",
      "node_modules/**/*"
    ],
    "directories": { 
      "output": "./dist-out", // 打包输出的目录
      "app": "./",  // package所在路径
      "buildResources": "assets"   
    },
    "nsis": {
      "oneClick": false,  // 是否需要点击安装，自动更新需要关掉
      "allowToChangeInstallationDirectory": true, //是否能够选择安装路径
      "perMachine": true // 是否需要辅助安装页面
    },
    "win": {
      "target": [
        {
          "target": "nsis",  // 输出目录的方式
          "arch": [ // 输出的配置ia32或者x64/x86
            "x64"
          ]
        }
      ],
      "publish": [ // 自动更新的配置
        {
          "provider": "generic", // 自己配置更新的服务器要选generic
          "url": "http://127.0.0.1:8080/updata/" //更新配置的路径
        }
      ]
    }
  }

Элементы быстрого старта добавлены в package.json

"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

Начать упаковку

Обычно указывает на заметку

Обратите внимание на путь, потому что с запакованным путем будут проблемы, лучше всего использоватьpath.join()разобраться с этим.
врезатьсяThe process cannot access the file because it is being used by another process.Большая часть этой проблемы заключается в том, что vscode занят, просто выключите его и снова откройте.

Если вы создаете приложение с помощью create-реагировать-приложение

Вы можете сначала упаковать программу реагирования в статические файлы, а затем упаковать статические файлы в электронное приложение.
Если электронный строитель всегда сообщает что-то вродеelectron.jsПредупреждение о том, что не может быть найдено, и оно предлагает вам просмотреть метод на веб-странице выше, может быть изменено с помощью URL-адреса, запрашиваемого электрон-билдером.На самом деле это учебное пособие, для которого требуется научный доступ в Интернет.

Автоматическое обновление электрон-билдера

Если вы видите API autoUpdater в API, я надеюсь обратиться к официальному, прежде чем увидеть этот APIавтоматическое обновлениеЭто сделает вас менее щепетильным, потому что механизм автоматического обновления электрон-билдера несколько отличается от того, что обеспечивает электрон,официальный сайт электронщикаТам же инструкция, иначе всегда будет сообщать об ошибке

Это обновление фактически является сравнением номеров версий между двумя версиями.Если текущая версия меньше, чем версия сервера, она будет загружена и обновлена.

механизм обновления

Есть статья посвященная механизму обновления в данных, очень хорошая. Вот краткое изложение.

Жизненный цикл autoUpader

error: Если в какой-либо ссылке есть какие-либо проблемы, он придет к этому шагу.
checking-for-update: Запускается, когда начинается проверка обновлений.
update-available: нашел обновление
update-not-available: срабатывает, когда обновление недоступно.
update-downloaded: Запускается, когда загрузка обновления завершена.
before-quit-for-update: Это событие генерируется после того, как пользователь вызывает quitAndInstall().

Обратите внимание на обновления:

autoUplader в электронном билдере необходимо использоватьelectron-updaterЭтот модуль, неродной модуль
URL-адрес публикации в package.json должен соответствовать обновленному адресу (обратите внимание на порт), иначе будет сообщеноnet::ERR_CONNECTION_REFUSED
Если она распакована, я хочу убежатьautoUpdaterпроцесс требуетdev-app-update.ymlФайл помещается сmain.jsместа на одном уровне, похожие наwin-ia32-unpacked/resource/app-update.ymlТакой файл можно использовать напрямую, скопировав и переименовав его.
Если в пакете настроена опция автоматической установки после завершения обновления, его можно установить сразу после закрытия приложения.Если вы хотите контролировать установку сразу, вам необходимо добавитьautoUpdater.quitAndInstall()
Если в терминале выводится начальное приложение запуска, только теряется часть рендеринга, или нет вывода, если это не ошибка, то можно послушать процесс рендеринга.did-finish-loadЭтот цикл объявления, который в нем обрабатывается, может использоваться в соответствии со сценойonceконтролировать
нужен статический веб-сервер в папке, которую нужно использоватьhttp-server -o, если нет, установите его глобальноnpm i http-server -g, который необходимо настроить в пакетеpublishсередина"provider": "generic"
врезатьсяspawn **/*.exe ENOENTВозможно, вы запускаете приложение, которое не установлено в вашей среде разработки, и используетеautoUpdater.quitAndInstall()Он сообщит об ошибке, если он установлен, он не сообщит об этой ошибке

//electron-quick-start 
//main.js 主进程中

// 可以没有这个
const { autoUpdater } = require('electron-updater')

// ================= start 非必须 ===============
const log = require('electron-log');
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
// ================ end 非必须 ==================

// 封装
function sendStatusToWindow(text) {
  log.info(text);
  mainWindow.webContents.send('message', text);
}

/**
 * 自动更新
 */
function checkUpdata() {
  autoUpdater.setFeedURL('http://127.0.0.1:8080/updata/')
  // autoUpdater.on('error', (error) => {
  //   sendStatusToWindow( `[error]:${error}`)
  // })
  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
    // mainWindow.webContents.send('downlaod')

  })
  autoUpdater.on('update-available', (info) => {
    sendStatusToWindow('Update available.');
  })
  autoUpdater.on('update-not-available', (info) => {
    sendStatusToWindow('Update not available.');
  })
  autoUpdater.on('error', (err) => {
    sendStatusToWindow('Error in auto-updater. ' + err);
  })
  autoUpdater.on('download-progress', (progressObj) => {
    let log_message = "Download speed: " + progressObj.bytesPerSecond;
    log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
    log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
    sendStatusToWindow(log_message);
    mainWindow.webContents.send('downloadExe', progressObj.percent)
  })
  autoUpdater.on('update-downloaded', (info) => {
    mainWindow.webContents.send('downloaded')


    sendStatusToWindow('Update downloaded');
    // autoUpdater.quitAndInstall();
  });

Добавить sqlite3 к электрону

требуемая среда

Если это среда Windows, вам необходимо подготовить среду для vs2015 и python2.7.

python2.7.x можно скачать и установить онлайн
vs2015 может выбрать один из следующих методов
1. Инструментарийnpm install --vs2015 -g windows-build-tools(рекомендовать)
2. Установите инструментарий vs2015 в Visual Studio (надолго)

Локальные базы данных, которые можно добавить в программу, наиболее часто используемые две

sqlite3 (реляционный)
neDB (нереляционная)

Добавьте локальную базу данных sqlite3 к своим данным

sqlite3 [gitHub]добавить sqlite3 в программуnpm i sqlite3илиyarn add sqlite3

как использовать?

// 官网例子
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(':memory:'); // 这里是把数据存入内存
db.serialize(function() {
var db = new sqlite3.Database()
  db.run("CREATE TABLE lorem (info TEXT)");
  var stmt = db.prepare("INSERT INTO lorem VALUES (?)");
  for (var i = 0; i < 10; i++) {
      stmt.run("Ipsum " + i);
  }
  stmt.finalize();

  db.each("SELECT rowid AS id, info FROM lorem", function(err, row) {
      console.log(row.id + ": " + row.info);
  });
});

db.close();

sqlte3 автоматически генерирует пакеты файлов, необходимые sqlite во время установки.Этот двоичный файл необходимо использоватьnode-pre-gypилиnode-gypВот почему требуется среда установки.На этом этапе призрак знает, сколько вещей было сообщено в то время, особенно когда это нужно поместить в интрасеть. Например:

Сообщите, когда он начнет работатьError: Cannot find module 'E:\electronjs\electron-quick-start\node_modules\sqlite3\lib\binding\electron-v4.0-win32-x64\node_sqlite3.node'Как-то так, на самом деле такого нет, как решить?
- использоватьnode-gypЭтот модуль напрямую перекомпилирует версию с правильной версией

node-gyp rebuild 
--target=4.0.4 --arch=x64
--target_platform=win32 --dist-url=https://atom.io/download/electron/
--module_name=node_sqlite3 --module_path=../lib/binding/electron-v4.0-win32-x64

// 使用到的模块解析
// target                => electron的版本号一定要一直
// target_platform       => 需要打包的平台ia32/x64等
// dist-url              => 这个是需要下载相关内容的地址
// module_name           => 需要打包的模块名称
// module_path           => 打包输出的地方

Если вы находите это хлопотным, попробуйтеnpm i electron-rebuild -Dзатем используя./node_modules/.bin/electron-rebuildПерекомпилируйте, иногда может быть проблема с кешем, очистите кешnpm cache clear -fПочисти, естьnpm iПереустановите его, потому что экологические проблемы выскакивают из различных проблем, вы можете попробовать эти методы много

was compiled against a different Node.js version using
NODE_MODULE_VERSION 64. This version of Node.js requires
NODE_MODULE_VERSION 69. Please try re-compiling or re-installing

Если вы выберете версию, скомпилированную узломгитхаб [проблемы]====> Это также может быть проблемой компиляции, используйте электронную перестройку для перекомпиляции или понижения версии sqlite3

нужно внимание

При упаковке, еслиerror MSB4019: 未找到导入的项目Microsoft.WebApplication.targetsПереустановите инструментарий VS2015 или переустановите ранее установленную проблему (я столкнулся с ней)
Для компиляции пакета sqlite3 с помощью node-gyp требуетсяbinding.gypЭтот файл Python и другие конфигурации, поэтому перейдите непосредственно кnode_modules\sqlite3Этот файл запускает операции node-gyp
При упаковке обратите внимание на проблемы с упаковкой при использовании sqlite3 в процессе рендеринга.Решением может быть использование локальной базы данных в основном процессе.
Будет проблема при использовании БД после упаковки.БД не может быть сгенерирована в текущем каталоге.Если вы проверите онлайн, то вы можете либо открыть ее для администратора через ручную авторизацию, либо открыть ее вручную.Это просто не возможно.electron-vueнашел применениеapp.getPath('userData')Этот метод используется для получения кэшируемого адреса приложения, а затем используетсяpath.joinОбъединение путей решает проблему, заключающуюся в том, что файл БД не может быть сгенерирован.На самом деле два файла хранилища indexDB и locaStore также находятся в этом каталоге.

другие модули

globalShortcut: зарегистрировать глобальные сочетания клавиш
Tray: поднос
Menu: событие меню

Развитие интрасети требует внимания

Развитие интранета действительно раздражает. . Во-первых, вам нужна среда, затем пакеты, которые необходимо загрузить, а во-вторых, различные файлы, которые необходимо скомпилировать, такие как скомпилированные файлы sqlite3 и т. д. Если вы разрабатываете электрон в интрасети, вам нужно скопировать все эти необходимые пакеты в соответствующее место.

Большинство файлов, которые необходимо настроить, находятся вC:\Users\xxxxxx представляет папку, в которой вы находитесь, Часть файла кеша загрузки находится вC:\Users\xxx\AppData\LocalЭлектрон и электрон-билдер в каталоге

Справочные учебные материалы

Большая часть следующих статей прочитана, и я считаю их хорошими и всем рекомендую