Appearance
三分钟快速了解和上手Electron桌面应用程序开发和打包发布
在使用Electron进行开发之前，您需要安装 Node.js。 我们建议您使用最新的LTS版本；
一、基本要求:开发环境
安装好 nodejs 和 npm, 一般nodjs会带npm，所以只需要下载nodejs安装包安装即可。
二、快速开始一个项目
- 新建 demo 项目+初始化 项目：
sh
$mkdir demo && cd demo && npm init- 生成的 package.json 如下： 程序入口是main，如果没有标明main，则默认加载index.jd。json
{ "name": "demo", "version": "1.0.0", "main": "index.js", // 主进程 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "description": "" } - 安装 electron
sh
# 系统版本高可如下安装
$npm install -D electron
# 系统版本低可如下安装
# $npm -g install cnpm
# $npx cnpm -v
# $cnpm install electron@22.0.2 -D
# $npx electron -v
$npm install electron@22.0.2 -D (22.0.2/22.3.4/24.6.2/25.6.0/25.9.8)- 项目代码结构如下: demo/ ├── node_modules ├── index.html ├── main.js ├── renderer.js ├── package-lock.json └── package.json
当前根目录下新建
main.js、index.html、renderer.js文件, 代码内容如下所示
package.json:
json
{
"name": "demo",
"version": "1.0.0",
"main": "main.js", // 主进程
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "electron ." // 添加启动脚本
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"electron": "^22.0.2"
}
}main.js：
js
// 导入依赖
const { app, BrowserWindow } = require('electron')
// 导入nodejs的path模块
const path = require('path')
// 创建浏览器窗口
const createWindow = () => {
let mainWindow = new BrowserWindow({
width: 300,
height: 300,
})
// 加载index.html文件
mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
// 或者直接加载url
// mainWindow.loadURL("http://wiki.xiaolikfcodecloud.top/")
}
// 应用ready后执行窗口创建动作
app.whenReady().then(() => {
createWindow()
// 当没有窗口的时候，创建一个窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows.length === 0) createWindow()
})
})
// windows & linux 上关闭窗口
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
console.log("222222")renderer.js：
js
console.log("111")
// alert(333)
// document.querySelector('body').innerHTML = 'bbb-------------'index.html：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>您好！</title>
</head>
<body>
<h1>您好！@@@</h1>
<h3>888999666</h3>
<!-- 可以加载其他的脚本文件 -->
<script src="./renderer.js"></script>
</body>
</html>最后运行项目：npm run dev 5. 使用热更新刷新应用
sh
# 安装 nodemon - 默认不监测 html
$npm i -D nodemon
# 修改添加启动脚本命令 即 修改 package.json 里的 "dev": "electron ."，改成如下
"dev": "nodemon --exec electron ."
# 所以需配置nodemon.json可以去官网查看配置项，创建nodemon.json，内容如下:
{
"ignore": [
"node_modules",
"dist"
],
"colors": true,
"verbose": true,
"restartable": "rs",
"watch": [
"*.*"
],
"ext": "html,js"
}- ddd