【软件技术】跨平台软件开发利器——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系列丛书推荐************/



乐创客 我们从来不培养程序猿,我们只是嵌入式技术的搬运工
评论
  • 车前大灯总成是一个集成了多种灯光功能的复杂系统,由于功能需求不同,其内部的灯珠串联或并联的数量也会有所差异。通过采用BOOST CV+BUCK CC两级供电方式,大灯控制器能够更好地适应智能大灯系统的需求,确保在各种负载瞬态变化下,大灯都能获得稳定、合适的电力供应。在汽车上,电池提供的电压通常是12V或24V,但是车大灯可能需要一个更稳定、更适合它工作的电压。这时候,DC/DC Converter就派上用场了。它可以把电池提供的电压转换成车大灯需要的电压,确保车大灯能够稳定、明亮地发光。此时就需
    时源芯微 2024-12-04 17:46 35浏览
  • 在电子工程领域,高速PCB设计是一项极具挑战性和重要性的工作。随着集成电路的迅猛发展,电路系统的复杂度和运行速度不断提升,对PCB设计的要求也越来越高。在这样的背景下,我有幸阅读了田学军老师所著的《高速PCB设计经验规则应用实践》一书,深感受益匪浅。以下是我从本书中学习到的新知识和经验分享,重点涵盖特殊应用电路的PCB设计、高速PCB设计经验等方面。一、高速PCB设计的基础知识回顾与深化 在阅读本书之前,我对高速PCB设计的基础知识已有一定的了解,但通过阅读,我对这些知识的认识得到了进一步的深
    金玉其中 2024-12-05 10:01 177浏览
  • 本文介绍RK3566/RK3568开发板Android11系统,编译ROOT权限固件的方法。触觉智能Purple Pi OH鸿蒙开发板演示,搭载了瑞芯微RK3566四核处理器,Laval鸿蒙社区推荐开发板,已适配全新OpenHarmony5.0 Release系统,SDK源码全开放!关闭Selinux修改以下路径文件:adevice/rockchip/common/BoardConfig.mk修改代码如下:BOARD_BOOT_HEADER_VERSION ?= 2BOARD_MKBOOTIMG
    Industio_触觉智能 2024-12-05 10:27 30浏览
  • 延续前一篇「抢搭智慧家庭生态圈热潮(一) 充满陷阱的产品介绍」系列文章,购买智能家电时需留意是否标有Works With Alexa (WWA)标章,然而,即使有了WWA标章后,产品难道就不会发生问题了吗?本篇由百佳泰将重点探讨在Alexa智能家居设备应用的实验中所遭遇到的问题。智能家庭隐忧浮现:智能家电APP使用状态不同步在先前的文章中,我们有提过建构Alexa智能家庭的三个主要元素:Alexa Built-in Devices(ABI)、Alexa Connected Device,以及Al
    百佳泰测试实验室 2024-12-05 15:26 42浏览
  • 在阅读了《高速PCB设计经验规则应用实践》后,对于PCB设计的布局经验有了更为深入和系统的理解。该书不仅详细阐述了高速PCB设计中的经验法则,还通过实际案例和理论分析,让读者能够更好地掌握这些法则并将其应用于实际工作中。布局是走线的基础,预先的规划再到叠层的选择,电源和地的分配,信号网络的走线等等,对布局方面也是非常的关注。布局规划的重要性: 在PCB设计中,布局规划是至关重要的一步。它直接影响到后续布线的难易程度、信号完整性以及电磁兼容性等方面。因此,在进行元件布局之前,我们必须对PCB的平
    戈壁滩上绽放 2024-12-05 19:43 68浏览
  • 2024年12月3日至5日,中国电信2024数字科技生态大会在广州举行,通过主题峰会、多场分论坛、重要签约及合作发布等环节,与合作伙伴共绘数字科技发展新愿景。紫光展锐作为中国电信的战略合作伙伴受邀参会,全面呈现了技术、产品创新进展,以及双方在多领域的合作成果。紫光展锐董事长马道杰受邀出席大会主论坛,并在大会期间发表视频致辞。  深化战略合作,共建数字未来马道杰董事长在视频致辞中指出,紫光展锐作为世界一流芯片设计企业,依托在芯片、通信和软硬件集成领域的深厚积累,与中国电信密切合
    紫光展锐 2024-12-05 14:04 51浏览
  • 现在最热门的AI PC,泛指配备了人工智能AI的个人电脑,虽然目前的AI功能大多仅运用于增加个人电脑的运算力及用户使用体验。然而,各家AI PC厂商/品牌商却不约而同针对Webcam的AI功能大作文章,毕竟这是目前可以直接让消费者感受到、最显著、也是最有感觉的应用情境!目前各家推出Webcam 的AI功能包括有:● 背景虚化● 面部识别和追踪。● 自动调节● 虚拟化和滤镜● 安全和隐私面临的困境:惊吓大于惊喜的AI优化调校由于每款AI PC的相机都有自己的设定偏好及市场定位,一旦经过AI的优化调
    百佳泰测试实验室 2024-12-05 15:30 48浏览
  • 热电偶是zui常用的温度传感器类型。它们用于工业、汽车和消费应用。热电偶是自供电的,可以在很宽的温度范围内工作,并且具有快速的响应时间。热电偶是通过将两条不同的金属线连接在一起制成的。这会导致塞贝克效应。塞贝克效应是两种不同导体的温差在两种物质之间产生电压差的现象。正是这种电压差可以测量并用于计算温度。有几种类型的热电偶由各种不同的材料制成,允许不同的温度范围和不同的灵敏度。不同的类型由zhi定的字母区分。zui常用的是K型。热电偶的一些缺点包括测量温度可能具有挑战性,因为它们的输出电压小,需要
    锦正茂科技 2024-12-05 14:22 39浏览
  • 应用环境与客户需求蓝牙设备越来越普及,但在高密度使用环境下,你知道里面潜藏的风险吗?用户在使用蓝牙配件(如键盘、鼠标和耳机)时,经常面临干扰问题,这主要是因为蓝牙设备使用的2.4GHz频段与许多其他无线设备(如Wi-Fi、Thread等)重迭,导致频段拥挤,进而增加干扰的可能性。【常见干扰情境】客服中心:客服中心通常有大量的工作站,每个工作站可能都配备有蓝牙键盘、鼠标和耳机。由于这些设备都使用4GHz频段,客服中心内部的频段拥挤会增加讯号干扰的可能性。再加上中心内部可能有多个无线网络设备和其他电
    百佳泰测试实验室 2024-12-05 16:17 67浏览
  • DT640系列硅二极管温度传感器选用了专门适用于低温温度测量的硅二极管。相比普通硅二极管,具有重复性好、离散性小、精度更高温度范围更宽、低温下电压相对高而易于测量等特点。所有此款温度计都较好地遵循一个电压-温度(V-T)曲线,因而具有更好的可互换性。很多应用中都不需要单独的标定。DT640-BC型裸片温度计,相比市场上的其它温度计,具有尺寸更小、热容更小、响应时间更短的特点。在尺寸、热容以及响应时间有特殊要求的应用中具有du特的优势。   以下是二极管温度传感器的测
    锦正茂科技 2024-12-05 13:57 30浏览
  • ①辐射发射测试(RE):评估电子、电气产品或系统在工作状态下产生的电磁辐射干扰程度,确保其不会干扰其他电子设备,同时可以确保产品的电磁辐射水平在安全范围内,从而保护用户免受电磁辐射的危害。消费类常见测试标准:EN55032 (RE&CE)、 CLASS A和CLASS B ②传导发射测试(CE):评估电子、电气产品或系统在工作状态下传导电磁骚扰的水平,是确保产品符合电磁兼容性(EMC)要求的重要步骤,保护其他设备免受干扰。常见测试标准:国标18655(RE&CE) 分为5个等级,常规的是过3等级
    时源芯微 2024-12-05 15:16 51浏览
  • CS5466AUUSB-C  (2lanes)to HDMI2.1 8K@30HZ(4K@144) +PD3.1  CS5563DP  (4lanes) to HDMI2.1 10k@60Hz CS5565USB-C  (4lanes) to HDMI2.1 10k@60Hz CS5569USB-C (4lanes) to HDMI2.1 10k@60Hz +PD3.1CS5228ANDP++ to HDMI(4K
    QQ1540182856 2024-12-05 15:56 88浏览
  • ~同等额定功率产品尺寸小一号,并保证长期稳定供应~全球知名半导体制造商ROHM(总部位于日本京都市)在其通用贴片电阻器“MCR系列”产品阵容中又新增了助力应用产品实现小型化和更高性能的“MCRx系列”。新产品包括大功率型“MCRS系列”和低阻值大功率型“MCRL系列”两个系列。在电子设备日益多功能化和电动化的当今世界,电子元器件的小型化和性能提升已成为重要课题。尤其是在汽车市场,随着电动汽车(xEV)的普及,电子元器件的使用量迅速增加。另外,在工业设备市场,随着设备的功能越来越多,效率越来越高,
    电子资讯报 2024-12-05 17:03 68浏览
  • RK3506单板机(卡片电脑)是一款高性能三核Cortex-A7处理器,内部集成Cortex-M0核心,RK3506单板机具有接口丰富、实时性高、显示开发简单、低功耗及多系统支持等特点,非常适合于工业控制、工业通信、人机交互等应用场景。 多核异构3xCortex-A7+Cortex-M0 外设接口丰富,板载网络、串口、CAN总线 支持Buildroot、Yocto系统,支持AMP混合部署 支持2D硬件加速,适用于轻量级HMI目前RK3506主要分为3种型号
    万象奥科 2024-12-05 16:59 67浏览
我要评论
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦