Electron Frame quick start

Introduction to the

  • Electron is a framework for creating desktop applications using JavaScript, HTML and CSS. Packaged, it can run directly on macOS, Windows, and Linux, or it can’t be distributed to the App Store.
  • Front-end developers can use their own familiar language to develop a desktop application, install and use
  • Electron contains three cores:
    • Chromium is used to display web content.
    • Node.js is used by local file systems and operating systems
    • Custom APIs are used to use OS native functions that are often needed
  • Developing an application at Electron is like building a Node.js application with a web interface

The development environment

  • Node environment development (for those not installed go to download and install: NodeJS link)
  • Different versions of the Electron have different requirements for the Node version (you can contact the website of each Electron version of the Node -V).

Create a project

Create folders, initialize projects, and install dependencies

    mkdir my-electron-app && cd my-electron-app

    npm init -y

    npm i --save-dev electron

Copy the code

Note:

#If the download fails, create a.npmrc file => Specify the download source:
            registry=https://registry.npm.taobao.org
            electron_mirror="https://npm.taobao.org/mirrors/electron/"

Copy the code

Create the main process

  • The entry point for Electron (in our case, yesmain.jsFile)
  • The main process controls the application lifecycle, displays the graphical user interface and its elements, performs native operating system interactions, and creates renderers (child processes) in web pages
  • The Electron application can have only one main process
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() = > {
  createWindow()

  app.on('activate'.() = > {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

Copy the code

Create subroutine

  • This is the page you want to display after the application is initialized. This page represents the rendering process. You can create multiple browser Windows, each using its own separate rendering processindex.html
<! DOCTYPEhtml>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

Copy the code

Define preloaded scripts

  • Your preloaded scripts act as a bridge between Node.js and your web page. It allows you to expose specific apis and behaviors to your web pages, rather than unsecurely exposing the entire Node.js API. In this case, we will use a preloaded script fromprocessObject reads version information and updates the Web page with that information.
window.addEventListener('DOMContentLoaded'.() = > {
  const replaceText = (selector, text) = > {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome'.'node'.'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

Copy the code

Modify yourpackage.jsonfile

  • Electron application is usedpackage.jsonFile as the main entry (like other Node.js applications). The main script for your application ismain.js, so modify accordinglypackage.jsonFile:
{
    "name": "my-electron-app"."version": "0.1.0 from"."author": "your name"."description": "My Electron app"."main": "main.js"."scripts": {
        "start": "electron ."}}Copy the code
  • To run the programnpm start

The application generates the installation package

  • With the help ofelectron-builderGenerating installation packages
npm i -D electron-builder

#Specify the build configuration package.json below:"build": { "appId": "your.id", "mac": { "category": "your.app.category.type" } } "scripts": { "pack": "Electric-builder --dir", "dist":" electric-Builder "} NPM run distCopy the code
  • After developing a project using vue-CLI, package the project as a desktop application using electron Builder
#Install the electron - builder
vue add electron-builder

#preview
npm run electron:serve

#NPM command package
npm run electron:build

Copy the code

The resources

electron

electron-builder

CNPM image source