【软件技术】应用软件开发利器——electron

乐创客 2021-01-12 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系列丛书推荐************/



乐创客 我们从来不培养程序猿,我们只是嵌入式技术的搬运工
评论
  • 最近几年,新能源汽车愈发受到消费者的青睐,其销量也是一路走高。据中汽协公布的数据显示,2024年10月,新能源汽车产销分别完成146.3万辆和143万辆,同比分别增长48%和49.6%。而结合各家新能源车企所公布的销量数据来看,比亚迪再度夺得了销冠宝座,其10月新能源汽车销量达到了502657辆,同比增长66.53%。众所周知,比亚迪是新能源汽车领域的重要参与者,其一举一动向来为外界所关注。日前,比亚迪汽车旗下品牌方程豹汽车推出了新车方程豹豹8,该款车型一上市就迅速吸引了消费者的目光,成为SUV
    刘旷 2024-12-02 09:32 149浏览
  • 遇到部分串口工具不支持1500000波特率,这时候就需要进行修改,本文以触觉智能RK3562开发板修改系统波特率为115200为例,介绍瑞芯微方案主板Linux修改系统串口波特率教程。温馨提示:瑞芯微方案主板/开发板串口波特率只支持115200或1500000。修改Loader打印波特率查看对应芯片的MINIALL.ini确定要修改的bin文件#查看对应芯片的MINIALL.ini cat rkbin/RKBOOT/RK3562MINIALL.ini修改uart baudrate参数修改以下目
    Industio_触觉智能 2024-12-03 11:28 123浏览
  • 概述 说明(三)探讨的是比较器一般带有滞回(Hysteresis)功能,为了解决输入信号转换速率不够的问题。前文还提到,即便使能滞回(Hysteresis)功能,还是无法解决SiPM读出测试系统需要解决的问题。本文在说明(三)的基础上,继续探讨为SiPM读出测试系统寻求合适的模拟脉冲检出方案。前四代SiPM使用的高速比较器指标缺陷 由于前端模拟信号属于典型的指数脉冲,所以下降沿转换速率(Slew Rate)过慢,导致比较器检出出现不必要的问题。尽管比较器可以使能滞回(Hysteresis)模块功
    coyoo 2024-12-03 12:20 190浏览
  •         温度传感器的精度受哪些因素影响,要先看所用的温度传感器输出哪种信号,不同信号输出的温度传感器影响精度的因素也不同。        现在常用的温度传感器输出信号有以下几种:电阻信号、电流信号、电压信号、数字信号等。以输出电阻信号的温度传感器为例,还细分为正温度系数温度传感器和负温度系数温度传感器,常用的铂电阻PT100/1000温度传感器就是正温度系数,就是说随着温度的升高,输出的电阻值会增大。对于输出
    锦正茂科技 2024-12-03 11:50 159浏览
  • 作为优秀工程师的你,已身经百战、阅板无数!请先醒醒,新的项目来了,这是一个既要、又要、还要的产品需求,ARM核心板中一个处理器怎么能实现这么丰富的外围接口?踌躇之际,你偶阅此文。于是,“潘多拉”的魔盒打开了!没错,USB资源就是你打开新世界得钥匙,它能做哪些扩展呢?1.1  USB扩网口通用ARM处理器大多带两路网口,如果项目中有多路网路接口的需求,一般会选择在主板外部加交换机/路由器。当然,出于成本考虑,也可以将Switch芯片集成到ARM核心板或底板上,如KSZ9897、
    万象奥科 2024-12-03 10:24 107浏览
  • 在电子工程领域,高速PCB设计是一项极具挑战性和重要性的工作。随着集成电路的迅猛发展,电路系统的复杂度和运行速度不断提升,对PCB设计的要求也越来越高。在这样的背景下,我有幸阅读了田学军老师所著的《高速PCB设计经验规则应用实践》一书,深感受益匪浅。以下是我从本书中学习到的新知识和经验分享,重点涵盖特殊应用电路的PCB设计、高速PCB设计经验等方面。一、高速PCB设计的基础知识回顾与深化 在阅读本书之前,我对高速PCB设计的基础知识已有一定的了解,但通过阅读,我对这些知识的认识得到了进一步的深
    金玉其中 2024-12-05 10:01 118浏览
  • 光伏逆变器是一种高效的能量转换设备,它能够将光伏太阳能板(PV)产生的不稳定的直流电压转换成与市电频率同步的交流电。这种转换后的电能不仅可以回馈至商用输电网络,还能供独立电网系统使用。光伏逆变器在商业光伏储能电站和家庭独立储能系统等应用领域中得到了广泛的应用。光耦合器,以其高速信号传输、出色的共模抑制比以及单向信号传输和光电隔离的特性,在光伏逆变器中扮演着至关重要的角色。它确保了系统的安全隔离、干扰的有效隔离以及通信信号的精准传输。光耦合器的使用不仅提高了系统的稳定性和安全性,而且由于其低功耗的
    晶台光耦 2024-12-02 10:40 153浏览
  • 当前,智能汽车产业迎来重大变局,随着人工智能、5G、大数据等新一代信息技术的迅猛发展,智能网联汽车正呈现强劲发展势头。11月26日,在2024紫光展锐全球合作伙伴大会汽车电子生态论坛上,紫光展锐与上汽海外出行联合发布搭载紫光展锐A7870的上汽海外MG量产车型,并发布A7710系列UWB数字钥匙解决方案平台,可应用于数字钥匙、活体检测、脚踢雷达、自动泊车等多种智能汽车场景。 联合发布量产车型,推动汽车智能化出海紫光展锐与上汽海外出行达成战略合作,联合发布搭载紫光展锐A7870的量产车型
    紫光展锐 2024-12-03 11:38 136浏览
  • 戴上XR眼镜去“追龙”是种什么体验?2024年11月30日,由上海自然博物馆(上海科技馆分馆)与三湘印象联合出品、三湘印象旗下观印象艺术发展有限公司(下简称“观印象”)承制的《又见恐龙》XR嘉年华在上海自然博物馆重磅开幕。该体验项目将于12月1日正式对公众开放,持续至2025年3月30日。双向奔赴,恐龙IP撞上元宇宙不久前,上海市经济和信息化委员会等部门联合印发了《上海市超高清视听产业发展行动方案》,特别提到“支持博物馆、主题乐园等场所推动超高清视听技术应用,丰富线下文旅消费体验”。作为上海自然
    电子与消费 2024-11-30 22:03 116浏览
  • RDDI-DAP错误通常与调试接口相关,特别是在使用CMSIS-DAP协议进行嵌入式系统开发时。以下是一些可能的原因和解决方法: 1. 硬件连接问题:     检查调试器(如ST-Link)与目标板之间的连接是否牢固。     确保所有必要的引脚都已正确连接,没有松动或短路。 2. 电源问题:     确保目标板和调试器都有足够的电源供应。     检查电源电压是否符合目标板的规格要求。 3. 固件问题: &n
    丙丁先生 2024-12-01 17:37 114浏览
  • 11-29学习笔记11-29学习笔记习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习笔记&记录学习习笔记&记学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&学习学习笔记&记录学习学习笔记&记录学习学习笔记&记
    youyeye 2024-12-02 23:58 105浏览
  • TOF多区传感器: ND06   ND06是一款微型多区高集成度ToF测距传感器,其支持24个区域(6 x 4)同步测距,测距范围远达5m,具有测距范围广、精度高、测距稳定等特点。适用于投影仪的无感自动对焦和梯形校正、AIoT、手势识别、智能面板和智能灯具等多种场景。                 如果用ND06进行手势识别,只需要经过三个步骤: 第一步&
    esad0 2024-12-04 11:20 120浏览
  • 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 52浏览
我要评论
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦