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



乐创客 我们从来不培养程序猿,我们只是嵌入式技术的搬运工
评论
  • 习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习笔记&记录学习习笔记&记学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记录学习学习笔记&记
    youyeye 2024-12-10 16:13 61浏览
  •         在有电流流过的导线周围会感生出磁场,再用霍尔器件检测由电流感生的磁场,即可测出产生这个磁场的电流的量值。由此就可以构成霍尔电流、电压传感器。因为霍尔器件的输出电压与加在它上面的磁感应强度以及流过其中的工作电流的乘积成比例,是一个具有乘法器功能的器件,并且可与各种逻辑电路直接接口,还可以直接驱动各种性质的负载。因为霍尔器件的应用原理简单,信号处理方便,器件本身又具有一系列的du特优点,所以在变频器中也发挥了非常重要的作用。  &nb
    锦正茂科技 2024-12-10 12:57 43浏览
  •         霍尔传感器是根据霍尔效应制作的一种磁场传感器。霍尔效应是磁电效应的一种,这一现象是霍尔(A.H.Hall,1855—1938)于1879年在研究金属的导电机构时发现的。后来发现半导体、导电流体等也有这种效应,而半导体的霍尔效应比金属强得多,利用这现象制成的各种霍尔元件,广泛地应用于工业自动化技术、检测技术及信息处理等方面。霍尔效应是研究半导体材料性能的基本方法。通过霍尔效应实验测定的霍尔系数,能够判断半导体材料的导电类型、载流子浓度及载流子
    锦正茂科技 2024-12-10 11:07 48浏览
  • 概述 通过前面的研究学习,已经可以在CycloneVGX器件中成功实现完整的TDC(或者说完整的TDL,即延时线),测试结果也比较满足,解决了超大BIN尺寸以及大量0尺寸BIN的问题,但是还是存在一些之前系列器件还未遇到的问题,这些问题将在本文中进行详细描述介绍。 在五代Cyclone器件内部系统时钟受限的情况下,意味着大量逻辑资源将被浪费在于实现较大长度的TDL上面。是否可以找到方法可以对此前TDL的长度进行优化呢?本文还将探讨这个问题。TDC前段BIN颗粒堵塞问题分析 将延时链在逻辑中实现后
    coyoo 2024-12-10 13:28 51浏览
  • 全球知名半导体制造商ROHM Co., Ltd.(以下简称“罗姆”)宣布与Taiwan Semiconductor Manufacturing Company Limited(以下简称“台积公司”)就车载氮化镓功率器件的开发和量产事宜建立战略合作伙伴关系。通过该合作关系,双方将致力于将罗姆的氮化镓器件开发技术与台积公司业界先进的GaN-on-Silicon工艺技术优势结合起来,满足市场对高耐压和高频特性优异的功率元器件日益增长的需求。氮化镓功率器件目前主要被用于AC适配器和服务器电源等消费电子和
    电子资讯报 2024-12-10 17:09 46浏览
  • 在驾驶培训与考试的严谨流程中,EST580驾培驾考系统扮演着至关重要的数据角色。它不仅集成了转速监控、车速管理、转向角度测量、转向灯光控制以及手刹与安全带状态检测等多项功能,还通过高精度的OBD数据采集器实时捕捉车辆运行状态,确保学员在模拟及实际驾驶中的每一步操作都精准无误。EST580驾培驾考转速车速转向角转向灯光手刹安全带OBD数据采集器系统的重要性及其功能:1、提高评判效率:通过原车CAN协议兼容,不同车型通过刷写固件覆盖,不仅提高了考试的数字化、自动化程度,还减少了人为干预的安装需要,从
    lauguo2013 2024-12-09 16:51 97浏览
  • 【萤火工场CEM5826-M11测评】OLED显示雷达数据本文结合之前关于串口打印雷达监测数据的研究,进一步扩展至 OLED 屏幕显示。该项目整体分为两部分: 一、框架显示; 二、数据采集与填充显示。为了减小 MCU 负担,采用 局部刷新 的方案。1. 显示框架所需库函数 Wire.h 、Adafruit_GFX.h 、Adafruit_SSD1306.h . 代码#include #include #include #include "logo_128x64.h"#include "logo_
    无垠的广袤 2024-12-10 14:03 48浏览
  • 智能汽车可替换LED前照灯控制运行的原理涉及多个方面,包括自适应前照灯系统(AFS)的工作原理、传感器的应用、步进电机的控制以及模糊控制策略等。当下时代的智能汽车灯光控制系统通过车载网关控制单元集中控制,表现特殊点的有特斯拉,仅通过前车身控制器,整个系统就包括了灯光旋转开关、车灯变光开关、左LED前照灯总成、右LED前照灯总成、转向柱电子控制单元、CAN数据总线接口、组合仪表控制单元、车载网关控制单元等器件。变光开关、转向开关和辅助操作系统一般连为一体,开关之间通过内部线束和转向柱装置连接为多,
    lauguo2013 2024-12-10 15:53 46浏览
  • 本文介绍Linux系统(Ubuntu/Debian通用)挂载exfat格式U盘的方法,触觉智能RK3562开发板演示,搭载4核A53处理器,主频高达2.0GHz;内置独立1Tops算力NPU,可应用于物联网网关、平板电脑、智能家居、教育电子、工业显示与控制等行业。修改对应的内核配置文件# 进入sdk目录cdrk3562_linux# 编辑内核配置文件vi./kernel-5.10/arch/arm64/configs/rockchip_linux_defconfig注:不清楚内核使用哪个defc
    Industio_触觉智能 2024-12-10 09:44 78浏览
  • 我的一台很多年前人家不要了的九十年代SONY台式组合音响,接手时只有CD功能不行了,因为不需要,也就没修,只使用收音机、磁带机和外接信号功能就够了。最近五年在外地,就断电闲置,没使用了。今年9月回到家里,就一个劲儿地忙着收拾家当,忙了一个多月,太多事啦!修了电气,清理了闲置不用了的电器和电子,就是一个劲儿地扔扔扔!几十年的“工匠式”收留收藏,只能断舍离,拆解不过来的了。一天,忽然感觉室内有股臭味,用鼻子的嗅觉功能朝着臭味重的方向寻找,觉得应该就是这台组合音响?怎么会呢?这无机物的东西不会腐臭吧?
    自做自受 2024-12-10 16:34 66浏览
  • 肖特基具有很多的应用场景, 可以做同步整流,防止电流倒灌和电源反接等,但是随着电源电流的增大,肖特基导通正向压降0.3~0.7v的劣势也越发明显,产生了很多的热,对于工程师的散热设计是个考验,增加了工程师的设计难度和产品成本,目前一种新的理想二极管及其控制器,目前正在得到越来越广泛的应用- BMS,无人机,PLC,安防,家电,电动工具,汽车等都在快速普及理想二极管有三种架构,内置电荷泵的类似无锡明芯微MX5050T这种,驱动能力会弱点,静态功耗200uA,外置电荷泵MX74700T的这种驱动能力
    王萌 2024-12-10 08:51 79浏览
我要评论
0
点击右上角,分享到朋友圈 我知道啦
请使用浏览器分享功能 我知道啦