A. Installation
1. Install node.js
Node.js downloaded from the official website
recommended download LTS version (currently 10.16.3), the default installation.
2. Install the yarn
Start cmd to administrator mode, executing instructions:
npm install yarn -g
According to the official website, Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码， 或者分享自己的代码。Yarn 做这些快捷、安全、可靠，所以你不用担心什么。
here we use the yarn in place of the default package manager npm
Note: From this point, after any step instructions are executed, we need to carefully review the log cmd window to print.
Log there will be some key tips, such as after you execute yarn add xxx or npm install xxx, print the following log
added 253 packages from 162 contributors and audited 1117 packages in 42.157s
found 5 vulnerabilities (1 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details htmlThat requires the user to execute npm audit fixinstructions for 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，而不必再自己进行跟踪和修复。
the next tutorial, readers need to carefully observe every step of the log, timely repair, it will no longer be repeatedly reminded.
3. Install the build environment
Cmd in the execution of the instructions:
npm install -g windows-build-tools
This step will install python2.7 msbuild and so on.
4. Set Environment Variables
Cmd in the execution of the instructions:
npm config set python python2.7
npm config set msvs_version 2017
The first sentence command, specifies the use python2.7 as the build environment (already installed in the previous step), electron does not support python3.x.
After specifying the environment variable, users do not need this unit to other python unloaded.
5. Create a project directory
Create a new folder as your project root directory and the directory path. Do not use any Chinese, but also try not to appear spaces.
In the cmd window, use the cd command to change the current directory to the root directory of the project.
6. Create Project
Execution command:
npm init -y
In this step we use npm initialize the project and automatically in the root directory of the project to establish a package.json file, here we leave this file alone, configure it again later.
7. Install the electron
Execution command:
yarn add electron@latest --save-dev
This instruction will be in your project, install the latest version of the electron.
If you want to install other versions of the electron, put the latest modifications to the corresponding version number, such as [email protected] or electron @ beta
8. Modify package.json
Recommended vscode edit
After opening package.json, see the following:
I've added some content in package.json:
"main": "main.js"
Specifies the start of the project entrance.
"start": "electron ."
Specify a startup script, then you can start your application through this script.
We can also see that "devDependencies"there is a "electron": ^6.0.10
sufficient here you install the module, as well as the corresponding version. When you use the yarn add modules installed, there will be automatically updated.
9. Add main.js
In the previous step, we specify the project started in the entrance package.js: main.js.
Let's create this file and add content:
In the project root directory, create main.js file.
Add the following:
//////////////////////////////////////////////////////////////////////////////////////
const { app, BrowserWindow } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
//////////////////////////////////////////////////////////////////
10. Add index.html
Main.js in the previous step, we specify a html file is loaded, the html file is the main page of the program.
In the project root directory, create the index.html file.
Add the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
11. Start!
In front of a few, we have created in order to complete the project, initialization, electron installed, add three essential documents (ie package.json, main.js and index.html).
Now, we can finally start our program the electron!
Make sure your working directory for the project root directory and execute command:
Elevation start
Program has been started!
Launched a separate program on your desktop, on the left interface displayed after rendering is index.html, and the right of the interface is actually Developer options Chrome / Chromium browser (F12).
If the option does not require developers to debug, then, simply main.js in win.webContents.openDevTools()front of them, again through the npm startstart of our program.
Now, you can modify index.html, add some new elements to the program's main interface.