- 推薦使用vscode編輯器
- nodejs 環(huán)境战惊，網(wǎng)上有很多，不重新贅述
- 全局安裝electron
npm install -g electron
- 創(chuàng)建一個(gè)文件夾app并且初始化一個(gè)項(xiàng)目, 此時(shí)會生成一個(gè)package.json文件
npm init -y
package.json
{
"name": "elecApp",
"version": "1.0.0",
"description": "",
"main": "index.js", //注意： 將此處的index.js改成main.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^1.7.9"
}
}
- 進(jìn)入app文件夾同欠，并且安裝依賴electron
cd app/
npm install --save electron
- 創(chuàng)建一個(gè)main.js文件样傍，內(nèi)容如下：
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
const createWindow = () => {
win = new BrowserWindow({
width: 800,
height: 600
});
const URL = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
});
console.log(URL);
win.loadURL(URL);
win.webContents.openDevTools();
win.on('close', () => {
win = null;
}) ;
}
app.on('ready', createWindow);
app.on('window-all-close', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
- 新建一個(gè)index.html文件，內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第一個(gè)electron程序</title>
</head>
<body>
<h1>hello electron</h1>
</body>
</html>
- 點(diǎn)擊vscode調(diào)試工具铺遂，加入electron main程序衫哥，點(diǎn)擊運(yùn)行，即刻看到結(jié)果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
