目录
阅读前必读
在开始之前,请确保已在您的电脑上安装了 Node.js 和 npm,并且它们的版本分别为:
- node v16.14.2
- npm 8.5.0
请按照以下步骤进行安装和确认版本:
- 打开终端或命令行界面。
- 输入以下命令以检查 Node.js 版本。
node -v
3. 输入以下命令以检查 npm 版本:
npm -v
如果您的没有Nodejs和npm,请前往 Node.js 官方网站(https://nodejs.org)下载并安装相应版本的 Node.js。
一、前期准备
1.1 创建项目目录
首先,我们可以创建一个项目目录,命名为 "electron-login",这个目录将用于存放我们的项目文件。
1.2 初始化项目
我们在终端输入 "npm init -y" 命令对项目进行初始化。
npm init -y
成功初始化项目后,我们的项目目录中将会多出一个重要的文件“package.json”。
1.3 安装项目包
1.3.1 安装Electron
使用以下命令可以快速下载并安装 Electron:
npm install electron
1.4 修改package.json配置
将文件中的main的值修改为main.js, 在scripts中添加 "start": "electron ." 用来启动项目。
二、编写代码
2.1 创建主进程代码
创建main.js文件,作为 Electron 应用程序的主进程代码。
具体代码如下:
const { app, BrowserWindow } = require('electron');
function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 加载登录页面
win.loadFile('login.html');
}
// 当 Electron 完成初始化并准备创建浏览器窗口时,调用 createWindow 函数
app.whenReady().then(createWindow);
// 在 macOS 上,当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在 macOS 上,点击 dock 图标并且没有其他窗口打开时,重新创建一个窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
2.2 创建静态资源目录
在根目录下创建assets目录,在assets目录下创建images, 我们需要再images里面放一个logo.jpeg格式的图片。具体结构是这样的:
2.3 创建登录页面
在根目录下创建名为 “login.html”的文件,在里面编写一下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>香菜的开发日记</title>
<style>
body {
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.container .logo {
width: 80px;
height: 80px;
border-radius: 50%;
margin-top: 80px;
}
.container h2 {
text-align: center;
font-weight: 200;
}
.container h2 > span {
text-align: center;
font-weight: 400;
}
.login-container {
width: 280px;
padding: 20px;
background-color: #f4f7f9;
border: 1px solid #d2d9df;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.login-container label {
color: #1d1f24;
font-size: 15px;
}
.login-container input {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border: 1px solid #d2d9df;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
}
.login-container button {
width: 100%;
padding: 8px;
background-color: #007d39;
border: none;
color: white;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<a href="https://blog.csdn.net/bjjgff?type=blog"
target="_blank"
><img src="assets/images/logo.jpeg" class="logo"
/></a>
<h2>登录<span>香菜的开发日记</span></h2>
<div class="login-container">
<label>用户名或邮箱地址</label>
<input type="text" id="username" name="username" />
<label>密码</label>
<input type="password" id="password" name="password" />
<button onclick="login()">登录</button>
</div>
</div>
</body>
</html>
三、运行程序
在命令行中输入“ npm start” 来运行项目
npm start
运行成功效果如下图: