for HarmonyOS 前言 在当今软件开发领域,“跨平台”早已不是一句口号,而是一种刚需。 今天,我们要认识两位“跨平台明星”——Electron 与 鸿蒙操作系统(HarmonyOS),并探讨它们各自如何利用 Web 技术实现多端适配,以及为何将二者结合值得深入探索。 它的“一次开发,多端部署”理念解析 如果说 Electron 解决了“桌面端跨平台”,那么华为推出的 鸿蒙操作系统(HarmonyOS) 则致力于解决 “全场景跨设备” 的难题。 更重要的是,这场探索不仅是技术适配,更是对“跨平台本质”的再思考:我们追求的不是“一套代码跑 everywhere”,而是“一套逻辑,多端最优呈现”。 小结 初步认识了 Electron 与鸿蒙 OS 的定位与能力。它们分别代表了 Web 技术在桌面端和全场景端的成功实践。
简介 Electron 是一款可以通过 Web前端技术 构建跨平台桌面应用的框架。 其原名为 Atom Shell, 是 Github 社区原本为 Atom 编辑器设计的一个跨平台应用外壳,它将 Chromium 和 Node.js 的事件循环整合在一起,并提供了一些与原生系统交互的 克隆官方的例子 $ git clone https://github.com/electron/electron-quick-start 2. 默认的 webview 没有 node 功能,而如果设置了 nodeintegration 属性,它将整合node,拥有可以使用系统底层的资源。 其他 当然 Electron 中还有许多实用的模块,如作为桌面应用必不可少的 Menu 和 Tray 模块、拥有调用当前操作系统功能的 Shell 模块、NW.js 中不具备的自动更新功能 - autoUpdater
下载镜像 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" : 向容器内部传递命令 实现命令自动化 命令映射目录 所以产物将在原项目
本次,我与大家聊一聊,跨平台桌面开发,究竟是应该选Electron还是WebView2? 这是上篇。 但本系列还是专注于Electron以及WebView2这两个跨平台实现的一些对比。 编程领域这个趋势更明显,因为普遍编程的工具有跨平台的需求。毕竟程序员可不是都只用WIN一个系统。 基于Electron的。 2.Motrix 基于aria2的一个跨平台下载工具,有了它,你可能并不需要迅雷这么个玩意了。是的,它也是基于Electron开发的。 但相比其它跨平台开发技术,比如QT或Rust什么,再相比不同操作系统的原生开发工程师来说,还是前端人员好招吧。 因此,从团队成本上考量,显然这个成本更低。
这一周继续聊跨平台桌面开发这个事情。 在这篇文章中,我暂时会放下Electron与WebView2的一个对比,而聊一聊跨平台这个对于程序员群体来说不陌生的词。 后端 在后端,Java是跨平台的,当你用Java来编写后端服务时,并不需要考虑操作系统,因为它几乎支持主流的操作系统。现在,编写一个后端服务,选用Java仍是主流。 这个问题在跨平台桌面开发中也是类似,跨平台桌面开发技术也不是Electron最开始出现,比如著名的QT很早就有了,但比起Electron这种使用前端编程技术来说,显然在编程语言的门槛上和程序员群体上都存在困难 四)Electron VS WebView2 其实,无论是Electron,或是WebView2,都是基于浏览器内核+前端技术的跨平台桌面解决方案,这也是为什么要把它们放在一起聊的原因。 Electron是先行者(当然,严格说来,NW.js出现的更早,但今天它的流行度已远远落后于Electron了),而WebView2则是后来者。 那做为后来者的WebView2究竟做了哪些改进?
好了,前面两篇铺垫了一些内容,这周终于进行这个话题的核心内容了,就是对于跨平台桌面来说,Electron与WebView2这两个非常类似的技术方案究竟哪个更合适? 这是这个话题的最终篇,前两篇为: 1.跨平台桌面开发,Electron还是WebView2 (上篇)2.跨平台桌面开发,Electron还是WebView2 (中篇) 接下来,我会分别从这两个技术的相似之处以及不同之处来详细对比说明 都是跨平台的(未来) 好吧,Electron是跨平台的,基本上,只要支持Chrome浏览器+NodeJS语言的系统,那Electron做出来的应用都能正常运行。 支持平台不同 好了,有点打脸了,前面才说都是跨平台的。 但就当下来说,支持平台并不一样。 Electron当下是实打实的跨平台方案,支持Windows,MacOS,Linux各种操作系统。 那对于跨平台桌面开发,如果你想找到一个性价比非常之高的解决方案,是Electron还是WebView2,心中应该有自己的答案了吧。
除了微软自家的Windows平台, .NET Core针对Mac OS以及各种Linux Distribution(RHEL、Ubuntu、Debian、Fedora、CentOS和SUSE等)都提供了很好的支持 顺便说一下,虽然老版本的Mac OS(比如10.12 Sierra)可以安装.NET Core 3.0 SDK,但是只有在10.13 High Sierra或者更高版本的Mac OS才能编译和运行.NET 对于Mac OS X的.NET Core应用的开发人员来说,他们在IDE上同样具有广泛的选择。 三、ASP.NET Core MVC应用 在《跨平台开发体验: Windows[下篇]》中,我们演示了如何将一个通过脚手架命令行创建的控制台应用一步步改造成ASP.NET Core MVC应用,既然.NET Core提供真正的跨平台支持,那么我们按照相同方式改造的ASP.NET Core MVC应用同样可以在Mac OS上运行。
本文基于技术推演与架构类比,探讨 若将 Electron 架构思想引入鸿蒙生态 所需的底层机制、可行性路径及潜在挑战,旨在为开发者提供跨平台融合的技术视角。 Electron 自 2013 年诞生以来,凭借 “HTML/CSS/JS + Chromium + Node.js” 的组合,成为桌面端跨平台开发的事实标准(VS Code、Slack、Discord 、网络等敏感 API(需通过 Bridge 代理) 2. http.request @ohos.net.http os.platform() @ohos.systemParameter child_process ❌ 不支持(沙箱限制) 通过 全局注入 Bridge 结语 “Electron for HarmonyOS” 并非简单地将 Electron 移植到鸿蒙,而是一次 跨平台运行时思想的本地化重构。
开发和维护一个桌面应用是比较复杂的,所以可以理解现在的公司门为何推动WEB应用或者各种跨平台版本,在过去的十几年里,已经有了很多尝试,Flash、Air、Java和Sliverlight,他们都各自取得了不同程度的成功 我们都知道现在出现了一些使用JavaScript和web技术来开发跨平台的桌面应用的方案。 Electron, GitHub提供的一种方案,我已经尝试的构建了几个应用。 . var mainWindow = null; 现在让我们处理当视窗关闭时应用程序退出,如果是OS X操作系统,当所有视窗关闭时 应用程序依旧处于打开状态,但是用户通常是为了退出应用程序,所以我们必须用如下方式处理这种场景 所运行的操作系统: win32 用于 Windows, linux, darwin 用于 vanilla Mac OS X , mas 用于 Mac App store 发布应用. Electron的版本。 生成二进制文件的路径。 所使用的应用程序图标。 主意: 参数可以为多个并使用逗号分开值,如果你想生成所有平台的二进制文件可以替换相关参数为 --all。 ?
前言 此前有给大家分享一个vite2+vant3开发h5手机端小视频实例。今分享一个最新开发的electron跨端聊天应用。 p4.gif 框架技术 vue3全家桶:vue3.0+vuex4+vue-router@4 electron框架:electron11.2.3 打包工具:vue-cli-plugin-electron-builde n.sohucs.gif electron自定义无边框导航菜单 为了让项目UI更加美观,大家可以选择在创建窗口的时候去掉系统边框,自定义拖拽区域。 配置frame: false,即可去掉系统顶部菜单。 360截图20210227164338294.png 后来经过反复调试,发现可以通过如下方法快速去掉系统右键菜单。
2025最新跨平台electron38+vue3+vite7+pinia3+arco-design客户端os系统Exe模板。 electron38-vite7-os使用vite7构建工具整合electron38跨平台框架构建项目,vue3 setup语法编码开发。 技术栈跨平台框架:electron^38.2.0前端框架:vite^7.1.7+vue^3.5.21+vue-router^4.5.1UI组件库:@arco-design/web-vue^2.57.0 bitsdojo_window客户端聊天Exe自研新版Flutter3.32仿微信app聊天|朋友圈模板基于uni-app+vue3实战短视频+聊天+直播app商城基于uniapp+deepseek+vue3跨平台 ai流式对话electron35+deepseek桌面端ai模板vue3.5+deepseek网页版ai流式对话flutter3.27+getx仿抖音app短视频商城Electron32桌面端os系统electron31
首先介绍下electron,它是一个开源框架,可以跨平台构建桌面应用,结合chromium和nodejs,这样前端开发人员也可以开发web应用了,对前端人员非常之友好。 2、安全性隐患大,因为electron嵌入Chromium和nodejs运行环境,如果存在漏洞的话,这又与苹果安全性要求不符。 尽管如此,electron目前发展迅猛,前景良好,不但能在macos上用也能在windows和linux上使用,主要有以下优势,值得继续学习: 1、开发简单跨平台应用。 2.python2.7,因为一部分功能在编译的时候比较依赖python2.7,而3的版本有不兼容。 3. 2.使用make命令创建可分发的应用 npm run make > my-electron-app@1.0.0 make /my-electron-app > electron-forge make ✔
我们可以先看下官方文档:https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC title: '文件名 2', time: '2020-06-21' }, { id: 3, title: '文件名 3', time: '2020-06-21' }, '文件名 6', time: '2020-06-21' }, { id: 1, title: '文件名 1', time: '2020-06-21' }, { id: 2, { 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
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来搭建项目,项目结构也更加清晰明了 App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E 2.2 在项目内集成Electron 进入我们项目的根目录,我们执行以下命令来安装插件vue-cli-plugin-electron-builder vue add vue-cli-plugin-electron-builder
1 Electron升级 2020年5月19号,Electron更新了最新的 9.0.0 版本,带来了诸多改进,具体的我就不在此赘述了,大家可以看一下官方介绍:github.com/electron/el … 好了,我们现在就把上节课初始化好的项目升级到Electron9.0.0,只要简单升级 1、命令行直接执行重新安装yarn add electron即可升级到最新版本Electron 2 项目介绍 估计大家看到这里都已经忍不住了 {js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 end_of_line = lf trim_trailing_whitespace = 4.1 整体布局 我们先删除项目中的多余页面与组件: vue-electron-notes/src/components/HelloWorld.vue vue-electron-notes/src/ 项目github地址:https://github.com/mengdebiao/vue-electron-notes
1、引言 在当今快速发展的技术环境中,对跨平台桌面应用程序的需求正在不断激增。 3、初识框架 1)Electron: * 技术背景:Electron 由 GitHub 开发,因其使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序的能力而广受欢迎 它提供了一套用于构建跨平台桌面应用程序的全面工具,并强调本机外观和感觉。 4、跨平台能力 在跨平台功能方面,Electron、Flutter、Tauri 和 Qt 足以在多个操作系统上运行应用程序。 以下是具体的场景举例: 1)Electron:广泛用于构建跨平台桌面应用程序,包括代码编辑器(VSCode)、通信工具(Slack)和娱乐应用程序(Spotify); 2)Flutter:Flutter Electron 拥有庞大的社区和广泛的预构建组件,而 React Native 提供强大的组件系统,并允许在移动和桌面平台之间重用代码。
根据报道,安全研究专家在今年一月份发现了一款针对计算机操作系统的跨平台木马后门。当时,安全研究人员仅在Linux和Windows这两大操作系统中发现了该后门的代码。 跨平台的恶意软件正在兴起 在此之前,攻击者只会将他们的注意力放在Windows操作系统上,他们更愿意花时间去开发针对Windows平台的恶意软件。 由于近些年Mac OS X和其他类型的桌面操作系统不断兴起,攻击者也毫无疑问地会跟上这个发展潮流,所以跨平台恶意软件的出现也并没有出乎我们的意料。 跨平台的恶意软件需要通过特殊的有效载荷(payload)和功能组件来进行加载,而这些特殊的payload和组件正是它们能够跨平台运行的基本条件。 针对Mac OS X的Mokes后门 在今年一月份,卡巴斯基实验室的安全研究人员Stefan Ortloff首次在Linux和Windows这两个操作系统中发现了这种跨平台的后门,并将该后门取名为“Mokes
随着技术的发展,跨平台桌面应用的需求日益增长,PyQT作为一个强大的Python绑定库,使得开发者能够使用Python语言快速构建跨平台的桌面应用程序。 跨平台的桌面应用开发需要考虑不同操作系统之间的差异,并保证应用程序在这些平台上运行一致。 一、Electron技术简介Electron是由GitHub开发的一款开源框架,它允许开发者使用Web技术(如HTML、CSS和JavaScript)来构建跨平台的桌面应用程序。 安装 Node.js在开始使用 Electron 之前,需要先安装 Node.js。可以在 Node.js 官方网站上下载安装包,选择适合自己操作系统的版本进行安装。2. 三、如何通过Electron构建跨平台桌面应用安装Node.js和Electron:首先,你需要在你的计算机上安装Node.js和Electron。
迎接中秋国庆,最新原创跨平台新作react19.3+electron41+arco-design搭建桌面端os管理系统解决方案。 electron-react-os桌面管理系统,支持macOS和windows两种桌面风格。 windows两种桌面风格支持json格式配置桌面菜单+Dock菜单自研可拖拽桌面栅格卡片布局支持自定义桌面背景皮肤、采用高斯模糊毛玻璃效果提供图表、表格、列表、表单、编辑器等常用页面模板项目结构目录使用最新跨平台 以上就是electron41+react19实战桌面端os系统的一些项目分享,感谢大家的阅读与支持~Electron-React19-WinChat聊天系统|react+electron客户端聊天程序ExeReact19 +Arco+Zustand仿macOS风格webOS桌面系统electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38
最近一直学习electron25集成vite4.x技术开发跨端应用。就搭建了一个electron-chatgpt聊天EXE程序。 图片electron-vite4 for chatgpt 基于最新前端技术栈vite4+vue3+pinia2+vue-router+electron25跨端技术开发桌面端仿chatgpt聊天应用程序。 图片图片使用技术编码工具:vscode框架技术:electron25+vite4+vue3+pinia2组件库:veplus (基于vue3自定义组件库)打包工具:electron-builder^23.6.0 ^3.1.0electron结合vite插件:vite-plugin-electron^0.11.2图片项目结构图使用最新版electron跨端技术配合vite4.x全家桶技术,采用vue3 setup ${ext}" }}到这里,基于electron25+vue3开发跨端仿制chatgpt实例就先分享到这里,希望对大家有所帮助。