讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在JavaScript中构建跨平台桌面应用_Electron框架核心概念与打包【教程】

胖浩小哥_6604

胖浩小哥_6604

发布时间:2026-01-16 22:02:02

|

565人浏览过

|

来源于php中文网

原创

Electron跨平台需手动保障:避开Node.js/Chromium差异、正确处理路径权限、分平台构建;主进程用Node API,渲染进程禁用nodeIntegration,默认需preload脚本桥接IPC通信。

如何在javascript中构建跨平台桌面应用_electron框架核心概念与打包【教程】

Electron 本身不提供“跨平台桌面应用”的自动保障,能否真正跨平台,取决于你是否避开 Node.js 和 Chromium 的行为差异、是否正确处理路径与权限、是否在打包时覆盖所有目标平台的构建配置。

Electron 主进程和渲染进程必须严格分离

主进程运行在 Node.js 环境中,可调用 fs、child_process、app、BrowserWindow 等 API;渲染进程默认禁用 Node.js 集成(出于安全),若需使用 require 或 process,必须显式启用 nodeIntegration: true 并配合 contextIsolation: false —— 但这是高危组合,现代项目应改用 preload 脚本桥接。

常见错误现象:

  • 在渲染进程直接写 require('fs') 报错 require is not defined
  • 启用了 nodeIntegration 却没关 contextIsolation,导致 require 可用但 process 为空对象
  • preload 脚本里漏写 contextBridge.exposeInMainWorld,导致渲染进程无法访问注入的方法

实操建议:

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

  • 主进程只负责窗口生命周期、菜单、协议注册、IPC 监听
  • 所有文件操作、系统调用、敏感逻辑封装进主进程,通过 ipcRenderer.invoke / ipcMain.handle 通信
  • preload 脚本中用 contextBridge.exposeInMainWorld('api', { readFile: () => ipcRenderer.invoke('read-file') }) 暴露受限接口

打包时必须为每个目标平台单独构建

electron-builder 或 electron-packager 不会自动交叉编译:在 macOS 上执行 build --win --linux 无法生成可用的 Windows/Linux 二进制,因为 Electron 的二进制依赖宿主机的工具链和签名机制。

使用场景:

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • CI/CD 中需用三台机器(macOS、Windows Server、Ubuntu)分别构建对应平台安装包
  • 本地开发时,仅能构建当前操作系统的目标包(如 macOS 可打 .dmg 和 .zip,但不能生成 .exe)

参数差异与坑点:

  • electron-builder 的 target 配置中,nsis(Windows)、dmg(macOS)、deb(Linux)行为完全不同,比如 nsis.allowToChangeInstallationDirectory 默认为 false,用户无法自选安装路径
  • macOS 上未配置 identity(Apple Developer ID)会导致打包后应用无法启动(报错 Library not loaded: @rpath/Electron Framework.framework/Electron Framework)
  • Linux 打包若未设置 category 和 desktop 字段,生成的 .deb 安装后可能不显示在应用菜单

路径处理必须用 path.join + app.getPath,禁用字符串拼接

硬编码 './data/config.json' 或 'C:\Users\xxx\AppData\Roaming' 在跨平台时必然失败。不同系统路径分隔符、用户数据目录位置、可执行文件位置均不同。

正确做法:

  • 用户数据存放在 app.getPath('userData') 下,该路径在各平台自动映射到标准位置(macOS: ~/Library/Application Support/YourApp,Windows: %APPDATA%\YourApp,Linux: ~/.config/yourapp)
  • 拼接路径一律用 path.join(app.getPath('userData'), 'config.json'),不要用 + 或模板字符串
  • 读取资源文件(如图片、HTML)优先用 file:// 协议 + app.getAppPath(),避免 __dirname 在打包后失效(ASAR 归档中 __dirname 指向 asar 内部路径)

性能影响:多次调用 app.getPath 无开销,它是同步缓存结果的;但误用 fs.readFileSync 读取 ASAR 外部路径会抛出 ENOENT,而不会静默失败。

Node.js 原生模块需重新编译,且仅限匹配目标 Electron 版本

Electron 使用定制版 Chromium 和特定版本的 Node.js(例如 Electron 28 对应 Node.js 20.9.x)。直接 npm install sqlite3 安装的是适配系统 Node 的二进制,加载时会报错:Error: The module '/path/binding.node' was compiled against a different Node.js version。

实操步骤必须包含:

  • 安装 electron-rebuild
  • 执行 npx electron-rebuild -f -w sqlite3 -v 28.0.0 -p -t node(其中 -v 必须与你的 Electron 版本一致,-t node 表示重建为 Node 模块而非 Electron 插件)
  • 若模块含 C++ 代码,还需确保对应平台装有 Python 3.10+、C++ 构建工具(Windows SDK / Xcode Command Line Tools / build-essential)

容易被忽略的一点:即使你只在主进程使用原生模块,也必须对它重建——渲染进程虽不加载,但打包工具(如 electron-builder)会扫描 node_modules 并尝试打包所有依赖,未重建的模块会在目标平台启动时报 MODULE_NOT_FOUND。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

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

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

2135

2023.08.07

json是什么
json是什么

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

3242

2023.08.23

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

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

1096

2023.10.13

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

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

3699

2025.09.10

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1955

2023.11.27

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

969

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2920

2023.10.25

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

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

1738

2023.08.03

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn