简介 Electron 是一款可以通过 Web前端技术 构建跨平台桌面应用的框架。 其原名为 Atom Shell, 是 Github 社区原本为 Atom 编辑器设计的一个跨平台应用外壳,它将 Chromium 和 Node.js 的事件循环整合在一起,并提供了一些与原生系统交互的 = require('electron'); const ipcMain = electron.ipcMain; const app = electron.app exports.init = function 打包构建 Electron 打包的方式有很多种,常见的有 electron-builder、electron-packager 和 asar几种,在这里我使用的是 electron-packager 作为应用的打包工具 参考资料: Electron 官方文档 http://electron.atom.io/ 从 node-webkit 到 Electron 1.0 http://cheng.guru/blog/2016
下载镜像 docker pull q1194979849/alpinebuilder:v0.0.1 执行命令 docker run --rm -ti -v D:\path/for/project:/project -w /project q1194979849/alpinebuilder:tagname "/bin/sh" "-c" "cmd&&cmd" tagname: 版本号 "/bin/sh" "-c" "cmd&&cmd" : 向容器内部传递命令 实现命令自动化 命令映射目录 所以产物将在原项目
开发和维护一个桌面应用是比较复杂的,所以可以理解现在的公司门为何推动WEB应用或者各种跨平台版本,在过去的十几年里,已经有了很多尝试,Flash、Air、Java和Sliverlight,他们都各自取得了不同程度的成功 我们都知道现在出现了一些使用JavaScript和web技术来开发跨平台的桌面应用的方案。 Electron, GitHub提供的一种方案,我已经尝试的构建了几个应用。 安装 Electron Electron有 quick start project 和 pre-built releases 可用, 我们也可以使用 npm来安装 `npm install electron-prebuilt 'use strict'; const electron = require('electron'); const app = electron.app; // Module to control Electron的版本。 生成二进制文件的路径。 所使用的应用程序图标。 主意: 参数可以为多个并使用逗号分开值,如果你想生成所有平台的二进制文件可以替换相关参数为 --all。 ?
本文基于技术推演与架构类比,探讨 若将 Electron 架构思想引入鸿蒙生态 所需的底层机制、可行性路径及潜在挑战,旨在为开发者提供跨平台融合的技术视角。 一、背景:为何需要“Electron for HarmonyOS”? Electron 自 2013 年诞生以来,凭借 “HTML/CSS/JS + Chromium + Node.js” 的组合,成为桌面端跨平台开发的事实标准(VS Code、Slack、Discord 三、“Electron for HarmonyOS”的底层实现路径 若要实现类似 Electron 的体验,需在鸿蒙上构建三层架构: 1. 结语 “Electron for HarmonyOS” 并非简单地将 Electron 移植到鸿蒙,而是一次 跨平台运行时思想的本地化重构。
今分享一个最新开发的electron跨端聊天应用。 pp3.gif 基本实现了发送图文消息、图片/视频/链接预览、拖拽发送图片、截图及朋友圈等功能。 p4.gif 框架技术 vue3全家桶:vue3.0+vuex4+vue-router@4 electron框架:electron11.2.3 打包工具:vue-cli-plugin-electron-builde n.sohucs.gif electron自定义无边框导航菜单 为了让项目UI更加美观,大家可以选择在创建窗口的时候去掉系统边框,自定义拖拽区域。 electron-builder打包配置 创建vue3项目的时候,根目录会有一个vue.config.js配置文件。可用来进行一些项目配置和electron打包配置。 image.png ending,基于vue3.x+electron开发聊天软件就分享到这里。希望对大家有些帮助! .mp.itc.gif
首先介绍下electron,它是一个开源框架,可以跨平台构建桌面应用,结合chromium和nodejs,这样前端开发人员也可以开发web应用了,对前端人员非常之友好。 尽管如此,electron目前发展迅猛,前景良好,不但能在macos上用也能在windows和linux上使用,主要有以下优势,值得继续学习: 1、开发简单跨平台应用。 "start": "electron ." 示例main.js: // main.js const electron = require('electron'); const app = electron.app; const BrowserWindow 2.使用make命令创建可分发的应用 npm run make > my-electron-app@1.0.0 make /my-electron-app > electron-forge make ✔
1 为什么要写这个系列教程 相信看到这篇文章的人,都是对Electron感兴趣的, 网上关于Electron的教程其实已经不少了,但是大多都是一些功能点的实现,对于从零开始搭建一个适合自己的项目,估计还是有不少人有点懵逼的 2 项目搭建 网上有个比较火的脚手架electron-vue,github 上 12.2k 的 star,大家应该都听说过或者使用过,但现在我们不使用它,electron-vue是vue-cli2.0的版本 ,现在都已经出道 4.0 了,再者electron-vue已经很久没有更新,我们可以使用 vue 最新的脚手架加上插件vue-cli-plugin-electron-builder来搭建项目,项目结构也更加清晰明了 2.2 在项目内集成Electron 进入我们项目的根目录,我们执行以下命令来安装插件vue-cli-plugin-electron-builder vue add vue-cli-plugin-electron-builder Choose Electron Version (Use arrow keys) ^4.0.0 ^5.0.0 ❯ ^6.0.0 这里静静等待安装即可,它会下载electron的依赖文件 60M
1 Electron升级 2020年5月19号,Electron更新了最新的 9.0.0 版本,带来了诸多改进,具体的我就不在此赘述了,大家可以看一下官方介绍:github.com/electron/el … 好了,我们现在就把上节课初始化好的项目升级到Electron9.0.0,只要简单升级 1、命令行直接执行重新安装yarn add electron即可升级到最新版本Electron 2 项目介绍 估计大家看到这里都已经忍不住了 4.1 整体布局 我们先删除项目中的多余页面与组件: vue-electron-notes/src/components/HelloWorld.vue vue-electron-notes/src/ MacBook-Pro:vue-electron-notes Bill$ yarn add @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons 项目github地址:https://github.com/mengdebiao/vue-electron-notes
{ id: 6, title: '文件名 6', time: '2020-06-21' } ], fileItem: { title: '手摸手Electron main-container { flex: 1; overflow: hidden; } } </style> 项目github地址:https://github.com/mengdebiao/vue-electron-notes
for HarmonyOS 前言 在当今软件开发领域,“跨平台”早已不是一句口号,而是一种刚需。 今天,我们要认识两位“跨平台明星”——Electron 与 鸿蒙操作系统(HarmonyOS),并探讨它们各自如何利用 Web 技术实现多端适配,以及为何将二者结合值得深入探索。 它的“一次开发,多端部署”理念解析 如果说 Electron 解决了“桌面端跨平台”,那么华为推出的 鸿蒙操作系统(HarmonyOS) 则致力于解决 “全场景跨设备” 的难题。 鸿蒙正在逐步构建一个既兼容 Web 生态、又具备原生性能的新型应用平台。 更重要的是,这场探索不仅是技术适配,更是对“跨平台本质”的再思考:我们追求的不是“一套代码跑 everywhere”,而是“一套逻辑,多端最优呈现”。
1、引言 在当今快速发展的技术环境中,对跨平台桌面应用程序的需求正在不断激增。 3、初识框架 1)Electron: * 技术背景:Electron 由 GitHub 开发,因其使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序的能力而广受欢迎 它提供了一套用于构建跨平台桌面应用程序的全面工具,并强调本机外观和感觉。 4、跨平台能力 在跨平台功能方面,Electron、Flutter、Tauri 和 Qt 足以在多个操作系统上运行应用程序。 然而,它的跨平台支持可能不像其他框架那样无缝,并且可能需要额外的努力才能在所有平台上实现一致的性能和 UI。 5、性能表现 性能是桌面应用程序开发的关键因素。 以下是具体的场景举例: 1)Electron:广泛用于构建跨平台桌面应用程序,包括代码编辑器(VSCode)、通信工具(Slack)和娱乐应用程序(Spotify); 2)Flutter:Flutter
我在2020年曾经基于Electron开发过一个跨平台桌面应用,在一定的条件下,Electron是非常好的选择。 本次,我与大家聊一聊,跨平台桌面开发,究竟是应该选Electron还是WebView2? 这是上篇。 但本系列还是专注于Electron以及WebView2这两个跨平台实现的一些对比。 编程领域这个趋势更明显,因为普遍编程的工具有跨平台的需求。毕竟程序员可不是都只用WIN一个系统。 基于Electron的。 2.Motrix 基于aria2的一个跨平台下载工具,有了它,你可能并不需要迅雷这么个玩意了。是的,它也是基于Electron开发的。
这一周继续聊跨平台桌面开发这个事情。 在这篇文章中,我暂时会放下Electron与WebView2的一个对比,而聊一聊跨平台这个对于程序员群体来说不陌生的词。 所以,在桌面开发领域,跨平台的需求也越来越高。 这也是Electron及早期的NW.js能迅速发展起来并得到非常广应用的原因所在。 Native则是使用虚拟DOM以及转换成原生控件的方式来实现跨平台,而Electron则是通过性能较好的Chrome内核+NodeJS原生调用能力的搭配来实现跨平台桌面开发。 这个问题在跨平台桌面开发中也是类似,跨平台桌面开发技术也不是Electron最开始出现,比如著名的QT很早就有了,但比起Electron这种使用前端编程技术来说,显然在编程语言的门槛上和程序员群体上都存在困难 四)Electron VS WebView2 其实,无论是Electron,或是WebView2,都是基于浏览器内核+前端技术的跨平台桌面解决方案,这也是为什么要把它们放在一起聊的原因。
好了,前面两篇铺垫了一些内容,这周终于进行这个话题的核心内容了,就是对于跨平台桌面来说,Electron与WebView2这两个非常类似的技术方案究竟哪个更合适? 这是这个话题的最终篇,前两篇为: 1.跨平台桌面开发,Electron还是WebView2 (上篇)2.跨平台桌面开发,Electron还是WebView2 (中篇) 接下来,我会分别从这两个技术的相似之处以及不同之处来详细对比说明 都是跨平台的(未来) 好吧,Electron是跨平台的,基本上,只要支持Chrome浏览器+NodeJS语言的系统,那Electron做出来的应用都能正常运行。 支持平台不同 好了,有点打脸了,前面才说都是跨平台的。 但就当下来说,支持平台并不一样。 Electron当下是实打实的跨平台方案,支持Windows,MacOS,Linux各种操作系统。 引擎的跨平台桌面开发还在也在持续完善中•kotlin multiplatform除了支持移动跨平台以外,对桌面跨平台的支持也是未来的方向。
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback 这个错误信息表明,您的 Electron 内容安全策略是一种浏览器安全机制,用于防止各种类型的攻击(如跨站脚本攻击和数据注入攻击)。 要解决这个问题,您需要修改 Electron 应用的 CSP 配置,以允许从 http://127.0.0.1:8000 加载资源。 您可以按照以下步骤进行操作: 在主进程中设置 CSP: 在 Electron 的主进程(通常是 main.js 或 index.js 文件)中,使用 webContents 对象的 setContentSecurityPolicy 可以在创建 BrowserWindow 对象时,配置新的 CSP: const { app, BrowserWindow } = require('electron'); function
随着技术的发展,跨平台桌面应用的需求日益增长,PyQT作为一个强大的Python绑定库,使得开发者能够使用Python语言快速构建跨平台的桌面应用程序。 跨平台的桌面应用开发需要考虑不同操作系统之间的差异,并保证应用程序在这些平台上运行一致。 为了实现这一需求,可以将整个过程拆解为以下几个部分:选择适合的 GUI 库、创建基本的窗口界面、实现界面布局和交互逻辑、处理跨平台差异性、最终打包发布应用。 一、Electron技术简介Electron是由GitHub开发的一款开源框架,它允许开发者使用Web技术(如HTML、CSS和JavaScript)来构建跨平台的桌面应用程序。 三、如何通过Electron构建跨平台桌面应用安装Node.js和Electron:首先,你需要在你的计算机上安装Node.js和Electron。
electron/electron[1] Stars: 109.3k License: MIT Electron 是一个基于 Node.js 和 Chromium 的开源框架,允许使用 JavaScript 、HTML 和 CSS 编写跨平台的桌面应用程序。 该项目具有以下核心优势: 跨平台:Electron 提供了 macOS、Windows 和 Linux 三个主要操作系统的二进制文件。 简化开发流程:通过 Electron Fiddle 工具可以轻松构建、运行和打包小型实验性质的 Electron 代码,并尝试不同版本的 Electron。 丰富文档资源:官网提供所有关于 Electron 的文档。
想要选择一个合适的技术来开发一个跨平台桌面的App, 你就需要知道Electron与Tauri各自的优缺点. Electron本质是利用Chrome V8内核, 因为Chrome V8内核a支持三大主流操作系统, 自然基于它的也就能轻松做到跨平台了. Tauri, 后起之秀 跨平台的需求始终存在. 再有钱的公司或团队, 都会偏向选择跨平台的技术方案. 而不是每个操作系统各种写一套. 除非对性能有较高的需求的应用以外, 选择跨平台的技术方案是最佳的. 但是Electron的缺点前面也说了, 比较明显, 最为关键的就是性能. 那自然会出现又跨平台, 又能提高性能的技术方案了. 这意味着如果使用Tauri, 有时候找不到好的框架 最后 不介意性能和软件体积, 对跨平台桌面开发来说, 仍然是Electron更具性价比. 但如果你想找一个更轻, 更小, 体积更小的跨平台方案.
Electron 与开源鸿蒙(OpenHarmony):跨平台桌面应用开发的新可能 摘要:Electron 是目前最流行的跨平台桌面应用开发框架之一,而开源鸿蒙(OpenHarmony)作为中国主导的分布式操作系统生态 尽管两者出发点不同——Electron 聚焦于“用 Web 技术写桌面软件”,OpenHarmony 则致力于“构建统一的分布式操作系统”——但它们在跨平台能力、开发者生态和应用分发模型上存在潜在交集。 这种能力远超传统桌面操作系统,也为未来“跨端 Electron 应用”提供了想象空间。 WASM 插件系统:替代 native npm 模块,实现跨平台高性能计算。 统一构建工具:类似 electron-builder,但输出 HAP + Web Bundle。 短期内,直接移植不可行;但中长期看,OpenHarmony 有望吸收 Electron 的开发者友好理念,同时规避其资源浪费与安全缺陷,打造出更适合中国乃至全球市场的下一代跨端应用平台。
作为一款基于Web技术来构建的跨平台应用方案,Tauri有如下特点: Tauri 提供了一种易于使用的方式来构建跨平台的桌面应用程序,可以使用常见的 Web 技术来构建应用程序,这点和election打个平手 Tauri 的跨平台支持可能不如 Flutter 和 Electron 那么广泛。 Rust 语言上手难度还是比较大的,如果使用Tauri额外的增加了Rust语言的学习成本。 三、Electron Electron 是一款基于 Chromium 和 Node.js 的桌面应用程序开发框架,可以使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用程序。 Electron有如下的一些特点: Electron 提供了易于使用的方式来构建跨平台的桌面应用程序,可以使用常见的 Web 技术来构建应用程序。 Electron 的文档和社区支持非常丰富,可以快速解决问题。 Electron 的跨平台支持非常广泛,可以在 Windows、macOS 和 Linux 上运行,很遗憾也没有移动端。