Настольные операции в ElectronJS

Опубликовано: 5 Января, 2022

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Электрон может взаимодействовать с собственной средой ОС, такой как файловая система, системный лоток и т. Д. Electron предоставляет нам встроенный модуль оболочки, который помогает в управлении файлами и URL-адресами в среде собственной ОС с использованием их приложения по умолчанию. Этот модуль предоставляет функции, связанные с интеграцией рабочего стола, такие как открытие внешних ссылок, создание ярлыков, чтение ярлыков и т. Д. Модуль оболочки можно использовать непосредственно в основном процессе и процессе рендеринга приложения. В этом руководстве будет продемонстрирована интеграция рабочего стола с использованием модуля оболочки в Electron.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

  • Структура проекта:
  • sample.txt:
     Это образец текстового файла
  • delete.txt:
     Образец текстового файла для удаления
Пример: мы начнем с создания основного электронного приложения, выполнив указанные шаги.
  • Шаг 1. Перейдите в пустой каталог, чтобы настроить проект, и выполните следующую команду:
     npm init

    Чтобы сгенерировать файл package.json. Установите Electron с помощью npm, если он не установлен.

     npm установить электрон --save-dev

    Эта команда также создаст файл package-lock.json и установит необходимые зависимости node_modules. После успешной установки Electron откройте файл package.json и внесите необходимые изменения под ключом «scripts».

    package.json:

     {
  "name": "electronic-DesktopOperation",
  "версия": "1.0.0",
  "description": "Настольные операции в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон"
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.2.5"
  }
}
  • Шаг 2: Создайте файл main.js в соответствии со структурой проекта. Этот файл является основным процессом и действует как точка входа в приложение. Скопируйте код Boilerplate для файла main.js, как указано в следующей ссылке. Мы изменим код в соответствии с потребностями нашего проекта.

    main.js:

    const { app, BrowserWindow } = require( 'electron' )
    function createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    nodeIntegration: true
    }
    })
    // Load the index.html of the app.
    win.loadFile( 'src/index.html' )
    // Open the DevTools.
    win.webContents.openDevTools()
    }
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(createWindow)
    // Quit when all windows are closed.
    app.on( 'window-all-closed' , () => {
    // On macOS it is common for applications and their menu bar
    // To stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin' ) {
    app.quit()
    }
    })
    app.on( 'activate' , () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
    }
    })
    // In this file, you can include the rest of your app's specific
    // main process code. You can also put them in separate files and
    // require them here.
  • Шаг 3: Создайте файл index.html в каталоге src. Мы также скопируем шаблонный код для файла index.html из вышеупомянутой ссылки. Мы изменим код в соответствии с потребностями нашего проекта.

    index.html:

    <!DOCTYPE html>
    < html >
    < head >
    < meta charset = "UTF-8" >
    < title >Hello World!</ title >
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    < meta http-equiv = "Content-Security-Policy"
    content = "script-src 'self' 'unsafe-inline';" />
    </ head >
    < body >
    < h1 >Hello World!</ h1 > We are using node
    < script >
    document.write(process.versions.node)
    </ script >, Chrome
    < script >
    document.write(process.versions.chrome)
    </ script >, and Electron
    < script >
    document.write(process.versions.electron)
    </ script >.
    <!-- Adding Individual Renderer Process JS File -->
    < script src = "index.js" ></ script >
    </ body >
    </ html >
  • Вывод: На этом этапе настроено наше основное электронное приложение. Чтобы запустить приложение Electron, запустите команду:
     npm start

Модуль оболочки в Electron: все модули оболочки описаны в примере ниже:

  1. shell.openExternal (url, options): для открытия внешних URL-адресов системным способом по умолчанию. Мы можем передать внешние ссылки или почтовые идентификаторы, и это будет решено в соответствии с предоставленным протоколом.

    Shell.OpenExternal (url, options) возвращает Promise . Принимает следующие параметры:

    • url: String Внешний URL-адрес, который необходимо разрешить. В Windows можно использовать не более 2081 символа. URL будет разрешен на основе поведения системы по умолчанию.
    • options: Object (Необязательно) Это объект, состоящий из следующих параметров,
      • activate: Boolean Поддерживается только macOS . Используется для вывода открытого приложения на передний план. По умолчанию установлено значение true .

    index.html: добавьте в этот файл следующий фрагмент.

    < br >
    < h3 >
    Desktop Integrations in Electron using Shell Module
    </ h3 >
    < button id = "external" >
    Open GeeksForGeeks.org in Default Browser
    </ button >
    < br >< br >
    < button id = "mail" >
    Open GeeksForGeeks in Default Mail
    </ button >

    index.js: добавьте в этот файл следующий фрагмент.



    const electron = require( 'electron' );
    const path = require( 'path' );
    // Importing the Shell Module from the electron
    // in the Renderer Process
    const shell = electron.shell;
    var external = document.getElementById( 'external' );
    var externalOptions = {
    // Supported by macOS only
    activate: true ,
    }
    external.addEventListener( 'click' , (event) => {
    // Returns a Promise<void>, Hence we can use
    // the .then( function() {} )
    shell.openExternal(
    ' https://www.geeksforgeeks.org/ ' , externalOptions)
    .then(() => {
    console.log( 'Link Opened Successfully' );
    });
    });
    var mail = document.getElementById( 'mail' );
    mail.addEventListener( 'click' , (event) => {
    // Resolving the External URL to the Default Mail Agent
    // Because we have specified 'mailto'
    shell.openExternal(
    'mailto: https://www.geeksforgeeks.org/ ' , externalOptions)
    .then(() => {
    console.log( 'Link Opened Successfully' );
    });
    });

    Выход:

  2. shell.showItemInFolder (путь): для разрешения указанного пути к файлу String и отображения файла в проводнике Windows / File Explorer. Если возможно, также выберите файл. Этот метод не имеет возвращаемого типа.

    index.html: добавьте в этот файл следующий фрагмент.

    < br >< be >
    < button id = "show" >
    Show sample.txt in File Explorer
    </ button >

    index.js: добавьте в этот файл следующий фрагмент.

    var show = document.getElementById( 'show' );
    show.addEventListener( 'click' , (event) => {
    // Providing a dynamic file path to the 'sample.txt'
    // file in the 'assets' Folder. Using the path Module.
    // '__dirname' automatically detects current working directory
    shell.showItemInFolder(path.join(__dirname, '../assets/sample.txt' ));
    });

    Выход:

  3. shell.openItem (path): разрешить указанный путь к файлу String и открыть файл по умолчанию в системе. Он возвращает логическое значение, указывающее, был ли файл открыт успешно или нет.

    index.html: добавьте в этот файл следующий фрагмент.

    < br >< br >
    < button id = "open" >Open sample.txt</ button >

    index.js: добавьте в этот файл следующий фрагмент.

    var open = document.getElementById( 'open' );
    open.addEventListener( 'click' , (event) => {
    var success = shell.openItem(path.join(__dirname,
    '../assets/sample.txt' ));
    console.log( 'File Opened Successfully - ' , success);
    });

    Выход:

  4. shell.beep (): для воспроизведения собственного звука ОС. Этот метод не имеет возвращаемого типа. В этом руководстве он используется в сочетании с методом shell.moveItemToTrash () .
  5. shell.moveItemToTrash (путь, deleteFailure): Для того, чтобы разрешить данный путь к файлу Строка и переместить указанный файл в корзину / Bin. Возвращает логическое значение, указывающее, был ли файл успешно перемещен в корзину или нет.

    Shell.moveItemToTrash (путь, удаление) возвращает логическое значение. Принимает следующие параметры:

    • path: String Путь к файлу, который необходимо разрешить.
    • deleteFailure: Boolean (Необязательно) Поддерживается только macOS . Он указывает, следует ли полностью удалить файл из системы в случае, если корзина отключена или не поддерживается в системе.

    index.html: добавьте в этот файл следующий фрагмент.

    < br >< br >
    < button id = "delete" >Delete delete.txt</ button >

    index.js: добавьте в этот файл следующий фрагмент.

    var deleteItem = document.getElementById( 'delete' );
    deleteItem.addEventListener( 'click' , (event) => {
    // Play the Native OS Beep Sound
    shell.beep();
    // Returns a Boolean Value
    var success = shell.moveItemToTrash(path.join(__dirname,
    '../assets/delete.txt' ), true );
    console.log( 'File Deleted Successfully - ' , success);
    });

    Выход:

  6. shell.writeShortcutLink (путь, операция, параметры): эта операция поддерживается только в Windows. Чтобы разрешить данный путь String и создать / обновить ссылку быстрого доступа по этому пути. Он возвращает логическое значение, указывающее, была ли указанная операция выполнена успешно или нет.

    Shell.writeShortcutLink (путь, операции, параметры) возвращает логическое значение. Принимает следующие параметры:

    • path: String Определение пути ярлыка для выполняемой Операции.
    • операции: String (Необязательно) Определяет операцию, которую нужно выполнить. Значение операции по умолчанию - создать . Он может иметь любое из следующих значений:
      • create: создает новый ярлык. При необходимости выполняет перезапись.
      • update: обновляет указанные свойства существующего ярлыка.
      • replace: заменяет существующий ярлык. Эта операция не выполняется, если ярлык не существует.
    • Параметры: это объект shortcutDetails, состоящий из следующих параметров,
      • target: String Целевой файл, который предполагается запустить с этого ярлыка.
      • cwd: String (Необязательно) Указывает текущий рабочий каталог. Значение по умолчанию пусто .
      • args: String (Необязательно) Аргументы, которые нужно передать и применить к целевому файлу при запуске с ярлыка. Значение по умолчанию пусто .
      • description: String (Необязательно) Описание ярлыка. Значение по умолчанию пусто . Значение отображается как всплывающая подсказка при наведении курсора на созданный ярлык.
      • icon: String (Необязательно) Путь к используемому значку. Это может быть файл .dll или .exe. Свойство icon и свойство iconIndex необходимо указывать вместе. Значение по умолчанию для свойства значка пусто, что, в свою очередь, использует целевой значок по умолчанию или значок, который предполагается использовать, как определено в Системе. В этом руководстве мы создали ярлык для файла .txt. У него есть предопределенный значок в соответствии с Системой, но мы изменили его на значок файла блокнота, указав путь к notepad.exe в Системе.
      • iconIndex: Number (Необязательно) Идентификатор ресурса значка, если свойством значка является файл .dll или .exe. Значение по умолчанию для свойства iconIndex - 0. В этом руководстве мы сохраним для свойства iconIndex значение 0, чтобы значок файла notepad.exe вступил в силу.
      • appUserModelId: String (Необязательно) Идентификатор модели пользователя приложения. Значение по умолчанию пусто .

    index.html: добавьте в этот файл следующий фрагмент.

    < br >< br >
    < button id = "create" >
    Create sample.txt Shortcut
    </ button >
    < br >< br >

    index.js: добавьте в этот файл следующий фрагмент.

    var create = document.getElementById( 'create' );
    var shortcutDetails = {
    // Defining the target File as the 'sample.txt' File
    target: path.join(__dirname, '../assets/sample.txt' ),
    // Current Working Directory is 'assets' folder
    cwd: path.join(__dirname, '../assets/' ),
    args: "Passing Arguments" ,
    // Shown as Tooltip
    description: "Shortcut for sample.txt file" ,
    // Defining the icon for shortcut as the
    // 'notepad.exe' file
    // Instead of the System Default icon
    icon: " C://Windows//System32//notepad.exe " ,
    // Keeping the default value of iconIndex for the
    // 'notepad.exe' file icon to take effect
    iconIndex: 0,
    appUserModelId: "" ,
    }
    create.addEventListener( 'click' , (event) => {
    // Desktop - C:\Users\radhesh.khanna\Desktop\sample-shortcut.lnk
    // Specifying the name of the Shortcut while creation
    var success = shell.writeShortcutLink(path.join(__dirname,
    '../assets/sample-shortcut.lnk' ), 'create' , shortcutDetails);
    console.log( 'Shortcut Created Successfully - ' , success);
    });

    Выход:

  7. shell.readShortcutLink (путь): эта операция поддерживается только в Windows. Чтобы разрешить заданный путь String и прочитать ярлык, указанный в пути. Этот метод возвращает объект shortcutDetails. Этот объект объясняется выше при создании ярлыка. В случае ошибки будет выброшено исключение. В этом руководстве мы прочитаем и отобразим объект shortcutDetails для того же ярлыка (sample-shortcut.lnk), который мы создали выше для файла sample.txt.

    index.html: добавьте в этот файл следующий фрагмент.

    < div >
    < textarea name = "Shortcut Details"
    id = "textarea" cols = "30"
    rows = "10" >
    </ textarea >
    </ div >
    < button id = "read" >
    Read sample.txt Shortcut Details
    </ button >

    index.js: добавьте в этот файл следующий фрагмент.

    var read = document.getElementById( 'read' );
    // Defining a textarea to display the 'shortcutDetails' Object
    var textArea = document.getElementById( 'textarea' );
    read.addEventListener(( 'click' ), (event) => {
    var object = shell.readShortcutLink(path.join(__dirname,
    '../assets/sample-shortcut.lnk' ));
    // Object Returned is in JSON format, using 'JSON.stringify()'
    // method to convert to String
    console.log(object);
    textArea.innerHTML = JSON.stringify(object);
    });

    Выход:

JavaScript

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Что такое модули в Typescript?
23 Февраля, 2023
Как создать регулярное выражение, принимающее только специальную формулу?
23 Февраля, 2023