使用 JavaScript 构建跨平台的桌面应用: Electron, NW.js 和 Atom Shell

于 2023-12-28 01:54:12 发布
阅读量844 收藏 19
点赞数 16
分类专栏： AI大模型应用入门实战与进阶 文章标签： 大数据 人工智能 语言模型 AI LLM Java Python 架构设计 Agent RPA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/universsky2015/article/details/135259056
版权

1.背景介绍

在当今的快速发展的科技世界中，跨平台开发已经成为开发者的必须技能之一。随着移动应用的普及和云计算的兴起，我们不再局限于单一操作系统，而是希望能够在多种平台上运行同一个应用。这就引出了一个问题：如何使用 JavaScript 构建跨平台的桌面应用？在这篇文章中，我们将探讨三种流行的工具：Electron、NW.js 和 Atom Shell，它们分别是如何帮助我们实现这一目标的。

2.核心概念与联系

2.1 Electron

Electron 是一个基于 Chromium 和 Node.js 的开源框架，允许开发者使用 HTML、CSS 和 JavaScript 来构建桌面应用。Electron 的核心概念是将 Web 技术与本地应用程序的 API 结合起来，从而实现跨平台的桌面应用开发。Electron 的主要特点如下：

  • 基于 Chromium 的渲染引擎，提供了高性能的 Web 渲染能力。
  • 基于 Node.js 的运行时环境，提供了丰富的 JavaScript 库和 API。
  • 支持多进程架构，提高了应用程序的性能和稳定性。
  • 提供了丰富的本地应用程序 API，如文件系统、系统通知、系统菜单等。

2.2 NW.js

NW.js 是一个开源框架，它将 Chromium 和 Node.js 整合在一起，让开发者可以使用 HTML、CSS 和 JavaScript 来构建桌面应用。与 Electron 相比，NW.js 有以下特点：

  • 使用 Node.js 的原生模块，提供了更高效的 I/O 操作。
  • 支持本地文件系统访问，可
了解本专栏 订阅专栏 解锁全文 超级会员免费看
禅与计算机程序设计艺术
关注
  • 16
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
研讨会：使用Electron构建跨平台的桌面应用程序-Node.js开发
05-27
使用Electron构建跨平台的桌面应用程序这是一个研讨会，旨在学习如何使用JavaScript，HTML和CSS构建跨平台的桌面应用程序。 我们将使用Electron完成此任务。 动机以帮助使用Electron构建跨平台的桌面应用程序这是一...
NW.js和Electron优缺点综合对比
LIangell的博客
12-21 5768
NW.js和Electron优缺点综合对比两个框架对于开发者来说差别并不是特别大，最主要的差别无过于 Electron 区分主进程和渲染进程： 两个框架对于开发者来说差别并不是特别大，最主要的差别无过于 Electron 区分主进程和渲染进程： Electron 主进程负责创建、管理渲染进程以及控制整个应用的生命周期，渲染进程负责显示界面及控制与用户的交互逻辑。在 Electron 中，主进程和渲染进程间通信需要经由 ipcMain 和 ipcRenderer 传递消息来实现。 NW.js 则无须关注这些问
NW和Electron的区别
大白兔奶糖的博客
06-02 1835
NW.js和Electron的区别
Electron、NW.js、Tauri 三个跨端框架比较
鹿哲君的博客
06-02 2496
Electron、NW.js、Tauri 是三个常用的桌面应用程序开发框架，它们在设计和功能上有所不同
前端开发_5.Electron和Nw.js学习总结
joyyi9的博客
07-03 689
Electrion的总结
用 JS 开发跨平台桌面应用，从原理到实践
油墨香^-^的博客
08-07 2085
至于具体提升有多大？文件的更新，而不需要重新下载更新客户端，这样我们每次启动程序的时候检测到离线包有更新，即可直接刷新读取最新版本的静态资源文件，即使在程序运行过程中要强制更新，我们的程序只需要强制刷新页面读取最新的静态资源即可，这样的升级对用户是非常友好的。有时你并不需要这样的存储，只需要在当前应用程序的生命周期内进行一些数据的共享。一般情况下，我们的大部分业务逻辑代码是在渲染进程完成的，在大部分情况下我们仅仅需要对渲染进程进行更新和升级而不需要改动主进程代码，我们渲染进程的打包实际上和一般的。
omi-electron：:rocket:使用Omi.js和Electron.js构建跨平台桌面应用程序，并基于Omi.js和Electron.js构建跨平台的桌面应用
02-04
使用Omi.js和Electron.js构建跨平台的桌面应用程序基于Omi.js和Electron.js集成跨平台的桌面应用 由制作的:red_heart:︎ 使用 最新版本下载： | 最新版本下载： | 最新的稳定下载： | 最新的稳定下载： | 将下载的...
跨平台Redis管理工具Kedis：基于Node.js与Vue+Electron的源码
最新发布
03-25
项目概述：Kedis是一款基于Node.js、Vue和Electron构建的跨平台Redis管理工具。该工具拥有201个文件，其中包括Vue组件、TypeScript脚本、CSS样式表、JavaScript逻辑以及HTML页面。具体文件类型分布为：SCSS样式文件...
用JavaScript、HTML和CSS构建跨平台桌面应用程序
01-27
The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on and and is used by the Atom editor and many other . Follow on Twitter for ...
iv:用于nw.js和Electron的简单图像查看器
05-01
该应用程序可以使用nw.js或Electron来运行，因为它具有非常薄的兼容性，可以编写跨工具包代码。 这里的主要目标是学习如何使用Web技术开发本机应用程序。 nw.js / Electron比较是副产品。 计划和实施的功能 全屏...
NW.js 和 Electron 优缺点分析对比
热门推荐
small_tu的专栏
01-23 3万+
文章转自：http://www.codebye.com/nodejs-nw-js-vs-electron.html 拷贝下来，便于资料统一管理 从开发角度来说，选择用 nw.js 还是 election ，区别其实不是很大。大部分工作还是在自己的 javascript 和 HTML 上。 国内比较有名的，比如微信web开发工具、钉钉都是基于 nw.js 开发的 electron 相对来说比 ...
2023 最新 Node.Js 语言实现 Electron.js 桌面应用开发详细教程（进阶篇）
唤醒手腕的博客
08-29 3948
为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。为了使 Electron 的功能不仅仅限于对网页内容的封装，主进程也添加了自定义的 API 来与用户的作业系统进行交互。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。Electron 应用程序的结构非常相似。
Electron 初体验，用 js 搭建桌面应用程序
terrybg
10-30 1万+
Electron 简介 Electron 可以构建跨平台桌面程序(Mac、Windows、Linux)，是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 相当于你会js、html 你就可以开发一个桌面程序，又给前端工程师扩展另外一条选择。 开源例子 vs code 微软家的编译器、也是大批开发者用的 编译器也是用它开发的。 github 的 Atom 编译器 音乐播放器 不止编译器，到用
1分钟让你的JS代码变成一个桌面应用端程序。
LiyaohuiSG的博客
01-13 2154
1分钟让你的JS代码变成一个桌面应用端程序。 妈妈再也不用担心我不会写桌面应用端程序啦~
Electron理论知识 14 - Electron和NW.js的对比分析
liuzhen007的专栏
06-15 4461
类似的技术方案 快速开发并部署客户端的现有技术方案中，NW.js可以说和Electron是最相似的了，它们都允许使用Html、Javascript、Node.js技术完成客户端的开发工作。 总体来说作为intel的技术方案，NW.js也有不俗的表现，它起步早，最开始的时候有很大的市场占有量。只是目前已经被后起之秀Electron超越了。类似的技术技术方案，Electron为什么能够后发制人呢？一定有对应的原因。结合官网的信息，我们来分析一下二者的区别和优劣。 不同的表现 1. 应用程序入口 NW.
Electron 快速开始（一）-入门基础、使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
西京刀客
11-18 3271
文章目录使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序-electron 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序-electron
使用electron和nwjs开发跨平台应用
lazyboy's blog
11-24 7499
web前端语言的发展有目共睹, 从原来的pc web, 到后来的mobile SAP, 再到 nodejs,全站工程师应运而生. js快速而且稳健的发展让人不得不重视, 相应的前端开发人员的地位也越来越高, 越来越多的人愿意投入到前端的阵营里去. 而桌面app向来是web前端开发开发人员下意识的避开方向. 但是依然不乏有憧憬的人.于是借助于webkit内核和nodejs,出现了web移动app解决方
用Node开发桌面应用：NW.js和Electron
weixin_33904756的博客
04-02 1239
NW.js和Electron对比：【http://tangiblejs.com/posts/nw-js-electron-compared】 NW.js：【https://nwjs.io/】 Electron：【https://electronjs.org/】 转载于:https://www.cnblogs.com/softwarefang/p/8692808.html...
Eletron与NW.js在技术上的差异
xiaoxiezZ的博客
12-11 570
与 NW.js 相似，Electron 提供了一个能通过 JavaScript 和 HTML 创建桌面应用的平台，同时集成 Node 来授予网页访问底层系统的权限。 但是这两个项目也有本质上的区别，使得 Electron 和 NW.js 成为两个相互独立的产品。 1. 程序的入口 在NW.js中，应用的主入口是网页或者JS脚本。 你需要在package.json中指定一个html或者js文件，一旦应用的主窗口(在html作为主入口点的情况下)或脚本被执行，应用就会在浏览器窗口打开。 在 Electron 中
java开发桌面应用_Electron7+VueCli4开发跨平台桌面应用
05-26
Electron是一个基于Chromium和Node.js的框架，可以帮助开发者使用Web技术（HTML，CSS，JavaScript）来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具，可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下： 1. 安装Node.js和npm 在安装Electron和VueCli之前，需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理Electron和VueCli。 2. 安装Electron 在安装Electron之前，需要先创建一个空目录作为项目根目录，然后在命令行中切换到该目录下，执行以下命令： ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件，并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件，这是Electron应用的主进程文件。在main.js中添加以下代码： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口，并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件，并添加以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli： ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用： ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录，并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件，并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用： ``` npm run build ``` 以上命令会生成一个名为dist的子目录，并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用： ``` npm start ``` 以上命令会启动Electron应用，并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用，你可以使用Web技术来构建跨平台桌面应用程序，为用户提供更好的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

禅与计算机程序设计艺术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值