About a year ago, I also said that nodejs or javascript could not develop a window program. Later, some people hit their faces and said that electron can be. At that time, they did n’t take it seriously and felt incredible, but until today, electron has been very convenient to develop windows The program is really developing rapidly, and the development is very convenient, the environment installation is also very simple, you need the node development environment.
Mainly depends on electron. This can use the browser kernel to combine with the page to develop a window program interface. It is really very clever. The application starts, similar to starting a browser. It turns out that the way we need to manually open the browser to enter the url is wrapped by electron The browser kernel has been replaced.
Let's do actual combat, create a window application from scratch. The premise is that the machine has node installed, and the version has reached 10 or more, and the npm version has reached 6 or more.
According to the official documentation, we prepare three files, they are package.json, main.js, index.html. The contents are as follows:
package.json
{
"name": "electronapp",
"version": "1.0",
"main": "main.js"
}
main.js
const {app,BrowserWindow} = require('electron');
app.whenReady().then(createWindow)
app.on('window-all-closed',function(){
if(process.platform!='darwin')
app.quit();
});
function createWindow(){
var mainWindow = null;
mainWindow = new BrowserWindow({
width:800,
height:500,
webPreferences:{
nodeIntegration:true
}
});
mainWindow.loadFile("index.html");
mainWindow.webContents.openDevTools();
}
app.on('activate',function(){
if(BrowserWindow.getAllWindows().length==0){
createWindow();
}
})index.html
<!doctype html>
<html>
<head>
<title>electrondemo</title>
</head>
<body>
<h2>hello,this is electron app.</h2>
</body>
</html>The above code is actually very simple and straightforward. All we need to do is install the dependencies. In fact, the dependencies can be written to package.json. We can directly install them through npm install [email protected] --save-dev.
Run the program in the current directory:. \ Node_modules \ .bin \ electron.
In fact, it is the command electron. If the electron is installed globally, then the electron can be run directly. Because the sample index.html page is very simple, after opening here, the interface is as follows:
This is a very simple official example, and also an entry example for learning electron.
