1.前言
本节主要讲述Electron的环境搭建以及如何快速创建一个应用
2.环境搭建
(1)安装node.js
(2)创建项目目录，初始化配置文件
//进入项目目录 并在此目录打开cmd窗口 执行以下代码
npm init
//按照后续的提示 填写项目名称，作者等信息
(3)定义npm脚本命令和入口js文件
- 在scripts节点中配置start属性,将来可使用 npm start/npm run start 命令启动项目
- 在main节点中程序的入口js文件
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "demo",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "MIT",
"devDependencies": {
"electron": "^13.1.7"
}
}
3.HTML文件编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘; script-src ‘self‘">
<meta http-equiv="X-Content-Security-Policy" content="default-src ‘self‘; script-src ‘self‘">
<title>Hello World!</title>
<!-- 引入页面js -->
<script src="./renderer.js"></script>
</head>
<body>
<h1 id="title">Hello World!</h1>
<!-- 以下的元素都定义id 方便js操作dom -->
<h3>
preload run time = <span id="preload-time"></span>
</h3>
<h3>
prenderer.js run time = <span id="renderer-time"></span>
</h3>
<h3>
We are using Node.js <span id="node-version"></span>
</h3>
<h3>
Chromium <span id="chrome-version"></span>
</h3>
<h3>
and Electron <span id="electron-version"></span>
</h3>
</body>
</html>
4.入口文件编写
//main.js
//引入 app和BrowserWindow 模块
const { app, BrowserWindow } = require(‘electron‘)
//引入 path 模块
const path = require(‘path‘)
//程序入口
app.whenReady().then(() => {
//程序就绪后 调用方法
createWindow()
})
//事件监听 关闭所有窗口时退出应用 (Windows & Linux)
app.on(‘window-all-closed‘, function () {
if (process.platform !== ‘darwin‘) app.quit()
})
//封装创建窗口的函数
function createWindow () {
//创建新窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, ‘preload.js‘), //引入预加载的js
}
})
//事件监听 如果没有窗口打开则打开一个窗口 (macOS)
app.on(‘activate‘, function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
//加载页面
win.loadFile(‘index.html‘)
}
5.预加载js文件和renderer文件编写
- renderer.js
window.onload = function(){
//输出运行时间
document.getElementById(‘renderer-time‘).innerHTML = new Date().toLocaleString()
}
- preload.js
// All of the Node.js APIs are available in the preload process.
// 所有Node.js API都可以在预加载过程中使用
// It has the same sandbox as a Chrome extension.
//事件监听
window.addEventListener(‘DOMContentLoaded‘, () => {
//创建修改dom的方法
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
//在页面输出preload的运行时间
document.getElementById(‘preload-time‘).innerHTML = new Date().toLocaleString()
//循环调用方法 修改页面
for (const dependency of [‘chrome‘, ‘node‘, ‘electron‘]) {
//在页面中输出各模块的版本号
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
6.启动项目
在项目目录中打开cmd命令，执行以下命令
npm start
执行结果：