Electron开发跨平台桌面应用

最新推荐文章于 2024-07-17 13:30:18 发布

hunter_97

最新推荐文章于 2024-07-17 13:30:18 发布

阅读量575

点赞数

分类专栏： web前端文章标签： javascript electronjs

本文链接：https://blog.csdn.net/hunter_97/article/details/116699600

版权

本文介绍了如何利用Electron框架开发跨平台桌面应用。通过安装Node.js和Electron，创建项目，克隆官方模板，放置静态文件，修改main.js，然后使用electron-packager打包成exe文件。在打包过程中，可以自定义应用图标、设置输出目录，并调整打包参数。最终，通过运行打包后的应用，展示了一个简单的桌面应用效果。

摘要由CSDN通过智能技术生成

虽然 B/S 是目前开发的主流，但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上 Web 开发的低成本、高效率的优势，这种跨平台方式越来越受到开发者的喜爱。
Electron 是一个基于 Chromium 和 Node.js，使用 HTML、CSS 和 JavaScript 来构建跨平台应用的跨平台开发框架，兼容 Mac、Windows 和 Linux。目前，Electron 已经创建了包括 VScode 和 Atom 在内的大量应用。

一、准备工作

创建Electron跨平台应用之前，需要先安装一些常用的工具，如Node和Electron等。

安装node在前说过就不详细说了。
安装Electron。

npm install -g electron
// 或者
cnpm install -g electron
// 验证是否安装成功
electron -v

二、创建项目

创建运行项目
Electron官方提高了一个简单的项目，可以执行以下命令将项目克隆到本地。

git clone https://github.com/electron/electron-quick-start

安装依赖

cd electron-quick-start
npm install

运行

npm start

效果图

三、更改内容

在我们的项目可以顺利启动以后，我们需要对项目做一些更改，来运行我们需要的内容。

放入静态文件
在项目根目录新建static文件夹，将静态文件放入。
更改main.js

/*
 * @Description: 主入口文件
 * @Author: cuiht
 * @Date: 2021-01-13 15:58:29
 * @LastEditTime: 2021-01-14 15:04:16
 */
// Modules to control application life and create native browser window
const {
  app,
  globalShortcut,
  screen,
  dialog,
  BrowserWindow,
  Menu,
} = require("electr