Кардинг проекта Vue3 + TS + Vite2 + Electron16

внешний интерфейс Vue.js

1. Что такое Электрон?

Electron — это кроссплатформенная среда разработки настольных приложений с графическим интерфейсом, основанная на технологии веб-интерфейса.

2. Когда использовать Электрон?

1. Electron — хороший выбор, когда у компании нет специального разработчика настольных приложений, но при разработке необходимо учитывать внешний интерфейс.

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

3. Разработать некоторые инструменты повышения эффективности, такие как инструменты API.

3. Преимущества Электрона

  1. Расширение ядра с открытым исходным кодом относительно простое.В настоящее время оно основано на node 6.x.Кроме того, gyp теперь очень удобен для пользователя, что упрощает создание базы C++ и js.

  2. Интерфейс легко настраивается, и в принципе, пока это может делать Веб, он может это делать.

  3. На данный момент это самое дешевое кроссплатформенное техническое решение, HTML+JS имеет большой резерв технического персонала и большое количество существующих библиотек веб-интерфейсов. Большинство из них надежны.

  4. По сравнению с другими кросс-платформенными решениями (такими как QT GTK+ и т.п.) он более стабилен и имеет меньше багов, ведь пока браузерная оболочка работает, в ней не будет слишком много проблем. Я также столкнулся с некоторыми темными ямами.

  5. Удобное горячее обновление. Загрузите оверлей, и все готово. Конечно, это преимущество, общее для всех скриптов.

4. Недостатки Электрона

1. карта, начните медленно, это может быть банк webkit. В конце концов, вы хотите, чтобы поддерживать функцию браузера это многовато.

2. В дополнение к основному процессу вам также может понадобиться запустить некоторые вспомогательные процессы, чтобы выполнить работу. И всякий раз, когда вы запускаете новый процесс, стартовой ценой являются накладные расходы памяти на nodejs.

3.Потерянные кадры,это самое серьезное,но я привык к шелковистой плавности родного.Под маком нормально,а под win немного скучновато.

4. Набранный пакет слишком большой. (Очевидно, что даже пустой пакет содержит как минимум объем браузера), тут поясняю:

Размер всего пакета основан на размере Frameworks + Resources.

Frameworks electronic core (размер 174M, версия 9.0.0) в принципе не имеет места для оптимизации

Есть электронно-шаблонный пакет, который представляет собой упрощенный электрон, но он не обновлялся 3 года, и им мало кто пользуется

Ресурсы app.asar — ​​это в основном упакованные ресурсы проекта и node_modules, используемые основным процессом, поэтому оптимизация app.asar в основном (win также)

5. Каков принцип Electron при создании кроссплатформенного настольного приложения из комбинации HTML, CSS и JavaScript?

Принцип заключается в том, что Electron достигает этого, объединяя Chromium и Node.js в одну и ту же среду выполнения и упаковывая ее как приложение для систем Mac, Windows и Linux.

6. электрон + vue + ts раствор

У нас есть относительно зрелая библиотека для этого решения, Electron-vue. Обратите внимание, что для работы электрона требуется среда Python, если нет, не забудьте установить ее заранее. Официальный сайт Python:woohoo.Python.org/.

Сначала установите vue-cli глобально:

npm install -g vue-cli

Затем инициализируйте:

vue init simulatedgreg/electron-vue vue-electron

Наконец, запустите зависимости:

cd vue-electron yarn # 或者 npm install yarn run dev # 或者 npm run dev

текущий результат:

homepage.png

Затем анализируем структуру каталогов:

catalogue.png

Вы можете видеть, что в папке src есть две папки, main и renderer, которые являются двумя процессами electronic.

В основном основном процессе:

index.js - это процесс JS основного процесса

В процессе рендеринга рендерера:

активы: размещайте статические ресурсы, такие как изображения, видео, статическая конфигурация

common: размещайте статические js, например общие функции, требуемые страницей

компоненты: размещение vue-страниц

маршрутизатор: поместите маршрут страницы

store: размещайте общедоступные модули, такие как vuex

Что нам делать, когда мы хотим вызвать API электрона в проекте:

Процесс рендеринга отправляет данные:

sendMsg(){
    this.$electron.ipcRenderer.send('toMain','我是渲染进程里面的数据') 
},

Основной процесс получает данные:

var {ipcMain}=require('electron');
ipcMain.on('toMain',(event,data)=>{  
    console.log(data);
});

Как использовать узел в проекте:

var fs = require('fs');
export default {
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        runNode() {
            fs.readFile('package.json',(err, data) => {
                if (err) {
                    console.log(err);
                    return;
                }
                console.log(data.toString());
            })
        }
    }
}

Затем добавляем конфигурацию TS:

Создайте файл глобального объявления vue.sfc.d.ts в каталоге src:

// 配置ts读取.vue文件
declare module "*.vue"{
  import Vue from 'vue'
  export default Vue
}

Установите зависимости TS:

npm install typescript -d
npm install ts-loader -d

Добавьте конфигурацию TS в webpack.main.config.js и webpack.renderer.config.js:

......

module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
        loader: "ts-loader",
        options: {
           appendTsSuffixTo: [/\.vue$/],
          }
        }
      },

......

 resolve: {
    extensions: ['.ts','.js', '.json', '.node'], 
 },

......

При добавлении конфигурации TS исходный файл js необходимо изменить на файл ts. Затем нам нужно настроить одну вещь в webpack.renderer.config.js: добавить параметр vue-property-decorator в whiteListedModules:

//webpack.renderer.config.js
let whiteListedModules = ['vue','vue-property-decorator']

tsc --init сгенерировать tsconfig.json

"strict": false,
"experimentalDecorators":true,

Таким образом, мы успешно внедрили TS.

Для справки есть успешные кейсы в сети:

крошечный-evt: Vite2 + Vue3 + Electron12 + TypeScript git:GitHub.com/аккуратно найдено/крошечный…

Поскольку я хочу интегрировать vite, я сделал сравнение и выбрал evv:

npm init evv

7. электрон + реакция + схема ts

Создайте проект react+ts:

npm install -g create-react-app
create-react-app electron-react --template typescript
cd electron-react
npm start

Установите react-app-rewired, cross-env и custom-cra npm i -D react-app-rewired cross-env customize-craПосле react-app-rewired2.x нужно установить custom-cra для изменения конфигурации webpack.После установки нужно изменить некоторые конфигурации скриптов в package.json, в основном для изменения react-скриптов запуска, сборки и тестовые команды для react-app -rewired:

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
}

Представляем babel-plugin-import: npm install babel-plugin-import --save-dev

Установите react-app-rewired, cross-env и custom-cra: npm i -D react-app-rewired cross-env customize-cra

Создайте файл конфигурации config-overrides.js, перенастроенный для реагирования на приложение, чтобы расширить конфигурацию веб-пакета:

/* config-overrides.js */
const { override, fixBabelImports, } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: 'css',
  }),
);

Установите электронную среду и настройте входной файл: npm i -D electron

Файл main.js должен быть размещен в публичном доступе.

/* main.js */
const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow = null;
const createWindow = () => {
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  });

  /**
   * loadURL 分为两种情况
   *  1.开发环境，指向 react 的开发环境地址
   *  2.生产环境，指向 react build 后的 index.html
   */
  const startUrl =
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      :  path.join(__dirname, "/build/index.html");
  mainWindow.loadURL(startUrl);

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
};

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', function () {
  if (mainWindow === null) createWindow();
});

Измените файл пакета:

/* package.json */
"main": "main.js",
"author": "L",
"description": "electron-react",
"scripts": {
    "start": "cross-env BROWSER=none react-app-rewired start",
    "start-electron": "cross-env NODE_ENV=development electron .",
    "start-electron-prod": "electron ."
},

npm run start-electron

Просто запустите его.

Требуется ввести vite, значит надо заменить webpack на vite.Подумав, выбрал wp2vite.

npm install -g wp2vite
npm install

wp2vite — это инструмент, который позволяет проектам, использующим webpack для разработки и сборки, поддерживать использование vite для разработки и сборки (в настоящее время поддерживаются только vue и react).

8. Упаковка (электрон-строитель)

В electronic-vue интегрирован инструмент для упаковки, но проблем еще много, здесь я записываю:

  1. Зависимости используют npm или пряжу, а не cnpm.
  2. После скачивания зависимостей качаем отдельно электронно-сборочные зависимости, здесь используется cnpm, а npm и yarn скачать нельзя.
  3. В build.js есть проблема с дублированием имён, там две пары задач, и одну из них можно модифицировать.
  4. Чтобы настроить инсталляционный пакет вручную, у вас должен быть такой путь: C:\Users\Administrator\AppData\Local\electron\Cache, по этому пути поместите инсталляционный пакет, а имя инсталляционного пакета будет electronic-v2.0.9-win32- x64.zip, я выложил на гитлабе.
  5. Вручную загрузите multispinner, npm установите multispinner -D, добавьте в build.js

Const multispinner = требует ('multispinner').

Далее мы настраиваем функцию упаковки электрон-реагировать.npm i -D electron-builder

Затем настройте некоторые параметры, связанные с упаковкой:

/* package.json */
  "homepage": ".", // 避免css等资源找不到的情况
  "scripts": {
    "build-electron": "electron-builder"
  },
  "build": {
    // 软件包名
    "appId": "com.xxx.xxx",
    // 项目名，也是生成的安装文件名
    "productName": "L",
    // 版权信息
    "copyright": "L © 2021",
    // 不配置extends为null打包的时候会报错：Application entry file "build/electron.js" does not exist
    "extends": null,
    "directories": {
        // 输出文件路径
      "output": "build-electron"
    },
    "files": [
      "./build/**/*",
      "./main.js",
      "./package.json"
    ],
    "win": { // win相关配置
      "icon": "./favicon_256.ico",
      /* 打包生成的启动文件的命名方式 */
      "artifactName": "${productName}.${ext}"
    },
    "nsis": {
       // 是否一键安装，不可更改目录等选项，默认为true
      "oneClick": false,
      // 是否允许权限提升。如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowElevation": true,
      // 是否允许更改安装路径
      "allowToChangeInstallationDirectory": true,
      // 是否创建桌面图标
      "createDesktopShortcut": true,
      // 创建开始菜单图标
      "createStartMenuShortcut": true,
      // 安装完成请求运行
      "runAfterFinish": true,
      // 安装包图标
      "installerIcon": "./favicon_256.ico", 
      //卸载程序图标
      "uninstallerIcon": "./favicon_256.ico",
      // 安装时头部图标
      "installerHeaderIcon": "./build/icons/aaa.ico",
      // 桌面图标名称
      "shortcutName": "L"
    }
  },

Создайте новый файл electro.js в открытом доступе с тем же содержимым, что и файл main.js, а затем добавьте

win.loadURL('http://localhost:3000/');

превратиться в

win.loadURL(`file://${__dirname}/index.html`);

Затем измените элемент «main» в package.json на «public/electron.js» и добавьте элемент «build»:

"build": {
  "appId": "com.example.electron-cra",
  "files": [
    "build/**/*",
    "node_modules/**/*"
  ],
  "directories":{
    "buildResources": "assets"
  },
  "extraMetadata":{
      "main":"build/electron.js"
    }
}

npm запустить сборку-электрон.

9. Расчесывание электронных модулей

Примечание: приведены только некоторые распространенные методы.Подробнее см.:Woohoo.Моя школа 3С.Талант/электронщик…

9.1 shell

Модуль оболочки предоставляет соответствующие функции для интеграции с другими настольными клиентами.

Пример открытия URL-адреса в браузере пользователя по умолчанию:

var shell = require('shell');

shell.openExternal('https://github.com');

**9.1.1 shell.showItemInFolder(fullPath)**

Откройте папку, в которой находится файл, и, как обычно, выберите его.

9.1.2 shell.openItem(fullPath)

Откройте файл методом открытия по умолчанию.

9.1.3 shell.openExternal(url)

Откройте внешний протокол с настройками системы по умолчанию (например, Mailto:somebody@somewhere.ioоткроет почтовый клиент пользователя по умолчанию).

9.1.4 shell.moveItemToTrash(fullPath)

Удаляет файл по указанному пути и возвращает значение состояния (логическое значение) этой операции.

9.1.5 shell.beep()

Воспроизвести звуковой сигнал (также известный как звуковой сигнал).

9.2 screen

Модуль экрана извлекает информацию о размере экрана, дисплее, положении мыши и т. д. Этот модуль нельзя использовать, пока не будет запущено событие готовности модуля приложения.

Примечание. На панели инструментов рендерера/разработчика window.screen является свойством DOM по умолчанию, поэтому запись var screen = require('electron').screen не будет работать.

Пример:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var mainWindow;

app.on('ready', function() {
  var electronScreen = electron.screen;
  var size = electronScreen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({ width: size.width, height: size.height });
});

**Показать объект:**

Объект «Дисплей» представляет собой физически подключенную систему.Фальшивый дисплей может существовать в безголовой системе или дисплей будет эквивалентен удаленному виртуальному дисплею.

Модуль экрана запускает три события: Event: 'display-added'

вернуть:

событие Событие Объект newDisplay Создается при добавлении нового дисплея

Event: 'display-removed'

вернуть:

event Событие Объект oldDisplay Выдается при перемещении oldDisplay

Event: 'display-metrics-changed'

вернуть:

event Event display Object changedMetrics Array

9.2.1 screen.getCursorScreenPoint()

Возвращает абсолютный путь текущей мыши.

screen.getPrimaryDisplay()

Возвращает основной дисплей.

screen.getAllDisplays()

Возвращает массив доступных в данный момент дисплеев.

9.2.2 screen.getDisplayNearestPoint(point)

point Object x Integer y Integer

Возвращает отображение, ближайшее к указанной точке.

9.2.3 screen.getDisplayMatching(rect)

rect Object x Integer y Integer width Integer height Integer

Возвращает отображение, наиболее тесно связанное с предоставленным диапазоном границ.

9.3 clipboard

Модуль буфера обмена предоставляет методы для операций копирования и вставки.

Пример:

const clipboard = require('electron').clipboard;
clipboard.writeText('Example String');

**9.3.1 clipboard.readText([type])**

введите строку (необязательно)

Возврат содержимого из буфера обмена в виде обычного текста

9.3.2 clipboard.writeText(text[, type])

текст Тип строки Строка (необязательно)

Добавить содержимое в буфер обмена как обычный текст

9.3.3 clipboard.readHtml([type])

введите строку (необязательно)

Возвращает содержимое маркера в буфер обмена

9.3.4 clipboard.writeHtml(markup[, type])

разметка Тип строки Строка (необязательно)

Добавить разметку (тег) Содержание в буфер обмена

9.3.5 clipboard.readImage([type])

введите строку (необязательно)

Вернуть содержимое NativeImage из буфера обмена

9.3.6 clipboard.writeImage(image[, type])

image Тип NativeImage Строка (необязательно)

записать изображение в буфер обмена

9.3.7 clipboard.clear([type])

введите строку (необязательно)

Очистить содержимое буфера обмена

9.4 crashReporter

Модуль Crash-Reporter позволяет отправлять отчеты о сбоях приложений.

Вот пример автоматической отправки отчета о сбое на сервер:

const crashReporter = require('electron').crashReporter;

crashReporter.start({
  productName: 'YourName',
  companyName: 'YourCompany',
  submitURL: 'https://your-domain.com/url-to-submit',
  autoSubmit: true
});

**9.4.1 crashReporter.start(options)**

options:

companyName String

submitURL String — путь для отправки отчета о сбое в сообщении.

productName String (необязательно) — по умолчанию используется Electron.

autoSubmit Boolean — использовать ли автоматическую отправку.По умолчанию true.

ignoreSystemCrashHandler Boolean — по умолчанию имеет значение false.

дополнительный объект — объект, который вы можете определить для отправки вместе с отчетом о сбое. Только строковые свойства отправляются правильно, вложенные объекты не поддерживаются.

Примечание. Этот метод можно использовать только перед использованием других API CrashReporter.

9.4.2 crashReporter.getLastCrashReport()

Возвращает дату и идентификатор последнего отчета о сбое.Если отчет о сбое не был отправлен или сбор отчетов о сбое не начался, будет возвращено значение null .

9.4.3 crashReporter.getUploadedReports()

Возвращает все загруженные отчеты о сбоях, каждый с датой загрузки и идентификатором.

9.5 nativeImage

В Electron для всех API, которые создают изображения, вы можете использовать путь к файлу или экземпляр nativeImage.Если вы используете null , будет создан пустой объект изображения.

При создании трея (значка) или настройке значка окна вы можете использовать строковый путь к изображению:

var appIcon = new Tray('/Users/somebody/images/icon.png');
var window = new BrowserWindow({icon: '/Users/somebody/images/window.png'});

Или прочитать изображение из буфера обмена, которое возвращает nativeImage:

var image = clipboard.readImage();
var appIcon = new Tray(image);

Поддерживаемые форматы

Форматы изображения PNG и JPEG в настоящее время поддерживаются. PNG рекомендуется, поскольку он поддерживает прозрачность и сжатие без потерь.

В Windows вы также можете использовать формат значков ICO.

9.5.1 nativeImage.createEmpty()

Создайте пустой экземпляр nativeImage.

9.5.2 nativeImage.createFromPath(path)

path String

Создает новый экземпляр nativeImage по указанному пути.

9.5.3 nativeImage.createFromBuffer(buffer[, scaleFactor])

буфер Buffer ScaleFactor Double (необязательно)

Создайте новый экземпляр nativeImage из буфера. Масштабный коэффициент по умолчанию равен 1,0.

9.5.4 nativeImage.createFromDataURL(dataURL)

dataURL String

Создайте новый экземпляр nativeImage из dataURL.

9.6 ipcRenderer

Модуль ipcRenderer является экземпляром класса EventEmitter.Он предоставляет ограниченные методы, вы можете отправлять синхронные или асинхронные сообщения от процесса рендерера к основному процессу.Вы также можете получать ответы от основного процесса.

9.6.1 ipcRenderer.on(channel, listener)

channel String listener Function

Слушайте канал, когда приходит новое сообщение, вызывайте слушателя с помощью listener(event, args...) .

9.6.2 ipcRenderer.once(channel, listener)

channel String listener Function

Добавьте функцию одноразового слушателя для этого события. Этот слушатель будет запрошен для вызова при следующей отправке нового сообщения на канал и после этого будет удален.

9.6.3 ipcRenderer.removeListener(channel, listener)

channel String listener Function

Удаляет указанный прослушиватель из массива прослушивателей в указанном канале.

9.6.4 ipcRenderer.removeAllListeners([channel])

channel String (optional)

Удалить всех слушателей или удалить все указанные каналы.

9.6.5 ipcRenderer.send(channel[, arg1][, arg2][, ...])

аргумент строки канала (необязательно)

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

Основной процесс обрабатывает сообщения, прослушивая канал с помощью модуля ipcMain.

9.6.6 ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...])

аргумент строки канала (необязательно)

Аналогичен ipcRenderer.send, но его события будут отправляться элементу хост-страницы, а не основному процессу.

9.7 desktopCapturer

Модуль desktopCapturer можно использовать для получения доступных ресурсов, которые можно захватить с помощью getUserMedia.

// 在渲染进程中.
var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
  if (error) throw error;
  for (var i = 0; i < sources.length; ++i) {
    if (sources[i].name == "Electron") {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});

function gotStream(stream) {
  document.querySelector('video').src = URL.createObjectURL(stream);
}

function getUserMediaError(e) {
  console.log('getUserMediaError');
}

Объект ограничения создается при вызове navigator.webkitGetUserMedia. Если используются ресурсы desktopCapturer, для chromeMediaSource должно быть установлено значение «рабочий стол», а для аудио — значение false.

Если вы захватываете аудио и видео всего рабочего стола, вы можете установить для chromeMediaSource значение «экран», а для аудио значение true.При использовании этого метода вы не можете указать chromeMediaSourceId.

9.7.1 desktopCapturer.getSources(options, callback)

options Типы объектов Массив — массив строк, в котором перечислены типы ресурсов рабочего стола, которые могут быть захвачены, доступны следующие типы: экран и окно. , высота: 150}. Функция обратного вызова

Сделайте запрос на получение всех ресурсов рабочего стола и вызовите обратный вызов с обратным вызовом (ошибка, источники), когда запрос будет завершен.

9.8 remote

Удаленный модуль обеспечивает простой способ межпроцессного взаимодействия (IPC) между процессом визуализации (веб-страницей) и основным процессом.

В Electron модули, связанные с графическим интерфейсом (такие как диалог, меню и т. д.), существуют только в основном процессе, а не в процессе рендеринга. Чтобы иметь возможность использовать их из процесса визуализации, необходимо использовать модуль ipc для отправки межпроцессных сообщений в основной процесс. С помощью удаленного модуля можно вызывать методы основного объекта процесса без явной отправки межпроцессных сообщений, подобно RMI в Java.

Вот пример создания окна браузера из процесса рендерера:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');

Примечание. Чтобы сделать обратное (доступ к процессу визуализации из основного процесса), вы можете использовать webContents.executeJavascript.

9.8.1 remote.require(module)

module String

Возвращает объект, возвращаемый выполнением require(module) в основном процессе.

9.8.2 remote.getCurrentWindow()

Возвращает объект BrowserWindow, которому принадлежит эта страница.

9.8.3 remote.getCurrentWebContents()

Возвращает объект WebContents для страницы.

9.8.4 remote.getGlobal(name)

name String

Возвращает глобальную переменную с именем name в основном процессе (т. е. global[name]).

9.8.5 remote.process

Возвращает объект процесса в основном процессе. Эквивалентно remote.getGlobal('process'), но кэшируется.

9.9 webFrame

Модуль web-frame позволяет настроить способ отображения текущей веб-страницы.

Пример: Увеличение текущей страницы до 200%.

var webFrame = require('electron').webFrame;

webFrame.setZoomFactor(2);

9.9.1 webFrame.setZoomFactor(factor)

factor Number - параметр масштабирования.

Измените параметр масштабирования на указанное значение параметра. Параметр масштабирования указывается в процентах, поэтому 300% = 3,0.

9.9.2 webFrame.getZoomFactor()

Возвращает текущее значение параметра масштабирования.

9.9.3 webFrame.registerURLSchemeAsSecure(scheme)

scheme String

Зарегистрируйте схему как безопасную схему.

Безопасные схемы не вызывают предупреждений о смешанном содержимом. Например, https и данные являются безопасными схемами, поскольку их нельзя отключить активными сетевыми атаками.

9.9.4 webFrame.registerURLSchemeAsBypassingCSP(scheme)

scheme String

Игнорировать политику безопасности текущего веб-контента и загружать напрямую из схемы.

9.9.4 webFrame.executeJavaScript(code[, userGesture])

code String userGesture Boolean (необязательно) — по умолчанию false.

Оцените код страницы.

В окне браузера некоторые API-интерфейсы HTML, такие как requestFullScreen, могут использоваться только с помощью жеста пользователя.

9.10 app

Модуль приложения предназначен для управления всем жизненным циклом приложения.

Пример:

Выйти из приложения, когда последнее окно закрыто:

var app = require('app');
app.on('window-all-closed', function() {
  app.quit();
});

событие: «готово»

Запускается, когда Electron закончил инициализацию.

Событие: «Окно-все-закрытое»

Уволен, когда все окна закрыты.

На этот раз можно запустить только в том случае, если приложение не закрылось. Если пользователь нажмет Cmd + Q или разработчик вызовет app.quit() , Electron попытается закрыть все окна перед запуском события will-quit, и в этом случае window-all-closed не будет запущен.

Событие: «перед выходом»

вернуть:

event Event

Запускается, когда приложение начинает закрывать свое окно. Вызов event.preventDefault() предотвратит завершение приложения по умолчанию.

Событие: 'browser-window-focus'

вернуть:

event Event

window BrowserWindow

Уволен, когда браузервина получает фокус.

Событие: "окно браузера создано"

вернуть:

event Event

window BrowserWindow

Запускается при создании BrowserWindow.

9.10.1 app.quit()

Попробуйте закрыть все окна. Событие перед выходом будет запущено первым. Если все окна успешно закрыты, будет запущено событие will-quit, и приложение будет закрыто по умолчанию.

Этот метод гарантирует, что все обработчики событий beforeunload и unload выполняются правильно. Если обработчик события beforeunload окна возвращает false, все приложение может отменить свой выход.

9.10.2 app.hide() OS X

Скрыть все окна приложений, а не сворачивать.

9.10.3 app.getAppPath()

Возвращает путь к файлу, в котором находится текущее приложение.

9.10.4 app.clearRecentDocuments() OS X Windows

Очистите список недавно использованных документов.

9.10.5 app.isAeroGlassEnabled() Windows

Этот метод возвращает значение true, если включена композиция DWM (Aero Glass), и значение false в противном случае. Вы можете использовать этот метод, чтобы решить, включать ли эффект прозрачного окна, потому что, если пользователь не включает DWM, эффект прозрачного окна недействителен.

9.11 BrowserWindow

BrowserWindow

Класс дает вам возможность создать окно браузера.

// In the main process.
const BrowserWindow = require('electron').BrowserWindow;

// Or in the renderer process.
const BrowserWindow = require('electron').remote.BrowserWindow;

var win = new BrowserWindow({ width: 800, height: 600, show: false });
win.on('closed', function() {
  win = null;
});

win.loadURL('https://github.com');
win.show();

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

Event: 'page-title-updated'

вернуть:

event Event

Запускается при изменении заголовка документа, используйте event.preventDefault(), чтобы предотвратить изменение заголовка исходного окна.

Event: 'close'

вернуть:

Событие события срабатывает, когда вы хотите закрыть окно. Он срабатывает перед событиями DOM до DOM и разгрузки. Используйте Event.PreventDefault (), чтобы отменить эту операцию

Обычно вы хотите использовать обработчик beforeunload, чтобы решить, закрывать ли окно, но он также срабатывает при перезагрузке окна. В Electron верните пустую строку или false, чтобы отменить выключение.

Event: 'unresponsive'

Инициировать событие, когда интерфейс зависает.

Event: 'minimize'

Запускается, когда окно свернуто.

Event: 'scroll-touch-begin' OS X

Запускается при запуске события полосы прокрутки.

BrowserWindow.getAllWindows()

Возвращает массив объектов всех открытых окон.

BrowserWindow.getFocusedWindow()

Возвращает текущее активное окно для приложения или null, если его нет.

Объект экземпляра, созданный с помощью new BrowserWindow, имеет следующие свойства:

// In this example `win` is our instance
var win = new BrowserWindow({ width: 800, height: 600 });

win.webContents

Объект WebContents этого окна, через который выполняются все события и методы, связанные с интерфейсом.

См. документацию webContents для методов и событий.

win.id

Уникальный идентификатор окна.

метод экземпляра

Объекты-экземпляры, созданные с помощью new BrowserWindow, имеют следующие методы:

win.destroy()

Вынужден закрыть окно, выгружать и недопустику не запускать, а триггер не будет закрыт, но он гарантирует, что закрытый триггер.

win.close()

Попытка закрыть окно, что имеет такой же эффект, как если бы пользователь нажал кнопку закрытия. Хотя веб-страница может отменить закрытие, см. событие закрытия.

win.focus()

Окно получает фокус.

win.show()

Показать и дать окну фокус.

win.hide()

Скрыть окно.

win.maximize()

Окно развернуто.

win.minimize()

Окно свернуто, в некоторых ос оно будет отображаться в доке.

win.setBounds(options[, animate])

options Object

x Integer

y Integer

width Integer

height Integer

анимировать логическое значение (необязательно) OS X

Сбросьте ширину и высоту окна и переместите его в указанную позицию x, y.

win.getBounds()

Возвращает объект, содержащий ширину, высоту, координату x и координату y окна.

win.setSize(width, height[, animate])

width Integer

height Integer

анимировать логическое значение (необязательно) OS X

Сбросить ширину и высоту окна.

win.setContentSize(width, height[, animate])

width Integer

height Integer

анимировать логическое значение (необязательно) OS X

Сбросить значения ширины и высоты оконных клиентов (например, веб-интерфейса).

win.center()

Окно находится по центру.

9.12 webContents

webContents — генератор событий.

Он отвечает за отрисовку и управление веб-страницами, а также является свойством объекта BrowserWindow.Пример использования webContents:

const BrowserWindow = require('electron').BrowserWindow;

var win = new BrowserWindow({width: 800, height: 1500});
win.loadURL("https://www.w3cschool.cn");

var webContents = win.webContents;

Объект webContents может генерировать следующие события:

Event: 'did-finish-load'

Событие генерируется, когда завершается навигация, а также завершается событие onload.

Event: 'did-start-loading'

Когда счетчик вкладки начинает вращаться.

Event: 'did-stop-loading'

Когда счетчик вкладки заканчивает вращение.

Event: 'new-window'

вернуть:

event Event

url String

frameName String

disposition String — может быть по умолчанию, вкладка переднего плана, вкладка фона, новое окно и другие.

options Object — параметры для использования при создании нового BrowserWindow.

Генерируется, когда страница запрашивает открытие окна по указанному URL. Это может быть через window.open или внешнее соединение.

выданный запрос.

По умолчанию будет создан BrowserWindow с указанным URL-адресом.

Вызов event.preventDefault() может использоваться для предотвращения открытия окна.

Event: 'will-navigate'вернуть:

event Event

url String

Когда пользователь или страница вы хотите начать навигацию на Emit события. Это может произойти, когда окно. Изменяется изменение объекта окна или пользователь нажимает на странице ссылки.

Это событие не будет сгенерировано при использовании API (таких как webContents.loadURL и webContents.back) для программной инициации навигации.

Это также не происходит при переходах внутри страницы, таких как нажатие на якорные ссылки или обновление window.location.hash.Для этого используйте событие did-navigate-in-page.

Вызов event.preventDefault() может помешать навигации.

Event: 'did-navigate'

вернуть:

event Event

url String

Выдается, когда навигация заканчивается.

Это событие не генерируется для переходов внутри страницы, таких как щелчок по якорной ссылке или обновление window.location.hash.Для этого используйте событие did-navigate-in-page.

Event: 'crashed'

Испускается при сбое процесса рендеринга.

Event: 'destroyed'

Генерировать событие при удалении webContents

Event: 'login'

вернуть:

event Event

request Object

method String

url URL

referrer URL

authInfo Object

isProxy Boolean

scheme String

host String

port Integer

realm String

callback Function

Генерируется, когда webContents хочет выполнить базовую проверку.

Использование аналогично событию входа в приложение.

метод экземпляра

Объект webContents имеет следующие методы экземпляра:

9.12.1 webContents.loadURL(url[, options])

url URL

Объект опций (необязательно)

httpReferrer String - A HTTP Referrer url.

userAgent String — пользовательский агент, который сделал запрос

extraHeaders String — дополнительные заголовки, разделенные «\n»

Загрузить URL-адрес в окне, URL-адрес должен содержать префикс протокола, например http:// или файл://. Если загрузка хочет игнорировать кеш http, вы можете использовать заголовок прагмы для достижения этого.

const options = {"extraHeaders" : "pragma: no-cache\n"}
webContents.loadURL(url, options)

9.12.2 webContents.isLoading()

Возвращает логическое значение, определяющее, загружается ли текущая страница.

9.12.3 webContents.isLoading()

Возвращает логическое значение, определяющее, загружается ли текущая страница.

9.12.4 webContents.reload()

Перезагрузить текущую страницу.

9.12.5 webContents.reloadIgnoringCache()

Перезагрузить текущую страницу, игнорируя кеш.

9.12.6 webContents.goBack()

Пусть браузер вернет на предыдущую страницу.

9.12.7 webContents.goForward()

Пусть браузер обратно на следующую страницу.

9.12.8 webContents.goToIndex(index)

index Integer

Вернуть браузер на страницу с указанным индексом.

свойства экземпляра

Объект WebContents также имеет следующие свойства:

webContents.session

Возвращает объект сеанса, используемый этим webContents.

webContents.hostWebContents

Возвращает родительский webContents этого webContents .

9.13 ipcMain

Модуль ipcMain является экземпляром класса EventEmitter. При использовании в основном процессе он управляет асинхронными или синхронными сообщениями, отправляемыми процессом рендеринга (веб-страницей).Сообщения, отправленные из процесса рендеринга, инициируют события.

отправлять сообщения

Также можно отправлять сообщения из основного процесса в процесс рендеринга, см. подробнее о webContents.send.

Отправить сообщение, событие с именем канала.

В ответ на синхронные сообщения можно установить event.returnValue.

Чтобы ответить на асинхронные сообщения, вы можете использовать event.sender.send(...).

Пример отправки и обработки сообщений между основным процессом и процессом рендерера:

// In main process.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});
// In renderer process (web page).
const ipcRenderer = require('electron').ipcRenderer;
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"

ipcRenderer.on('asynchronous-reply', function(event, arg) {
  console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');

слушать сообщения

Модуль ipcMain имеет следующие методы прослушивания событий:

9.13.1 ipcMain.on(channel, listener)

channel String

listener Function

Прослушайте канал, когда придет новое сообщение, прослушиватель будет вызван через listener(event, args...) .

9.13.2 ipcMain.once(channel, listener)

channel String

listener Function

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

9.13.3 ipcMain.removeListener(channel, listener)

channel String

listener Function

Удаляет определенного слушателя из очереди прослушивания для определенного канала.

9.13.4 ipcMain.removeAllListeners([channel])

Строка канала (необязательно)

Удаляет всех слушателей или всех слушателей для указанного канала.

объект события

Событие передается объекту обратного вызова, имеет следующие методы:

event.returnValue

Установите это в значение, возвращенное в сообщении синхронизации.

event.sender

Возвращает webContents отправленного сообщения, вы можете вызвать event.sender.send, чтобы ответить на асинхронное сообщение.

9.14 dialog

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

Пример диалогового окна, показывающего выбор файлов и каталогов:

var win = ...;  // BrowserWindow in which to show the dialog
const dialog = require('electron').dialog;
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));

Примечание для OS X: если вы хотите отображать диалоги как листы, просто укажите ссылку BrowserWindow в параметре browserWindow.

9.14.1 dialog.showOpenDialog([browserWindow, ]options[, callback])

BrowserWindow BrowserWindow (необязательно)

options Object

title String

defaultPath String

filters Array

Массив свойств — содержит значения свойств диалога, может включать в себя openFile, openDirectory, multiSelections и createDirectory

Функция обратного вызова (необязательно)

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

фильтры Определяет массив файлов для отображения или выбора для пользователя, когда необходимо ограничить поведение пользователя, например:

{
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}

Массив extensions должен содержать только расширения и не должен содержать подстановочных знаков или знаков «.» (например, «png» является правильным, но «.png» и «

.png" неверный). Чтобы отобразить все файлы, используйте '

' подстановочный знак (другие подстановочные знаки не поддерживаются).

Если вызывается обратный вызов, API будет вызываться асинхронно, и результат будет отображаться с обратным вызовом (имена файлов).

Примечание. В Windows и Linux открытое диалоговое окно не может быть одновременно полем выбора файла и полем выбора каталога, поэтому, если вы установите значение свойств на этих платформах ['OpenFile', 'OpenDirectory'], окно выбора каталога будет отображается.

9.14.2 dialog.showErrorBox(title, content)

Отображает традиционный диалог с сообщениями об ошибках.

Этот API можно безопасно вызывать до того, как модуль приложения запустит событие готовности, и обычно он используется для сообщения об ошибках на ранних стадиях запуска.В Linux, если он вызывается до того, как модуль приложения запустит событие готовности, будет запущено сообщение для отображения stderr (выходной файл), и окно с графическим интерфейсом не отображается.

9.15 menu

Класс меню можно использовать для создания собственных меню, которые можно использовать в качестве меню приложений и контекстных меню.

Этот модуль является основным модулем процесса и может вызываться процессом визуализации через удаленный модуль.

Каждое меню имеет один или несколько пунктов меню Пункты меню, и каждый пункт меню может иметь подменю.

В следующем примере показано меню, динамически созданное удаленным модулем на веб-странице (процесс рендеринга) и отображаемое по щелчку правой кнопкой мыши:

<!-- index.html -->
<script>
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

window.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);
</script>

9.15.1 Menu.setApplicationMenu(menu)

menu Menu

Устанавливает меню меню приложения в OS X. В Windows и Linux устанавливает меню меню поверх каждого окна.

9.15.2 Menu.sendActionToFirstResponder(action) OS X

action String

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

9.15.3 Menu.buildFromTemplate(template)

template Array

В общем, шаблон — это просто параметр массива, используемый для создания MenuItem.

Вы также можете добавить другие вещи в элемент шаблона, и они станут атрибутами существующих пунктов меню.

метод экземпляра

Объект меню имеет следующие методы экземпляра:

menu.popup([browserWindow, x, y, positioningItem])

BrowserWindow BrowserWindow — значение по умолчанию равно NULL.

x Число (необязательно) — по умолчанию равно -1.

y Число (обязательно, если установлен x) — по умолчанию равно -1.

positioningItem Number (необязательный) OS X — индекс пункта меню ниже позиции мыши в указанной координате. По умолчанию -1. Открывает контекстное меню в окне браузера. При желании можно указать указанные x, y, чтобы установить меню где меню должно быть размещено, иначе оно по умолчанию будет соответствовать текущей позиции мыши.

menu.append(menuItem)

menuItem MenuItem

Добавьте пункты меню.

menu.insert(pos, menuItem)

pos Integer

menuItem MenuItem

Добавить пункт меню в указанное место.

menu.items()

Получить массив пунктов меню.

9.16 protocol

Модуль протокола может зарегистрировать пользовательский протокол или использовать существующий.

Пример и используйте файл: // Протокол функции, такие как:

const electron = require('electron');
const app = electron.app;
const path = require('path');

app.on('ready', function() {
    var protocol = electron.protocol;
    protocol.registerFileProtocol('atom', function(request, callback) {
      var url = request.url.substr(7);
      callback({path: path.normalize(__dirname + '/' + url)});
    }, function (error) {
      if (error)
        console.error('Failed to register protocol')
    });
});

Примечание. Этот модуль доступен только после запуска события готовности модуля приложения.

9.16.1 protocol.registerStandardSchemes(schemes)

схемы Массив — регистрация пользовательской схемы в качестве стандартной схемы.

Стандартная схема соответствует общему стандарту синтаксиса URI RFC 3986. Сюда входят файлы: и файловая система:.

9.16.2 protocol.registerServiceWorkerSchemes(schemes)

массив схем — регистрация пользовательской схемы для обработки рабочих служб.

9.16.3 protocol.unregisterProtocol(scheme[, completion])

scheme String

Функция завершения (опционально)

Отменить регистрацию пользовательской схемы протокола.

9.17 session

Модуль Session можно использовать для создания нового объекта сеанса.

Вы также можете использовать сеанс существующей страницы, используя свойство сеанса webContents, которое является свойством BrowserWindow.

const BrowserWindow = require('electron').BrowserWindow;

var win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL("http://github.com");

var ses = win.webContents.session;

событие экземпляра

Экземпляр Session имеет следующие события:

Event: 'will-download'

event Event

item DownloadItem

webContents WebContents

Запускается, когда Electron собирается загрузить элемент из webContents.

Вызов event.preventDefault() может отменить загрузку, и элемент будет недоступен для следующего тика процесса.

session.defaultSession.on('will-download', function(event, item, webContents) {
  event.preventDefault();
  require('request')(item.getURL(), function(data) {
    require('fs').writeFileSync('/somewhere', data);
  });
});

метод экземпляра

9.17.1 ses.cookies

файлы cookie, чтобы дать вам полный запрос и изменить файлы cookie, такие как:

// 查询所有 cookies.
session.defaultSession.cookies.get({}, function(error, cookies) {
  console.log(cookies);
});

// 查询与指定 url 相关的所有 cookies.
session.defaultSession.cookies.get({ url : "http://www.github.com" }, function(error, cookies) {
  console.log(cookies);
});

// 设置 cookie;
// may overwrite equivalent cookies if they exist.
var cookie = { url : "http://www.github.com", name : "dummy_name", value : "dummy" };
session.defaultSession.cookies.set(cookie, function(error) {
  if (error)
    console.error(error);
});

9.17.2 ses.cookies.get(filter, callback)

filter Object

url String (необязательно) — URL-адрес, связанный с получением файлов cookie. Если этот параметр не задан, файлы cookie будут получены со всех URL-адресов.

name Строка (необязательно) — фильтрация файлов cookie по имени.

domain String (необязательно) — получить файлы cookie для соответствующего домена или поддомена.

path String (необязательно) — получить файлы cookie, соответствующие пути.

secure Boolean (необязательно) — фильтрация файлов cookie по безопасности.

session Boolean (необязательно) — отфильтровать сеансовые или постоянные файлы cookie.

callback Function

Отправьте запрос, я надеюсь получить все файлы cookie, соответствующие Детали, и обратный вызов будет вызван через обратный вызов (ошибка, файлы cookie) после завершения.

cookies — это объект cookie.

cookie Object

name Строка — имя файла cookie.

value String - значение cookie.

domain String — доменное имя файла cookie.

hostOnly String — указывает, является ли файл cookie файлом cookie только для хоста.

path String - путь к куки.

secure Boolean — это безопасный файл cookie.

httpOnly Boolean — это просто файлы cookie HTTP.

session Boolean — указывает, является ли файл cookie сеансовым или постоянным файлом cookie с датой истечения срока действия.

expireDate Double (необязательно) — дата истечения срока действия файла cookie в секундах с начала эпохи UNIX. Недоступно для сеансовых файлов cookie.

9.17.3 ses.cookies.set(details, callback)

details Object

url String — URL-адрес, связанный с получением файлов cookie.

name Строка - имя файла cookie. По умолчанию пусто, если игнорируется.

value Строка - значение файла cookie. По умолчанию пусто, если игнорируется.

domain Строка — доменное имя файла cookie. По умолчанию пусто, если игнорируется.

path String — путь к файлу cookie. По умолчанию пуст, если игнорируется.

secure Boolean — установлен ли флаг безопасности.По умолчанию false.

session Boolean — Помечен ли он HttpOnly, по умолчанию — false.

expireDate Double — дата истечения срока действия файла cookie в секундах, начиная с эпохи UNIX. Если этот параметр не указан, файл cookie становится файлом cookie сеанса.

Функция обратного вызова использует данные для установки файла cookie и использует обратный вызов (ошибка) для сброса обратного вызова после завершения.

9.17.4 ses.cookies.remove(url, name, callback)

url String — URL-адрес, связанный с файлами cookie.

name String — имя удаляемого файла cookie.

callback Function

Удалите файлы cookie, соответствующие URL-адресу и имени, по завершении вызывая обратный вызов с помощью callback().

9.17.5 ses.getCacheSize(callback)

callback Function

size Integer — размер кэша в байтах.

Возвращает текущий размер кэша для сеанса.

9.17.6 ses.clearCache(callback)

Функция обратного вызова - вызывается, когда операция завершается

Очистите кэш HTTP сеанса.

9.18 Tray

Трей используется для представления значка в области уведомлений работающей системы, обычно добавляемого в контекстное меню.

const electron = require('electron');
const app = electron.app;
const Menu = electron.Menu;
const Tray = electron.Tray;

var appIcon = null;
app.on('ready', function(){
  appIcon = new Tray('/path/to/my/icon');
  var contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ]);
  appIcon.setToolTip('This is my application.');
  appIcon.setContextMenu(contextMenu);
});

Ограничения платформы:

В Linux используйте индикатор приложения, если он поддерживается, в противном случае используйте вместо него GtkStatusIcon.

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

Индикатор приложения будет отображаться только в том случае, если у него есть контекстное меню.

При использовании индикатора приложения в Linux события кликов игнорируются.

В Linux, чтобы один элемент MenuItem вступил в силу, необходимо снова вызвать setContextMenu, например:

contextMenu.items[2].checked = false;
appIcon.setContextMenu(contextMenu);

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

9.18.1 Tray.destroy()

Удалите значок в трее сейчас.

9.18.2 Tray.setImage(image)

image NativeImage

Свяжите изображение со значком в трее.

9.18.3 Tray.setPressedImage(image) OS X

image NativeImage

Связывает изображение со значком в трее, когда значок в трее нажимается в OS X.

9.18.4 Tray.setToolTip(toolTip)

toolTip String

Установить текст при наведении для значка в трее.

9.18.5 Tray.setTitle(title) OS X

title String

Установите заголовок вдоль значка в трее в строке состояния.

9.18.6 Tray.setHighlightMode(highlight) OS X

highlight Boolean

При щелчке по значку в трее можно указать, будет ли подсвечиваться его фоновый цвет (синим). По умолчанию установлено значение true.

9.18.7 Tray.setContextMenu(menu)

menu Menu

Этот значок устанавливается контекстным меню.

9.19 global-shortcut

Модуль global-shortcut может удобно устанавливать (зарегистрировать/зарегистрировать) сочетания клавиш для различных пользовательских операций.

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

var app = require('app');
var globalShortcut = require('electron').globalShortcut;

app.on('ready', function() {
  // Register a 'ctrl+x' shortcut listener.
  var ret = globalShortcut.register('ctrl+x', function() {
    console.log('ctrl+x is pressed');
  })

  if (!ret) {
    console.log('registration failed');
  }

  // Check whether a shortcut is registered.
  console.log(globalShortcut.isRegistered('ctrl+x'));
});

app.on('will-quit', function() {
  // Unregister a shortcut.
  globalShortcut.unregister('ctrl+x');

  // Unregister all shortcuts.
  globalShortcut.unregisterAll();
});

9.19.1 globalShortcut.register(accelerator, callback)

accelerator Accelerator

callback Function

Зарегистрируйте клавишу быстрого доступа. Функция обратного вызова будет вызываться, когда пользователь нажимает зарегистрированную клавишу быстрого доступа.

9.19.2 globalShortcut.isRegistered(accelerator)

accelerator Accelerator

Запросите, была ли зарегистрирована комбинация клавиш быстрого доступа, она вернет значение true (зарегистрировано) или false (незарегистрировано).

9.19.3 globalShortcut.unregister(accelerator)

accelerator Accelerator

Выйдите из акселератора глобального ускорителя.

9.19.4 globalShortcut.unregisterAll()

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

9.20 contentTracing

Модуль отслеживания контента используется для сбора данных поиска, сгенерированных базовым модулем контента Chromium. У этого модуля нет веб-интерфейса, поэтому нам нужно добавить chrome://tracing/ в браузер Chrome, чтобы загрузить сгенерированные файлы для просмотра. результаты, достижения.

const contentTracing = require('electron').contentTracing;

const options = {
  categoryFilter: '*',
  traceOptions: 'record-until-full,enable-sampling'
}

contentTracing.startRecording(options, function() {
  console.log('Tracing started');

  setTimeout(function() {
    contentTracing.stopRecording('', function(path) {
      console.log('Tracing data recorded to ' + path);
    });
  }, 5000);
});

9.20.1 contentTracing.getCategories(callback)

callback Function

Получите набор групп таксономии.Группу таксономии можно изменить на новый путь кода.

Как только все дочерние процессы получат запрос метода getCategories, группа категорий вызовет обратный вызов.

9.20.2 contentTracing.startRecording(options, callback)

options Object

categoryFilter String

traceOptions String

callback Function

Начать запись во все процессы (запись)

Запись начнется, как только будет получен запрос на начало записи и подпроцессы прослушивают запись асинхронно.Обратный вызов будет вызван, когда все подпроцессы получат запрос startRecording.

categoryFilter – это фильтр, определяющий, какие группы категорий следует использовать для поиска. Фильтр должен иметь необязательный префикс –, чтобы исключить совпадающие группы категорий. Один и тот же список не может быть одновременно включающим и исключающим.

9.20.3 contentTracing.stopRecording(resultFilePath, callback)

resultFilePath String

callback Function

Остановить ведение журнала для всех дочерних процессов.

Дочерние процессы обычно кэшируют данные поиска и перехватывают и отправляют данные только основному процессу. Это помогает сократить накладные расходы времени выполнения на поиск перед отправкой их через IPC, что является ценным. Поэтому для отправки данных поиска мы должны асинхронно уведомлять все дочерние процессы. процессы для перехвата любых данных для поиска.

Как только все дочерние процессы получат запрос stopRecording, будет вызван обратный вызов, и будет возвращен файл, содержащий данные поиска.

Если resultFilePath не пуст, в него будут записаны данные поиска, в противном случае будет записан временный файл.Если фактический путь к файлу не пуст, будет вызван callback.

9.21 powerSaveBlocker

Модуль powerSaveBlocker используется для предотвращения перехода системы приложения в спящий режим, что позволяет приложению поддерживать работу системы и экрана.

const powerSaveBlocker = require('electron').powerSaveBlocker;

var id = powerSaveBlocker.start('prevent-display-sleep');
console.log(powerSaveBlocker.isStarted(id));

powerSaveBlocker.stop(id);

9.21.1 powerSaveBlocker.start(type)

type String — тип блокировки принудительного сохранения.

prevent-app-suspension — Предотвратить приостановку работы приложения. Оставьте систему активной, но разрешите выключению экрана. Примеры использования: загрузка файлов или воспроизведение аудио.

prevent-display-sleep — предотвращает переход приложения в спящий режим. Система и экран остаются активными, экран всегда включен. Вариант использования: воспроизведение аудио.

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

Примечание: prevent-display-sleep имеет более высокий приоритет, чем prevent-app-suspension. Вступает в силу только наивысший приоритет.Другими словами, prevent-display-sleep всегда имеет более высокий приоритет, чем prevent-app-suspension.

Например, A запрашивает предотвращение приостановки работы приложения, B запрашивает предотвращение отображения-сна.

9.21.2 powerSaveBlocker.stop(id)

id Целое число — идентификатор блокировщика проверки активности, возвращаемый powerSaveBlocker.start Деактивирует указанный блокировщик.

9.21.3 powerSaveBlocker.isStarted(id)

id Целое число — идентификатор блокировщика поддержки активности, возвращенный powerSaveBlocker.start.Возвращает логическое значение, указывающее, был ли запущен соответствующий блокировщик powerSaveBlocker.

9.22 powerMonitor

Модуль power-monitor используется для наблюдения за изменениями зоны энергопотребления, его можно использовать только в основном процессе, этот модуль нельзя использовать после срабатывания события готовности модуля приложения.

app.on('ready', function() {
  require('electron').powerMonitor.on('suspend', function() {
    console.log('The system is going to sleep');
  });
});

Модуль контроля питания может инициировать следующие события:

Event: 'suspend'

Срабатывает при зависании системы.

Event: 'resume'

Испускается при возобновлении работы системы.

Event: 'on-ac'

Излучается, когда система переключается на питание переменного тока.

Event: 'on-battery'

Испускается, когда система переключается на питание от батареи.

9.23 autoUpdater

Этот модуль предоставляет интерфейс для платформы автоматического обновления Squirrel.

9.23.1 autoUpdater.setFeedURL(url)

url String

Установите URL-адрес для проверки обновлений и инициируйте автоматические обновления. Этот URL нельзя изменить после установки.

9.23.2 autoUpdater.checkForUpdates()

Уточните у сервера, доступно ли сейчас обновление. Перед вызовом этого метода сначала необходимо вызвать setFeedURL.

9.23.3 autoUpdater.quitAndInstall()

После завершения загрузки перезапустите текущее приложение и установите обновление. Этот метод следует вызывать только после того, как сработает событие загрузки обновления.

10. Выбор кадра

Через vue3+TS+electron16+vite2 и react+TS+electron16+vite2 у нас есть более конкретное понимание двух маршрутов, поэтому следующим шагом будет выбор, какой фреймворк выбрать, и последующее построение инфраструктуры.

10.1 МВВМ и МВК

Vue — это MVVM, а React — это MVC.

MVVM (Model-View-ViewModel) основан на MVC (Model View Controller), VM извлекает бизнес-логику, отображаемую в контроллере, вместо того, чтобы заменять контроллер, другие службы операций представления должны по-прежнему реализовываться в контроллере.

Иными словами, MVVM реализует повторное использование компонентов бизнес-логики, делая разработку более эффективной, более ясной по структуре и повышая возможность повторного использования кода.

Можно понять, что MVVM — это обновленная версия MVC.

Хотя React не является полной средой MVC, его можно рассматривать как V (View) в MVC, но MVVM Vue более ориентирован на будущее.

10.2 Привязка данных

Vue — это двусторонняя привязка, а react — односторонняя привязка.

Преимущество односторонней привязки заключается в том, что она может обеспечить соответствующий односторонний поток данных. Преимущество этого заключается в том, что все изменения состояния могут быть записаны и отслежены, а изменения состояния уведомляются посредством ручных вызовов. Источник легко отследить, и нет "операции черного ящика". В то же время данные компонента имеют только один вход и выход, что делает программу более интуитивно понятной и простой для понимания, что выгодно для ремонтопригодности проекта.

Однако, хотя Vue является двусторонней привязкой, это также и односторонний поток данных.Его двусторонняя привязка — это просто синтаксический сахар.Если вы хотите увидеть серьезную двустороннюю привязку, вы можете перейти на Dva.

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

Двусторонняя привязка может упростить код, связанный с бизнесом, в сценариях с множеством форм взаимодействия.

Я думаю, что дизайн Vue лучше, используя односторонний для глобального потока данных и двусторонний для локального потока данных.

10.3 Обновление данных

10.3.1 Процесс обновления React

React уважает Immutable (неизменяемость), чтобы обнаруживать и обновлять себя путем повторного рендеринга.

10.3.2 Процесс обновления Vue

Vue обнаруживает обновления, собирая зависимости данных.

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

Поэтому, если некоторые данные в данных не используются в шаблоне шаблона, обновление не будет запускаться при обновлении данных. Этот дизайн очень хорош, в шаблоне не используется переменная, при изменении ее значения представление не обновляется, что эквивалентно встроенному в React shouldComponentUpdate.

10.3.3 Сравнение обновлений

  • Способы получения обновлений данных и степень детализации обновлений различаются

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

React будет рекурсивно повторно отображать все подкомпоненты, независимо от того, являются ли обновленные данные новыми на данный момент. Затем используется алгоритм сравнения, чтобы решить, какую часть представления следует обновить. Итак, гранулярность обновлений React — это целое.

  • Обработка того, нужно ли отображать страницу для обновления данных, отличается
  • Vue будет повторно отображать страницу только в том случае, если собранные данные будут обновлены.
  • Пока данные обновляются (setState, useState и т. д. инициируют обновление), страница будет повторно отображаться (можно улучшить с помощью shouldComponentUpdate/PureComponent).

В документации Vue есть описание того, что Vue — это мелкозернистый механизм ответа на данные, поэтому для обновления данных я думаю, что дизайн Vue лучше.

10.4 Сравнение производительности

Чтобы позаимствовать цитату из Youda:

Шаблоны навешивают tsx с точки зрения производительности.Использование tsx под предпосылкой поддержки IDE и сглаживания по существу приносит в жертву производительность пользовательского опыта для предпочтения разработчика (не имеет значения, если производительность не сталкивается с узкими местами) Я не поддерживаю фреймворк Я также могу понять людей, которые жалуются, в конце концов, как пользователь, вам нужно только подумать, счастливы вы или нет. Как сопровождающий, существующие пользовательские привычки, экология и исторический багаж Vue присутствуют, а степень радикализации ограничена.Большая часть дизайна Vue 3 танцует в кандалах и требует множества компромиссов. Если вы действительно хотите быть радикальным, вы можете также начать новый проект или проект билетов, который никто не использует, вы можете создавать все, что хотите. Проблема компонентных дженериков также поднималась многими, это действительно невозможно в настоящее время, но это не означает, что будущего не будет. В конце концов, если честно, во фронтенде есть всего несколько гимнастов, у которых тип ниже этого вопроса, и у большинства из них есть intellisense + проверка типов для удовлетворения потребностей. Неплохо использовать React действительно для типа, это не более чем плохая производительность.

Почему производительность шаблона зависает в TSX?

tsx и шаблон vue на самом деле являются одним и тем же языком шаблонов, tsx в конечном итоге будет скомпилирован в createElement, а шаблон будет скомпилирован в функцию рендеринга, поэтому, по сути, оба имеют время компиляции и время выполнения, но особенность tsx заключается в том, что он Согласно семантике ts, слишком гибкий делает оптимизацию невозможной. Тем не менее, шаблон vue выигрывает от собственного DSL и имеет собственную грамматику и семантику, поэтому vue провел большую оптимизацию во время компиляции шаблона, например, улучшил постоянный vnode и блок-дерево с целевым обновлением patchflag. будет сильно снижать производительность в окончательной среде выполнения.

DSL: аконкретное полеРазработано,Ограниченный выразительныйизЯзык программирования.

Таким образом, производительность Vue лучше, чем React.

10.5 Крючки React и Vue

На самом деле React Hook имеет множество ограничений, например, в официальной документации есть специальная глава, посвященная его ограничениям:

  1. Не вызывайте хуки в циклах, условных выражениях или вложенных функциях.
  2. Обязательно всегда вызывайте их на верхнем уровне ваших функций React.
  3. Следуя этому правилу, вы можете гарантировать, что хуки вызываются в одном и том же порядке при каждом рендеринге. Это позволяет React поддерживать правильное состояние ловушки при нескольких вызовах useState и useEffect.

Разница, которую приносит Vue, заключается в следующем:

  1. Тот же уровень функциональности логической композиции, что и у React Hooks, но с некоторыми важными отличиями. В отличие от React Hook, функция настройки вызывается только один раз, что более эффективно.

  2. Последовательность вызова не требуется, и функция Hook не будет вызываться повторно при каждом рендеринге, что снижает нагрузку на сборщик мусора.

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

  4. У хука React есть печально известная проблема с ловушкой закрытия: если пользователь забывает правильный массив зависимостей, Useeffect и USEMEMO могут зафиксировать время, на которое эта проблема не влияет. Автоматическое отслеживание зависимостей Vue гарантирует, что наблюдатель и вычисляемое значение всегда верны.

  5. Я должен упомянуть, что «зависимость» в React Hook необходимо объявлять вручную, и официально предоставляется плагин eslint.Хотя этот плагин полезен в большинстве случаев, иногда он очень раздражает и требует, чтобы вы вручную добавьте строку Уродливый комментарий, чтобы отключить его.

Мы признаем креативность React Hooks, которая является основным источником вдохновения для Vue-Composition-Api. Упомянутые выше проблемы действительно существуют в дизайне React Hook, и мы заметили, что реактивная модель Vue прекрасно решает эти проблемы.

--- из ssh

Когда впервые появился комбинированный API Vue, он действительно выглядел как React Hooks, и я также жаловался на его .value.

Но в целом он по-прежнему предпочитает Vue Hooks.

10.6 Написание

Идея React вся в js, html генерируется через js, поэтому jsx спроектирован, а js используется для работы css, styled-component, jss сообщества и т. д., так что стиль написания React ощущается относительно бесплатно, и логика верна, я думаю, как писать, как писать, для меня я предпочитаю способ написания React.

Vue сочетает в себе html, css и js, как и традиционный метод разработки веб-разработки на протяжении многих лет, vue-loader будет анализировать файл, извлекать каждый языковой блок и использовать свой собственный метод обработки, vue имеет компонент одного файла (SFC), вы можете записать html, css и js в файл, а html предоставляет механизм шаблонов для обработки этого. Vue чувствует, что он построил структуру для вас, чтобы сказать вам, где что писать, вам просто нужно заполнить контент в соответствии с его требованиями.Это не так бесплатно, как React, но гораздо проще начать работу. А из-за SFC код компонента может выглядеть очень длинным, и поддерживать его — головная боль.

Затем, учитывая бизнес-среду, нам нужно сделать видео для нескольких человек и общую доску, поэтому существуют относительно высокие требования к обновлению данных, а рендеринг и обработка данных Vue сильнее, чем реакция, поэтому мы, наконец, выбрали Vue.

11. Выбор библиотеки компонентов

Тут я думаю о двух вариантах, один elementmt-plus, другой ant-design-vue.

element-plus — это библиотека компонентов рабочего стола на основе Vue 3 для разработчиков, дизайнеров и продакт-менеджеров.

antd-vue — это адаптация antd к vue. Я использовал его раньше, и все в порядке.

Наконец, был выбран более целевой элемент-плюс.

npm i element-plus --save

Затем импортируйте все это.

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
  .use(ElementPlus)
  .mount("#app");

12. ESLint и красивее

12.1 ESLint и TSLint

ESLint — это инструмент для проверки кода JavaScript. С помощью ESLint наш код может соответствовать определенному формату стиля. И убедитесь, что код соответствует спецификации формата.

Некоторые из вас, возможно, слышали о TSLint, он был создан для TypeScript. Но в 2019 году команда TSLint решила не поддерживать его и вместо этого рекомендовала ESLint. Основная причина отсутствия сопровождения в том, что у TSLint и ESLint одинаковые функции, и много повторяющегося кода, поэтому я этим не занимаюсь.

В будущем мы будем использовать ESLint для проектов TypeScript.

12.2 Настройка ESLint

npm install eslint -g

После глобальной установки ESLint установите ESLint в плагине.

eslint --init

После инициализации в текущем каталоге создается файл конфигурации с именем .eslintrc.js, который можно настроить в соответствии с личными предпочтениями.ESL int.boot CSS.com/docs/rules/…

Измените settings.json:

12.3 prettier

В чем разница между ESLint и Prettier?

Основные функции eslint (включая некоторые другие инструменты lint) включают проверку формата кода и проверку качества кода.

И красивее проверяют только формат кода (и форматы кода), а не качество кода.

npm install --save-dev --save-exact prettier

Создать в корневом каталоге.prettierrc.jsконфигурационный файл.

существует.prettierrc.jsНапишите следующее в:

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

13. Модуль журнала

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

      window.onerror = function (message, source, lineno, colno, error) {
        exportRaw('报错信息：' + message + '文件位置：' + source, 'error');
        return true;
      };

    const exportRaw = (data, name) => {
      let urlObject = window.URL || window.webkitURL || window;
      let export_blob = new Blob([data]);
      let save_link = document.createElementNS(
        'http://www.w3.org/1999/xhtml',
        'a',
      );
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      save_link.click();
    };

14. Последующее планирование (оптимизация инфраструктуры и производительности)

Проект все еще находится в стадии стартапа, и у меня есть много планов, которые на данный момент сложно реализовать, такие как:

  1. Настройка ESLint + prettier + yorkie (хаски), git hooks
  2. Онлайн сигнализация sentry.js
  3. Скрытая точка, управление разрешениями и другие конфигурации
  4. Схема взаимодействия front-end и back-end (swagger/yapi)
  5. Автоматический выпуск (Дженкинс)
  6. Обзор памяти и оптимизация производительности

Если есть возможность, будут выданы основные этапы строительства и анализ параметров производительности, а также оптимизация производительности и конкретные данные.

Категории