Electron simple example

Electron can use pure JavaScript call rich native APIs to create desktop applications. We can think of it as a Node. js , which focuses on desktop applications instead of Web server side.

From a development point of view, the Electron application is essentially a Node. js application. Same as the Node.js module, the application entry is the package.json file. A simple Electron project contains three basic files: package.json , index.hmtl , main.js .

package.json is the configuration file of the Node.js
index.html is the interface page of the desktop application.
main.js is the startup entry file of the application.

Create project

We create a new my_electron in the specified path as the project root directory, and then use the cd command in the command tool to change the current directory to the project root directory:

>cd C:\Users\lu\Desktop\my_electron

As shown below:

Then execute the npm init command to initialize the project, as shown in the following figure:

After the command is executed successfully, a package.json file will be created in the project root directory. If all the default configurations are selected, you can directly execute the npm init -y command.

Modify package.json

We can modify the created package.json file and scripts , as shown below:

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js"
  },
  "keywords": [],
  "author": "Silenzio",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

We specify a startup script in this file, and then we can start the program through this script. It will use electron to start the main.js file in the src

You can also see that there is an item "electron": "^10.1.2" "devDependencies" in this file, which means that electron has been successfully installed and added to the dependencies.

Create main.js file

We created in the root directory of the project a src folder and create a folder in the main.js file, this file is to start entry file applications.

Electron application is JavaScript , and its working principle and method are the same as those developed by Node.js electron module contains Electron all offers API and function, and the method of introducing Node.js modules, are available through require() be introduced, for example:

const electron = require('electron')

electron module are exposed through the namespace. For example, electron.app is responsible for managing the life cycle of the Electron electron.BrowserWindow class is responsible for creating windows and so on.

Example:

For example, we want main.js file, the content is as follows:

// 引入electron
const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载index.html文件
  win.loadFile('../html/index.html');

  // 自动打开开发者工具
  win.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发
  win.on('closed', () => {
    win = null;
  });
}

// Electron 会在初始化后并准备，创建浏览器窗口时，调用这个函数
app.on('ready', createWindow);
// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

Add index.html file

In the above main.js file, we specified a index.html file. This html file is the main page of the program.

So we also need to create in the root directory of the project a html folder, create a folder in the index.html file contents are as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my_electron</title>
  </head>
  <body>
    <h1>你好，侠课岛!</h1>
  </body>
</html>

Startup project

After completing the steps of creating the project, initializing the project, installing electron , and creating the necessary files, now we can start the project. Because we have package.json file, we only need to directly under the project root directory directly as follows:

npm start

After the command is executed, the program is started, as shown in the following figure:

At this time, a separate program is launched on the desktop. The left side of the interface in this program shows the rendered index.html , and the right part of the interface shows the developer options Chrome/Chromium Because we win.webContents.openDevTools(); main.js file, the developer tools will be opened automatically when the program is started. If you need developer tools, you only need to comment this code, and then start the program again.

Electron simple example

Create project

Modify package.json

Create main.js file

Example:

Add index.html file

Startup project

知否

引用和评论

jQuery 实现淡入淡出效果

Vue.js-Vue实例

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Flex 布局学习总结（对齐方式）

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！