Elegance C#
0%

Develop Electron App

Posted on Edited on 
1
2
3
4
5
Visual C++ ->
	Visual C++ 2015
Common Windows Application Develop Tool ->
	Tool (1.2) & Windows 10 SDK (10.0.10586)
	Windows 10 SDK (10.0.10586)

Enter cmd.exe

1
2
3
4
5
6
$npm config set msvs_version 2015 --global

The above can avoid the following parameters for each installation
npm install [package name] --msvs_version=2015

$npm install electron-prebuilt --save

Each development new Electron App, first create folder C:\sample-app1, and cmd c:\sample-app1

1
2
3
4
5
6
7
sample-app1/
	├── package.json
	├── main.js
	├── webpack.config.js
	└── app/
		├── mainWindow.html
		└── mainWindow.jsx
  • Create package.json file
1
2
3
4
5
{
"name": "electron-example",
"version": "0.1.0",
"main": "main.js"
}

PS：If package.json Not specified main field，Electron default use index.js file.

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
'use strict';

    const electron = require('electron');
    // app: Control application lifecycle module
    const app = electron.app;

    // BrowserWindow: Create a native window module
    const BrowserWindow = electron.BrowserWindow;

    // Reserve a global object to avoid JavaScript object GC resulting window automatically closes
    let mainWindow;

    function createWindow () {
    	// Create browser window
    	mainWindow = new BrowserWindow({width: 800, height: 600});

    	// Load mainWindow.html for view
    	mainWindow.loadURL('file://' + __dirname + '/app/mainWindow.html');

    	// Open Developer Tools
    	mainWindow.webContents.openDevTools();

    	// When browser window closed，will send 'closed' signal，and run callback
    	mainWindow.on('closed', function() {
    		mainWindow = null;
    	});
    }

    // When Electron initialization is completed and begin establish the new window，
    // will send 'ready' signal，and run callback
    app.on('ready', createWindow);

    // app quit
    app.on('window-all-closed', function () {
    	// For OSX User platform, force user press Cmd + Q
    	if (process.platform !== 'darwin') {
    		app.quit();
    	}
    });

    app.on('activate', function () {
    	// For OSX
    	if (mainWindow === null) {
    		createWindow();
    	}
    });

app/mainWindow.html is show window view

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Electron-React app</title>
</head>
<body>
	<div id="content">
		Hello World!!
	</div>
</body>
</html>

In sample-app1 Folder, install package

1
$npm install electron-prebuilt

Run

$ node_modules/.bin/electron .

Second parameter is: package.json Folder path

Run webpack to generate new app/built/mainWindow.js file

$ ./node_modules/.bin/webpack

Start Run

$ node_modules.bin\electron .

In order to facilitate future easy to use，we will put instructions into package.json ,

1
2
3
4
5
"scripts": {
	"start": "./node_modules/.bin/electron ./",
	"electron-rebuild": "./node_modules/.bin/electron-rebuild",
	"webpack": "./node_modules/.bin/webpack"
}

After only need to run

$ npm run webpack && npm start