返回

过年前不想写业务的前端干点啥（二）：用 Electron 实现桌面小助手##

前端

在上一篇文章中，我们使用 HTML、CSS 和 JavaScript 制作了一个简单的桌面小助手，虽然实现了基本功能，但外观和交互体验还有很大的提升空间。因此，我们决定使用 Electron 框架来重新打造这个小助手，让它更加美观、好用。

Electron 是一个基于 Chromium 和 Node.js 的跨平台桌面应用开发框架，可以轻松构建原生外观的桌面应用。它支持 Windows、macOS 和 Linux 系统，并且可以访问底层操作系统功能，如文件系统、通知和菜单栏。

所需工具：

  • Node.js
  • Electron
  • 代码编辑器（如 VSCode、Sublime Text）

步骤：

  1. 安装 Electron

    npm install electron --save-dev

  2. 创建一个 Electron 项目

    electron-quick-start

  3. 编写主进程代码

    在 main.js 文件中，编写主进程代码，负责创建和管理应用窗口。

    const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.activate()
})

  4. 编写渲染进程代码

    在 index.html 文件中，编写渲染进程代码，负责显示用户界面和实现交互逻辑。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />

</head>
<body>
  <h1>桌面小助手</h1>
  <button id="btn-greet">打个招呼</button>
  <script>
    const btnGreet = document.getElementById('btn-greet')
    btnGreet.addEventListener('click', () => {
      alert('你好，世界！')
    })
  </script>
</body>
</html>

  5. 打包应用

    electron-packager . --platform=win32 --arch=x64 --icon=icon.ico --out=dist

完成上述步骤后，你就可以得到一个可以运行的桌面小助手应用了。你可以根据自己的需求定制功能，添加更多交互，打造一个个性化的小助手。

示例项目：

我们已经将这个小助手项目开源在了 GitHub 上，欢迎大家下载体验和学习：

GitHub 链接

结语：

通过使用 Electron，我们成功制作了一个更加美观、好用的桌面小助手。希望这个教程能给大家带来启发，让你们也能在春节假期发挥创意，制作出自己独一无二的小助手。预祝大家春节快乐，阖家幸福！