Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

Time:2020-12-2

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.
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

2. InstallationElectron

Using NPM to install electron:

npm install --g electron-prebuilt

Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
Run after installationelectron -vCheck whether the installation is successful
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

3. A simple electron program

First of all, switch to the application development root directoryD:\LvAllCode\electron\MC
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
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:

Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

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.)
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

5. ConfigurationVS Codedevelopment environment

Install the whole situation firstglupnpm install gulp -g
Reload local:npm install --save-dev gulp
As for whyLook at this
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld

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

Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
See the familiar interface again!!

Open your project in vs Code:

Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
Press the shortcut keyctrl+shift+bThe first time you start, you will be prompted to configuretaskFile, clickConfigure Task Runner

Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
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
Using electron + jQuery to develop desktop application from scratch (1) HelloWorld
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