【软件技术】跨平台软件开发利器——electron

乐创客 2021-01-14 00:00

文/Edawrd 



几何时,Windows操作系统最鼎盛的时候,几乎是垄断了绝大多数人手中的个人计算机操作系统,除了一小部分人使用Linux和MAC OS之外,绝大多数基本都是使用Windows。在那时候,有谁在主流人群中抱着一台Linux操作系统的计算机,绝对会被人看作“极客”或者“另类”;而那个年代的苹果MAC里面,装的几乎都是Windows操作系统。



   操作系统多样化引发的问题

早期的计算机软件根本就不需要考虑系统兼容性的问题,甚至连那个年代的腾讯QQ都是全力做Windows版本的QQ,MAC OS版本的QQ基本是敷衍了事,Linux版本的QQ只支持最基本的聊天功能。归根到底,用户群体决定了这些大型的软件公司的开发方向。

对于那一小部分的Linux玩家来说,当时的Linux远远没有现在那么“有用”,甚至Linux操作系统下的基本工作软件都无法确保。既然大公司放弃了这块市场,那么开源软件开发者们就自己动手丰衣足食,他们开发了一些平台去逆向支持Windows下的软件,其中最著名的当属WINE(Wine Is Not an Emulator)了。当然,WINE的问世,也是在当时条件下的无奈之举,这样强硬地去兼容,必定会引起很多软件兼容性的问题。


图1 WINE


再后来,随着Linux系统和MAC OS的使用者越来越多,这些操作系统的普及并不仅仅是PC端的普及,还有一大部分嵌入式设备的普及,因此软件的跨操作系统平台就显得尤为重要了。与此同时,这个时间段还有一个标志性的技术改革,即web技术的发展,促使越来越多传统的C/S结构(客户端-服务器)软件,都在转向B/S(浏览器-客户端)结构。

那么问题来了,既然web端从服务器处请求过来的网页都是通过HTML+CSS+Javascript技术来实现的,并且这些软件都可以在不同平台的浏览器上面正常运行,那么HTML+CSS+Javascript技术就是一种现成的跨平台技术,而我们只需要为不同平台开发不同的HTML+CSS+Javascript容器就可以了。本文要讲述的Electron就是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。


图2 electron


   安装Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生桌面应用程序的框架,Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

搭建electron框架的步骤很简单:

第一步:在使用 Electron 之前,您需要安装 Node.js,Node.js可以去官网上面下载,链接:https://nodejs.org/zh-cn/,下载好了之后,以默认选项安装。安装好之后,我们可以在命令行或者Linux的终端里面使用“node -v”或者“npm -v”来检查node.js是否正常安装完成。


第二步:安装Electron,Electron的安装方式有两种,这里我们推荐全局安装,在命令行或者Linux的终端里面使用“npm install electron -g”命令来安装electron,这会持续一段时间,速度的快慢完全取决于你的网络。


第三步:安装好Electron之后,我们就可以创建Electron的项目工程了。使用VsCode打开我们的项目文件夹,接着打开终端,输入“npm i --save-dev electron”以初始化Electron项目。

具体的Electron安装步骤,有兴趣的朋友可以具体参考官网:https://www.electronjs.org/docs/tutorial/quick-start


   使用Electron创建一个简单的APP

上述步骤安装好electron之后,我们就可以开发项目了,运行完“npm i --save-dev electron”命令之后,我们会发现项目文件夹里面多了一个electron相关的文件夹,如图3所示。


图3 初始化electron项目


接着,我们需要在工程中新建一个“package.json”文件,用来配置项目。“package.json”的内容如图4所示。


图4 “package.json”内容


{    "name""my-electron-app",    "version""0.1.0",    "author""your name",    "description""My Electron app",    "main""main.js",    "scripts": {        "start""electron ."    }}


写完“package.json”的内容之后,我们还需要写一个入口的主脚本文件,这个脚本文件即是“package.json”里面的“main.js”。“main.js”的内容如图5所示。


图5 main.js内容


const { app, BrowserWindow } = require('electron')function createWindow ({ const win = new BrowserWindow({ width: 800,    height: 600,    webPreferences: {      nodeIntegration: true    }  })  win.loadFile('index.html')}app.whenReady().then(createWindow)app.on('window-all-closed'() => {  if (process.platform !== 'darwin') {    app.quit()  }})app.on('activate'() => {  if (BrowserWindow.getAllWindows().length === 0) {    createWindow()  }})


上面发生了什么?

第 1 行:为了管理应用程序的生命周期事件以及创建和控制浏览器窗口,您从 electron 包导入了 app 和 BrowserWindow 模块 。

第 3 行:在此之后,你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true,将 index.html 文件加载到窗口中。

第 15 行:你通过调用 createWindow方法,在 electron app 第一次被初始化时创建了一个新的窗口。

第 17 行:您添加了一个新的侦听器,当应用程序不再有任何打开窗口时试图退出。由于操作系统的 窗口管理行为 ,此监听器在 macOS 上是禁止操作的。

第 23 行:您添加一个新的侦听器,只有当应用程序激活后没有可见窗口时,才能创建新的浏览器窗口。例如,在首次启动应用程序后或重启运行中的应用程序。


一般在Electron,main.js里面的内容被称为“主进程”,这个进程类似于网站中的后台,它一般是不参与界面显示的,但是我们可以利用Node.js的事件驱动特性做一些后台的处理。


如果我们需要让这个程序界面正常运行,还需要建立一个用以显示的界面,这个界面可以使用纯web技术来实现,也可以使用Node.js来实现,我们在工程里面创建一个文件叫做“index.html”,并且写入一些HTML代码,如图6所示。


图6 index.html的内容


到目前为止Electron项目已经建立好,我们可以使用“npm start”命令来启动Electron项目,如图7所示。


图7 启动Electron


现在的这个工程里面,“index.html”里面的内容负责前端界面的显示,这里的“index.html”就是Electron里面的渲染进程。我们可以为这个单调的界面做几个控件,顺便再用Javascript来实现一些按键的响应,如图8所示。


图8 渲染进程效果


图9 渲染进程代码



   

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Electron test</title> <style type="text/css">  h1{color:red; text-align: center;}  p{color:rgb(4, 0, 255)}  .but{color: tomato; text-align: center;} .but:hover{color: teal;}</style>  </head> <body> <h1>Electron测试软件</h1> <div> <p>请输入姓名:</p> <input id="nameInput" type="text" size="10" maxlength="30" value=""> <button class="but" onclick="showHelloworld()">你好,世界</button> </div> <script> function showHelloworld(){ var name = document.getElementById("nameInput").value; alert("你好," + name); }</script> </body></html>

       


   写在最后

Electron确实是一个不错的跨平台框架,也是当前技术架构下最好的跨平台框架之一。用它结合一些前端的框架,如VUE,REACT等,可以做出非常惊艳的交互界面。如果那你不想使用QT或者.net core,那么Electron不妨一试。


图10 用Electron开发的软件


/************Electron系列丛书推荐************/



乐创客 我们从来不培养程序猿,我们只是嵌入式技术的搬运工
评论
  • 在Python中,线程的启动和管理是一个复杂而关键的过程。通过上述代码截图,我们可以深入了解Python中线程启动和处理的具体实现。以下是对图1中内容的详细解析: 4.3.3、启动线程 当调用`rt_thread_startup`函数时,该函数负责将指定线程的状态更改为就绪状态,并将其放入相应优先级的队列中等待调度。这一步骤确保了线程能够被操作系统识别并准备执行。如果新启动的线程的优先级高于当前正在运行的线程,系统将立即切换到这个高优先级线程,以保证重要任务的及时执行。 //```c /*
    丙丁先生 2024-12-06 12:30 111浏览
  • 学习如何在 MYIR 的 ZU3EG FPGA 开发板上部署 Tiny YOLO v4,对比 FPGA、GPU、CPU 的性能,助力 AIoT 边缘计算应用。(文末有彩蛋)一、 为什么选择 FPGA:应对 7nm 制程与 AI 限制在全球半导体制程限制和高端 GPU 受限的大环境下,FPGA 成为了中国企业发展的重要路径之一。它可支持灵活的 AIoT 应用,其灵活性与可编程性使其可以在国内成熟的 28nm 工艺甚至更低节点的制程下实现高效的硬件加速。米尔的 ZU3EG 开发板凭借其可重
    米尔电子嵌入式 2024-12-06 15:53 169浏览
  • 随着各行各业对可靠、高效电子元件的需求不断增长,国产光耦合器正成为全球半导体市场的重要参与者。这些元件利用先进的制造工艺和研究驱动的创新,弥补了高性能和可负担性之间的差距。本文探讨了国产光耦合器日益突出的地位,重点介绍了其应用和技术进步。 关键技术进步国产光耦合器制造商在提高性能和多功能性方面取得了重大进展。高速光耦合器现在能够处理快速数据传输,使其成为电信和工业自动化中不可或缺的一部分。专为电力电子设计的栅极驱动器光耦合器可确保电动汽车和可再生能源逆变器等高压系统的精确控制。采用碳化
    克里雅半导体科技 2024-12-06 16:34 158浏览
  • 光耦合器以其提供电气隔离的能力而闻名,广泛应用于从电源到通信系统的各种应用。尽管光耦合器非常普遍,但人们对其特性和用途存在一些常见的误解。本文将揭穿一些最常见的误解,以帮助工程师和爱好者做出更明智的决策。 误解1:光耦合器的使用寿命较短事实:虽然光耦合器内部的LED会随着时间的推移而退化,但LED材料和制造工艺的进步已显著提高了其使用寿命。现代光耦合器的设计使用寿命为正常工作条件下的数十年。适当的热管理和在推荐的电流水平内工作可以进一步延长其使用寿命。误解2:光耦合器对于现代应用来说太
    腾恩科技-彭工 2024-12-06 16:29 185浏览
  • 2024年12月09日 环洋市场咨询机构出版了一份详细的、综合性的调研分析报告【全球电机控制系统芯片 (SoC)行业总体规模、主要厂商及IPO上市调研报告,2024-2030】。本报告研究全球电机控制系统芯片 (SoC)总体规模,包括产量、产值、消费量、主要生产地区、主要生产商及市场份额,同时分析电机控制系统芯片 (SoC)市场主要驱动因素、阻碍因素、市场机遇、挑战、新产品发布等。报告从电机控制系统芯片 (SoC)产品类型细分、应用细分、企业、地区等角度,进行定量和定性分析,包括产量、产值、均价
    GIRtina 2024-12-09 11:32 95浏览
  • 光耦合器对于确保不同电路部分之间的电气隔离和信号传输至关重要。通过防止高压干扰敏感元件,它们可以提高安全性和可靠性。本指南将指导您使用光耦合器创建一个简单的电路,介绍其操作的基本原理和实际实施。光耦合器的工作原理光耦合器包含一个LED和一个光电晶体管。当LED接收到信号时,它会发光,激活光电晶体管,在保持隔离的同时传输信号。这使其成为保护低功耗控制电路免受高压波动影响的理想选择。组件和电路设置对于这个项目,我们将使用晶体管输出光耦合器(例如KLV2002)。收集以下组件:光耦合器、1kΩ电阻(输
    克里雅半导体科技 2024-12-06 16:34 231浏览
  • 开发板在默认情况下,OpenHarmony系统开机后 30 秒会自动息屏,自动息屏会让不少用户感到麻烦,触觉智能教大家两招轻松取消自动息屏。使用触觉智能Purple Pi OH鸿蒙开发板演示,搭载了瑞芯微RK3566四核处理器,Laval鸿蒙社区推荐开发板,已适配全新OpenHarmony5.0 Release系统,SDK源码全开放!SDK源码中修改修改以下文件参数:base/powermgr/power_manager/services/native/profile/power_mode_co
    Industio_触觉智能 2024-12-09 11:39 73浏览
  • 自20世纪60年代问世以来,光耦合器彻底改变了电子系统实现电气隔离和信号传输的方式。通过使用光作为传输信号的媒介,光耦合器消除了直接电气连接的需求,确保了安全性和可靠性。本文记录了光耦合器技术的发展,重点介绍了关键创新、挑战以及这一不可或缺组件的未来发展。 过去:起源和早期应用光耦合器的发明源于处理高压或嘈杂环境的系统对安全电气隔离的需求。早期的光耦合器由LED和光电晶体管的简单组合组成,可提供可靠的隔离,但具有明显的局限性:低速:早期的光耦合器速度慢,频率响应有限,不适合高速数字通信
    腾恩科技-彭工 2024-12-06 16:28 144浏览
  • “SPI转CAN-FD”是嵌入式开发领域的常用方法,它极大地促进了不同通信接口之间的无缝连接,并显著降低了系统设计的复杂性。飞凌嵌入式依托瑞芯微RK3562J处理器打造的OK3562J-C开发板因为内置了SPI转CAN-FD驱动,从而原生支持这一功能。该开发板特别设计了一组SPI引脚【P8】,专为SPI转CAN-FD应用而引出,为用户提供了极大的便利。MCP2518FD是一款在各行业中都有着广泛应用的CAN-FD控制器芯片,本文就将为大家介绍如何在飞凌嵌入式RK3562J开发板上适配MCP251
    飞凌嵌入式 2024-12-07 14:30 90浏览
  • 习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习笔记&记录学习习笔记&记学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记
    youyeye 2024-12-09 08:53 80浏览
  • 在驾驶培训与考试的严谨流程中,EST580驾培驾考系统扮演着至关重要的数据角色。它不仅集成了转速监控、车速管理、转向角度测量、转向灯光控制以及手刹与安全带状态检测等多项功能,还通过高精度的OBD数据采集器实时捕捉车辆运行状态,确保学员在模拟及实际驾驶中的每一步操作都精准无误。EST580驾培驾考转速车速转向角转向灯光手刹安全带OBD数据采集器系统的重要性及其功能:1、提高评判效率:通过原车CAN协议兼容,不同车型通过刷写固件覆盖,不仅提高了考试的数字化、自动化程度,还减少了人为干预的安装需要,从
    lauguo2013 2024-12-09 16:51 50浏览
  •   在外地五年,回家就是大清洁、大清理,忙活了一个多月,废旧物品实在太多太多!除了老旧或出故障了的家具家电外,就是以前职业生涯养成的研究分析习惯而收留和拆解下的电子电器电脑整机、部件、零件、材料、辅料等等。  家具家电不说了,说说保留的各种各样机械、电器、电气、电子类的吧!有好有坏,扔又舍不得,满满的回忆,历史的烙印。留又没有用,拆解做分析和学习是忙不过来的了,加之,到如今个人做拆解的学习目的已经淡化了,也是因为用不着了。以前是研究学习和促进废物利用,理想也梦想能唤起循环使用产业链,结论是根本不
    自做自受 2024-12-08 22:59 156浏览
  • 进入11月中下旬,智能手机圈再度热闹起来。包括华为、小米、OPPO、vivo等诸多手机厂商,都在陆续预热发布新机,其中就包括华为Mate 70、小米Redmi K80、vivo的S20,IQOO Neo10等热门新机,这些热门新机的集中上市迅速吸引了全行业的目光。而在诸多手机厂商集体发布新机的背后,是智能手机行业的“触底反弹”。据机构数据显示,2024年第三季度,中国智能手机市场出货量约为6878万台,同比增长3.2%,连续四个季度保持同比增长,显然新一轮手机换机潮已在加速到来。憋了三年,国内智
    刘旷 2024-12-09 10:43 76浏览
我要评论
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦