Electron是什么
使用HTML、CSS和Javascript 构建跨平台的桌面应用程序。
环境要求
- Windows运行环境需要win7及以上,因为Electron是基于Chrome V8 ,它不支持xp
- nodejs 和 npm,这两个使用稳定版,越新越好
- 代码编辑器,推荐使用vscode
搭建Electron项目
- 创建项目的根目录文件夹
- 在根目录下运行
npm init
命令 - 修改package.json文件
//修改的内容主要有两个,main节点值改成main.js(程序入口,不一定是这个名字,默认使用它),scripts节点增加start
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC"
}
- 安装electron
建议配置npm的淘宝镜像和electron镜像,否则安装速度会很慢,甚至安装不上。
npm config set registry https://registry.npm.taobao.org
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
# 在根目录下运行
npm install --save-dev electron
- 创建main.js,编写代码运行(npm start 运行)
简单示例:
//main.js
const {app,BrowserWindow} = require('electron');
function createWindow(){
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Electron</title>
</head>
<body>
<h1>Welcome to the Electron's world!!!</h1>
</body>
</html>