Electron, which can wrap web page programs into desktop applications

Electron It's a use JavaScript、HTML and CSS Building a framework for desktop applications , Embedded Chromium,Nodejs, It can be used JavaScript Write the same code , Local applications published to different platforms , Support Windows、macOS,Linux.

Through it, we can package some web pages we use everyday , Make it an application that can be clicked on the desktop , Just click it when you want to use it , Don't open Google 、 Microsoft and other browsers , It is so troublesome to enter a web page into a website . Let's take a look at the actual code examples and demonstration effects .

1、 install node,npm

2、 Create a new folder , Name the project name , such as my-electron-app, Switch to this directory and run the command ：

mkdir my-electron-app && cd my-electron-app
npm init

 Some code files will be generated in this directory , among package.json There are some descriptions of the project and the author , most important of all main：main.js, The main entry of the table name program is main.js File code .

3、 take electron Install package into development dependency ,

npm install --save-dev electron

4、 In the project directory package.json In the configuration file scripts Add a start command ：

5, New in project directory main.js file , Add code

const path = require('path')
const { app, BrowserWindow } = require('electron');
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadURL('https://music.163.com/')
}

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

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

Here's an example , We packaged Netease cloud music web pages into desktop applications , Click the icon to open Netease cloud music .

6、 Carry out orders , Run to see the effect

7、 Here is the introduction of Electron Simple usage examples of , There are more and deeper applications that you can imagine .

Link to the original text ： Today's headline