您的位置：首页 > Web前端 > Node.js

Electron开发桌面应用(1)：环境准备、入门Demo搭建

2017-12-24 14:45 676 查看

介绍

Electron 是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。

具体介绍参考官方网站：

https://electronjs.org/

环境准备

nodejs 运行环境

nodejs安装，请参考：http://blog.csdn.net/ruyulin/article/details/78877597

electron 开发环境

npm install electron

入门demo

创建项目：

E:\NodeStu>mkdir demo

E:\NodeStu>cd demo

E:\NodeStu\demo>npm init -y
Wrote to E:\NodeStu\demo\package.json:

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

添加依赖：

E:\NodeStu\demo>npm install electron -S

> electron@1.7.10 postinstall E:\NodeStu\demo\node_modules\electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.

+ electron@1.7.10
added 152 packages in 10.059s

E:\NodeStu\demo>

修改：package.json

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^1.7.10"
}
}

新建：main.js

const electron = require('electron');
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 640,
transparent: false,
frame: true,
resizable : true //固定大小
});

const URL = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})

mainWindow.loadURL(URL);
console.log(URL);
mainWindow.openDevTools()

mainWindow.on('closed', function () {
mainWindow = null;
});

}

app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});

新建：index.html

<!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>Document</title>
</head>
<body>
hello!
</body>
</html>

命令测试启动项目：

E:\NodeStu\demo>npm install
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.

up to date in 0.639s

E:\NodeStu\demo>npm start

> demo@1.0.0 start E:\NodeStu\demo
> electron .

file:///E:\NodeStu\demo\index.html

E:\No
c825
deStu\demo>

启动成功：

electron demo下载地址：

https://gitee.com/ruyulin/electronDemo

其他配置

配置启动logo：

const electron = require('electron');
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow () {
var ico = path.join(__dirname, 'img', 'logo.png');

// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 640,
transparent: false,
frame: true,
icon: ico,
resizable : true //固定大小
});

const URL = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})

mainWindow.loadURL(URL);
console.log(URL);
mainWindow.openDevTools()

mainWindow.on('closed', function () {
mainWindow = null;
});

}

app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});

启动后会有启动logo：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 桌面应用跨平台 nodejs electron

相关文章推荐

新的分享

章节导航