使用Electron开发基于Node.js的桌面应用

简介: 跨平台桌面应用很难吗?遇到node.js ,一切都变得如此简单...
最近小编在查看分享资料时,发现一个可以开发跨平台桌面应用的框架——NW.js(原名:node-webkit)。正当小编兴致勃勃的研究NW.js的时候,最基础的安装环节出了问题。无论用npm还是cnpm都无法完整下载所依赖的包(具体原因待考察)。鉴于此,我只能转向研究另一个同类型的框架——Electron(原名:Atom Shell)。

首先,进入Electron的github官网,上边有详细的文档说明。为了快速搭建应用框架,我们可以选择Electron的 electron-quick-start项目。以下相关操作都在win7的64位操作系统中进行。

打开E盘,新建目录desktop-app-demo,打开gitbash,进入此目录,输入git命令下载electron-quick-start项目代码。

9ae72959f4b72a0d2a3e027795f1534c771580d6

进入目录electron-quick-start,输入命令npm install,安装相关依赖包。

f75e2cb04bb4d97257c306f6cc4c694b0ccabd67

输入命令npm start,运行项目。如果弹出Hello World的窗口,说明项目运行成功。如下图:

0dbf5d9ba8066b21f9c3c6c192868992bd73fe99

现在,我们要将项目代码打包成系统安装软件。这里我们采用一种比较简洁的方式进行打包——使用 electron-builder模块。

输入命令cnpm install electron-builder -g, 全局安装electron-builder模块。安装完成后,输入命令build --help,测试是否安装成功。如下图:
d847ee3c52a366584bca921c91a04d512a1660ae

如果出现帮助信息,即为安装成功。
需要在项目文件夹下新建资源文件夹(这里新建名字为res的目录),将程序发布所用的图标等资源统一放进资源文件夹进行管理。(打包windows exe需要ico文件像素为256*256)。如下图:

4412cc88246436538facf25e88eac6055d902344

编辑项目目录里的package.json,添加electron-builder编译所需要的属性,如下图:

50eaecd3352d9440fb145bcef63cd2614a81b37d


配置完成后在项目目录里执行命令build --win --x64。执行命令后即开始打包,无报错后即打包成功。如下图:

74266cac4ff11176d4a3128653bb704897580fc2

打包成功后,会在项目目录里自动生成dist目录,里边存有生成的桌面应用安装包。如下图:
15014f190e35fe32f91b4580e7d9f652b4c063cb
这个安装包可以随意复制、移动、重命名。我们可以把它复制到E盘下,重名为desktop-demo.exe。双击安装运行,如下图:

b11eeff32df2d64ff5a2bfb1f55130e75b2e07a3
安装成功后,会自动在桌面生成一个快捷方式,如下图:

2a4b0dc3510ecda4975bb7520f1c72f8c92f6e61
如果想卸载此应用,可以直接在软件管理软件中卸载,如下图:

03af35ab2298a0467bcdd11ed7a443d3e69193e5
这样,我们通过nodejs制作的基于windows桌面应用demo就完成了。如果想生成其他系统的安装包,只要按照electron-builder的官方文档说明打包即可。
代码地址:


欢迎关注个人公众号,查看更多好文。1.gif

3c9443f5671a70732ca1e6ee8cdd027439c92725

相关文章
|
12天前
|
JavaScript 前端开发 IDE
【TypeScript技术专栏】TypeScript与Node.js后端开发
【4月更文挑战第30天】TypeScript在Node.js后端开发中日益重要,作为JavaScript超集,它提供静态类型检查和面向对象编程,增强代码可靠性和维护性。集成TypeScript能带来类型安全、更好的IDE体验、易于维护的代码以及增强工具支持。通过安装TypeScript编译器、编写TypeScript文件、配置TSconfig,开发者可以在Node.js项目中利用其高级特性,提高代码质量和开发效率。实践案例显示,TypeScript能确保路由处理器的类型正确,降低错误率。随着社区发展,TypeScript成为提升Node.js开发体验的推荐选择。
|
16天前
|
JavaScript 前端开发 关系型数据库
node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染
node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染
26 1
|
16天前
|
JavaScript 前端开发 API
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
36 1
|
18天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8引擎的JavaScript运行时,用于服务器端编程。以其事件驱动、非阻塞I/O模型著称,适用于高并发和实时应用。常见用途包括:构建Web服务器、实时应用(如聊天)、API服务、微服务、工具和命令行应用,以及搭配Electron开发桌面软件。
20 1
|
1月前
|
Linux Windows
教你在Linux上安装Node并用Electron打包deb和rpm包
教你在Linux上安装Node并用Electron打包deb和rpm包
43 9
|
2月前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
20 4
|
2月前
|
Web App开发 JavaScript 前端开发
深入浅出:Node.js 在后端开发中的应用与实践
【2月更文挑战第13天】本文旨在探讨Node.js这一流行的后端技术如何在现代Web开发中被应用以及它背后的核心优势。通过深入分析Node.js的非阻塞I/O模型、事件驱动机制和单线程特性,我们将揭示其在处理高并发场景下的高效性能。同时,结合实际开发案例,本文将展示如何利用Node.js构建高性能、可扩展的后端服务,以及在实际项目中遇到的挑战和解决方案。此外,我们还将讨论Node.js生态系统中的重要工具和库,如Express.js、Koa.js等,它们如何帮助开发者快速搭建和部署应用。通过本文的探讨,读者将获得对Node.js在后端开发中应用的深入理解,以及如何有效利用这一技术来提升开发效率
122 2
|
JavaScript 前端开发 中间件
Node.js Web 开发框架大全《中间件篇》
  这篇文章与大家分享优秀的 Node.js 中间件模块。Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。
1149 0
|
Web App开发 前端开发 JavaScript
Node.js Web 开发框架大全《静态文件服务器篇》
  这篇文章与大家分享优秀的 Node.js 静态服务器模块。Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。
986 0
|
20天前
|
JSON JavaScript 前端开发
❤Nodejs 第九章(token身份认证和express-jwt的安装认识)
【4月更文挑战第9天】Node.js第九章介绍了Token身份认证,特别是JWT(JSON Web Token)作为跨域认证的解决方案。JWT由Header、Payload和Signature三部分组成,用于在客户端和服务器间安全传输用户信息。前端收到JWT后存储在localStorage或sessionStorage中,并在请求头中发送。Express-JWT是一个中间件,用于解析JWT。基本用法包括设置secret和algorithms。注意安全问题,避免混合使用不同算法以防止降级攻击。
39 0