Write in front: I am general in technology, this article is for me to learn while writing, inevitable errors and technical aspects of the imperfect situation, for reference only. If there is any mistake, please correct it.
Can cross the wall as far as possible, the domestic network you know
This paper is based on Windows development platform, Mac users for reference only
（Download electronic Chinese api）
1. Install firstnode
After installation, run in CMDnode -vCheck whether the installation is successful.
2. InstallationElectron
Using NPM to install electron:
npm install --g electron-prebuilt
Run after installationelectron -vCheck whether the installation is successful
3. A simple electron program
First of all, switch to the application development root directoryD:\LvAllCode\electron\MC
Then create the electron simple file structure
Use in the root directorynpm initCommand creationpackage.jsonFile, fill in according to the prompt,
Perform oncenpm install --save-dev electron-prebuilt
It’s almost like this in the end
{
"name": "mclans",
"version": "1.0.0",
"description": "mc_login_app",
"main": "app/main.js",
"dependencies": {
"electron-prebuilt": "^0.37.3"
},
"devDependencies": {
"electron-prebuilt": "^0.37.3"
},
"scripts": {
"test": "hello",
"start": "electron ."
},
"author": "yupeglv",
"license": "ISC"
}
Then create it in the root directoryappFolder, inapp/Create main.js The contents are as follows:
//Application control module
var app = require("app")
//Create window module
var BrowserWindow = require('browser-window'),
//Main window
var mainWindow = null;
//Initialize and prepare to create the main window
app.on('ready', function () {
//Create a window 800px wide and 700px high
mainWindow = new BrowserWindow({
width: 800,
height: 700,
});
//Load application's inde.html
mainWindow.loadUrl('file://' + __dirname + '/html/index.html');
//Open the development tool interface
mainWindow.openDevTools();
//Triggered when the window is closed
mainWindow.on('closed', function(){
//To dereference window objects, if your application supports multiple windows, you need to store all window objects in an array, and then delete the corresponding elements here
mainWindow = null
});
});And then in theapp/htmlCreate index.html The contents of the document are as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
< title > my world
</head>
<body>
<span style="color:#fff;">Hello World</span>
</body>
</html>Finally, the overall file directory of the project looks like this:
4. Start your project
In the root directory, type on the command linenpm start(need to be inpackage.jsonMedium configuration
"scripts": {"start": "electron ."}）Or inputelectron .(note that there is a point, and the electronic device is global.)
5. ConfigurationVS Codedevelopment environment
Install the whole situation firstglup：npm install gulp -g
Reload local:npm install --save-dev gulp
As for whyLook at this
Create in the root directorygulpfile.jsThe configuration file is as follows:
//Get dependencies
var gulp = require('gulp'),
childProcess = require('child_process'),
electron = require('electron-prebuilt');
//Create a gulp task
gulp.task('run', function () {
childProcess.spawn(electron, ['.'], {stdio:'inherit'});
});functiongulpTask:gulp run
See the familiar interface again!!
Open your project in vs Code:
Press the shortcut keyctrl+shift+bThe first time you start, you will be prompted to configuretaskFile, clickConfigure Task Runner
After that, the vs code will automatically./.vscodeCreate atasks.jsonConfiguration file, let’s edit this file:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [ {
"taskName": "run",
"args": [],
"isBuildCommand": true
}]
}Save, then pressctrl+shift+bWe can run our program directly.
6. Debug with vs code
(this part is for reference only, because I didn’t run successfully. If you know why, please tell me)
clickDEBUGInterface settings button
Vs code automatically in./.vscodeDirectorylaunch.json
We don’t need to startmain.jsSo remove it nowlaunch.jsonIt should be as follows:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}Change previously createdgulpfile.jsfile
gulp.task('run', function () {
childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'});
});In the debug panel, selectAttachThen clickRUNButton to start debugging.
So far, our first electron program has been developed,Next sectionLet’s see how to package it into an execution program