0

0

如何利用JavaScript构建跨平台的桌面应用,如Electron?

夢幻星辰

夢幻星辰

发布时间:2025-10-01 16:54:02

|

288人浏览过

|

来源于php中文网

原创

electron是github开发的跨平台桌面应用解决方案,结合chromium和node.js,支持html、css、javascript构建windows、macos、linux应用;核心分主进程(管理窗口与生命周期)和渲染进程(运行网页内容);创建步骤包括初始化项目、安装electron、编写main.js与index.html、配置启动脚本;通过electron-builder打包为各平台安装包;建议禁用冗余node集成、启用沙箱隔离、使用ipc安全通信以优化性能与安全。

如何利用javascript构建跨平台的桌面应用,如electron?

利用JavaScript构建跨平台桌面应用,Electron 是目前最成熟和广泛使用的解决方案。它让你使用前端技术(HTML、CSS 和 JavaScript)来开发可在 Windows、macOS 和 Linux 上运行的桌面程序。

Electron 是什么?

Electron 由 GitHub 开发,结合了 Chromium 渲染引擎和 Node.js 运行时,允许你在桌面环境中运行 Web 技术。每个 Electron 应用包含两个核心进程:

  • 主进程:负责创建窗口、管理应用生命周期和系统事件(如菜单、托盘图标)。
  • 渲染进程:每个窗口中的网页运行在独立的渲染进程中,可访问 DOM 和 Node.js API(需配置)。

快速搭建一个 Electron 应用

从零开始创建一个简单的 Electron 桌面应用只需几个步骤:

1. 初始化项目

在项目目录中运行:

立即学习Java免费学习笔记(深入)”;

npm init -y
2. 安装 Electron

安装 Electron 包:

npm install electron --save-dev
3. 创建主进程文件

新建 main.js,这是 Electron 的入口文件:

网商宝商城管理系统
网商宝商城管理系统

网商宝开源版商城系统是一款免费的通用电子商务平台构建软件,使用她您可以非常方便的开一个网上商店,在网上开展自己的生意。网商宝商城管理系统有如下特点:1、功能的 AJAX 化 完美结合ASP.NET的AJAX技术,大幅减少了网络数据传输量,加快了页面操作的响应速度,减少了服务器负担,且用户操作体验更加美好,安全性更高,易用性更强。2、基于规则的权限控制 权限管理模块提供强大的权限控制,支持多用户操作

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  })

  win.loadFile('index.html')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
4. 创建页面文件

创建 index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello from Electron!</h1>
  </body>
</html>
5. 添加启动脚本

修改 package.json 中的 scripts:

"scripts": {
  "start": "electron main.js"
}

运行 npm start 即可看到窗口启动。

打包与分发应用

开发完成后,需要将应用打包为可执行文件。推荐使用 electron-builderelectron-packager

以 electron-builder 为例:

  • 安装: npm install --save-dev electron-builder
  • 在 package.json 中添加构建配置:
"build": {
  "appId": "com.example.myapp",
  "productName": "MyApp",
  "win": { "target": "nsis" },
  "mac": { "target": "dmg" },
  "linux": { "target": "AppImage" }
}
  • 添加打包命令:"build": "electron-builder"
  • 运行 npm run build 生成对应平台的安装包

性能与安全建议

Electron 应用虽然强大,但也存在体积大和安全风险的问题。以下是几点实用建议:

  • 禁用不必要的 Node.js 集成,尤其在加载远程内容时。
  • 启用上下文隔离(contextIsolation)和沙箱(sandbox)提升安全性。
  • 使用 __dirname 正确引用本地资源,避免路径错误。
  • 考虑使用 Vite 或 Webpack 优化前端资源打包,加快启动速度。
  • 避免在渲染进程中直接调用主进程敏感操作,通过 ipcRenderer 和 ipcMain 安全通信。

基本上就这些。Electron 降低了桌面开发门槛,让前端开发者也能轻松打造跨平台应用。只要掌握主进程与渲染进程的协作机制,并注意性能与安全,就能构建出稳定高效的桌面工具。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

450

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

326

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

81

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

528

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

494

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

638

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5854

2023.08.17

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

CSS教程
CSS教程

共754课时 | 37.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号