Electron快速开始(一):入门基础,用JavaScript、HTML和CSS构建跨平台桌面应用程序

2026-02-07 0 476

node -v
npm -v

在软件开发领域,开发者们普遍关注如何恰当地将Node.js嵌入二进制文件,并且精准地配置项目。这一过程中涉及到的复杂操作和可能遭遇的问题,成为了他们的一大难题。

mkdir my-electron-app && cd my-electron-app
npm init

初始化项目遵循规则

项目初始化阶段,init命令会引导我们进行一些关键值的设定。在此教程中,这些设定必须遵循特定的规则。我们必须清楚这些规则,比如在.json配置文件中,需按照规定来设置,因为这些设置直接关系到应用的功能和运行模式。在实际开发中,比如某个公司的项目,开发团队需要统一这些设置,确保所有成员在一致的规则下进行编码。若缺乏统一的初始化设置,后续的代码整合和项目运行很可能会遇到诸多问题。此外,这些设置还关联到后续的诸如main文件查找等操作。

Electron快速开始(一):入门基础,用JavaScript、HTML和CSS构建跨平台桌面应用程序

 npm install --save-dev electron

在接下来的阶段,我们需特别留意.json配置文件中的相关设置。比如,在字段中添加一条start命令,这或许是为了统一项目启动流程。然而,若配置不当,可能会使应用无法正常运行。曾经有一个开源的小项目,就因为start命令的路径设置有误,导致项目一直无法成功启动。

{
  \"scripts\": {
    \"start\": \"electron .\"
  }
}

main文件的创建与意义

npm start

main文件对于整个项目来说极其关键,它主导着主进程的运作。主进程是在一个完整的Node.js环境中运行的。在构建main文件时,我们需在项目根目录中创建一个名为main.js的空文件。这个文件需要经过适当的配置,因为它承担着管理应用生命周期的重任,就好比舵手指引着航行的方向。它负责呈现原生界面、执行特定操作,以及管理渲染器进程。在众多应用开发案例中,若main文件未能正确构建或配置,便可能导致界面显示错误或某些功能无法正常使用。

在执行过程中,会参照应用中.json配置文件下main字段所设定的值来寻找该文件。这就要求我们确保main字段中的数据与实际main文件的路径等设置保持一致。回顾之前在客户端开发的项目中,由于main字段与main文件设置存在偏差,导致频繁出现错误信息,提示无法找到核心执行文件。

Electron快速开始(一):入门基础,用JavaScript、HTML和CSS构建跨平台桌面应用程序

在文件中导入模块

因为主进程正在运行Node.js,我们便能在文件开头导入所需的模块,将其作为公共JS模块使用。这可是Node.js开发过程中的基础操作。在具体的开发过程中,模块导入是否准确,直接关系到整个程序功能的完整性。以开发图像编辑应用为例,必须导入图像处理和用户界面交互等模块,一旦导入出错,部分功能就可能无法正常运作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=\"UTF-8\">
    
    <meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'; script-src 'self'\">
    <meta http-equiv=\"X-Content-Security-Policy\" content=\"default-src 'self'; script-src 'self'\">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id=\"node-version\"></span>,
    Chromium <span id=\"chrome-version\"></span>,
    and Electron <span id=\"electron-version\"></span>.
  </body>
</html>

此外,我们需要妥善运用导入的模块,比如添加特定的功能。举例来说,加入一个()功能,就能将index.html加载至新创建的实例中。若操作不慎,index.html可能无法准确加载至预定界面,进而影响用户的使用体验。

不同进程的特点与限制

需留意各个进程的独特性质及其限制。例如,在特定情况下,只有当app模块的ready事件被触发,才能启动浏览器窗口,这是该平台特有的机制。另外,在Windows和Linux系统上,关闭所有窗口往往意味着应用程序的完全退出。因此,开发者必须对不同操作系统的运行原理有所掌握。过去,一些跨平台应用因未充分考虑这一点,在Linux上关闭窗口后出现了数据丢失的问题。

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

同时,主进程中是不允许直接修改DOM的。这是因为主进程无法触及渲染器的文档上下文。这一限制点,我们在编写代码时必须留意,确保不会将不同进程的功能操作搞混。

预加载脚本的使用

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

预加载脚本具备特殊功能,它会在渲染器进程加载之前启动,并且能够访问到两个渲染器全局以及Node.js环境。借助这个脚本,我们可以执行多种有价值的操作,比如之前所说的,访问Node.js对象,运行一些基础辅助函数,并将版本号嵌入到HTML文档中。

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

同时,必须确保预加载脚本准确接入渲染器流程。以开发电商平台为例,预加载脚本通常负责加载用户的权限认证信息。若未能正确接入,可能会引发用户权限设置错误等问题。在现有的构造器中,只需将预加载脚本的路径传入相应选项,即可完成接入操作。

交互脚本的添加与应用分发

Electron快速开始(一):入门基础,用JavaScript、HTML和CSS构建跨平台桌面应用程序

在处理网页内容交互时,需将脚本加入渲染器进程。由于渲染器在常规Web环境中运行,故能运用与前端开发相似的API和工具,比如通过捆绑和压缩代码来提升效率,或者使用React来掌控用户界面。这些做法能显著提升代码的性能和易于维护性。

使用Forge的make命令,可以构建出便于分发使用的应用程序。这标志着应用即将上线前的最后一道工序,就好比将精心包装的商品摆上货架,静待顾客选购。若此环节出现失误,先前所有开发努力可能都无法向用户完美展示。

在将Node.js融入二进制文件的过程中,你是否曾遭遇过一些特别棘手的进程操作难题?若有的话,不妨分享你的经历。同时,也欢迎点赞并转发这篇文章,让更多需要帮助的开发者受益。

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

申明:本文由第三方发布,内容仅代表作者观点,与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的,并不意味着赞同其观点或证实其描述,也不代表本网对其真实性负责。

左子网 开发教程 Electron快速开始(一):入门基础,用JavaScript、HTML和CSS构建跨平台桌面应用程序 https://www.zuozi.net/63053.html

常见问题
  • 1、自动:拍下后,点击(下载)链接即可下载;2、手动:拍下后,联系卖家发放即可或者联系官方找开发者发货。
查看详情
  • 1、源码默认交易周期:手动发货商品为1-3天,并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放,如遇纠纷无限期延长收款金额直至纠纷解决或者退款!;
查看详情
  • 1、描述:源码描述(含标题)与实际源码不一致的(例:货不对板); 2、演示:有演示站时,与实际源码小于95%一致的(但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外); 3、发货:不发货可无理由退款; 4、安装:免费提供安装服务的源码但卖家不履行的; 5、收费:价格虚标,额外收取其他费用的(但描述中有显著声明或双方交易前有商定的除外); 6、其他:如质量方面的硬性常规问题BUG等。 注:经核实符合上述任一,均支持退款,但卖家予以积极解决问题则除外。
查看详情
  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档,以确保交易的真实、有效、安全! 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保,请买家自行鉴别; 3、在源码同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外); 4、在没有”无任何正当退款依据”的前提下,商品写有”一旦售出,概不支持退款”等类似的声明,视为无效声明; 5、在未拍下前,双方在QQ上所商定的交易内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准); 6、因聊天记录可作为纠纷评判依据,故双方联系时,只与对方在左子上所留的QQ、手机号沟通,以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小,但一定要保留如聊天记录、手机短信等这样的重要信息,以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务