一. Electron环境搭建
1. 安装nodejs
- 下载地址
- 安装
自动安装了npm - 测试是否安装成功
node -v
npm -v
2. 安装cnpm
- 执行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 测试是否安装成功
cnpm -v
3. 安装Electron
- 执行命令
cnpm install electron
- 来测试是否安装成功
electron -v
二. 安装IDE
下载Visual Studio Code并安装
三. 创建第一个程序
- 新建文件夹，例如D:\Electron\test
- 执行命令
npm init
- 生成了package.json文件，内容如下：
{
"name": "test5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 修改package.json中的脚本命令为electron
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
更改为：
"scripts": {
"start": "electron ."
},
- 新建index.js文件
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.on('ready', createWindow)
- 新建index.xml
<!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>
- 执行命令
npm start
四. 调试程序
五. 程序打包
- package.json文件增加build代码
"build": {
"appId": "mytest",
"productName": "Mytest",
"win": {
"icon": "res/logo.ico"
}
}
- 安装electron-builder
cnpm install electron-build -g
- 打包
build
