1分钟学会使用Electron 编写一个登录界面

原创已于 2024-01-21 22:18:05 修改 · 2.8k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#electron

于 2024-01-21 22:16:13 首次发布

Electron 专栏收录该内容

2 篇文章

订阅专栏

本文指导如何使用Electron框架创建一个简单的登录应用，包括项目初始化、安装依赖、编写主进程代码、创建静态资源和登录页面。通过一步步操作，读者将学会如何运行Electron程序。

阅读前必读

在开始之前，请确保已在您的电脑上安装了 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。

一、前期准备

首先，我们可以创建一个项目目录，命名为 "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>