Electron快速入手-从环境搭建到程序打包

Electron是什么Electron是由Github开发的开源框架,它允许用户使用Web技术开发桌面端应用,现在Electron框架由OpenJS基金会进行维护。Electron = Chromium + Node.js + NativeAPIChrominu允许使用Web技术写UINode.js赋予Electron操作底层的能力NativeAPI提升了Electron的跨平台的能力,使其获得更

码农飞飞

1109人浏览 · 2021-10-24 19:00:44

码农飞飞 · 2021-10-24 19:00:44 发布

Electron是什么

Electron是由Github开发的开源框架,它允许用户使用Web技术开发桌面端应用,现在Electron框架由OpenJS基金会进行维护。

Electron = Chromium + Node.js + NativeAPI

Chrominu允许使用Web技术写UI

Node.js赋予Electron操作底层的能力

NativeAPI提升了Electron的跨平台的能力,使其获得更多的原生能力。

Wikipedia介绍

Electro(原名为Atom Shell)是GitHub开发的一个开源框架。它通过使用Node.js(作为后端)和Chromium的渲染引擎(作为前端)完成跨平台的桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发,著名项目包括GitHub的Atom和微软的Visual Studio Code。

Electron的历史

2008年Chromium出现,2009年Node.js出现,在两者发展成熟之后,在2016年基于两者的Electron出现。由于Electron可以复用Web的UI,因此开发效率较高,适用于快速试错的场景领域。

如果需要同时开发web端和桌面端,可以考虑使用Electron.

基于Electron的大型应用有:Atom、stack、VSCode、WordPress、Whatsapp

Electron的最小组成

一个基础的Electron包含三个文件：

package.json(包体描述)

main.js(主进程)

index.html(图形用户界面)。

框架由Electron可执行文件（Windows中为electron.exe、macOS中为electron.app、Linux中为electron)提供。开发者可以自行添加标志、自定义图标、重命名或编辑Electron可执行文件。

Electron的架构

Electron程序是一个多进程程序一个Browser多个Render,进程之间通过IPC进行通信。Node.js的事件循环基于libuv,Chromium的事件循环基于message bump,将Node.js和Chromium集成到一起后。当Node.js的libuv事件发生以后,会通知Electron的主线程,当主线程收到通知之后,会转发给Chromium的MessageLoop;

各种UI框架对比

原生框架(MFC/GDI/C#/Objective-C)

性能优异、原生体验、包体积小、开发门槛高、迭代速度慢

基于C++性能好、跨平台、包体积比原生大、开发门槛高、迭代速度一般

Flutter

Flutter的主要应用场景还在移动端,在PC端的应用还比较少,PC端生态建设很少

NW.js(Node-Webkit.js)

基于Web技术,性能一般,跨平台(Mac、Windows、Linux),v0.14.7支持XP。包体积比较大,源码加密,支持Chrome扩展。有不错的生态社区。微信开发者工具、钉钉都是基于NW.js开发的。

Electron

基于Web技术,性能一般,跨平台(Mac、Windows、Linux),不支持XP。包体积比较大,有活跃的社区。Atom、VSCode、WordPress等应用都是基于Electron开发的。

其它的小众UI框架还有:

CEF(也是基于Web技术的)

WPF(微软推出的用户界面框架)

PWA (Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案)

搭建Electron开发环境

NVM安装

Mac/Linux:

curl -o- https://raw.githubusercontent.com/nvm.sh/nvm/v0.35.2/install.sh | bash

Windows:

https://github.com/coreybutler/nvm-windows/releases

Node.js/NPM安装

nvm install 12.14.0
npm -v \ node -v
//如果下载慢的话,也可以到官网去下载安装包安装

Electron安装

局部安装

npm install electron --save-dev
//下面的方式通过指定CPU和平台的方式进行安装
npm install --arch=ia32 --platform=win32 electron

全局安装electron

npm install -g electron

验证安装成功

electron -v

设置对应的景象可以加速Electron的下载安装

npm config set electron_mirror “https://npm.taobao.org/mirrors/electron/”

编写一个简单的Electron程序

electron进程间的关系图如下图所示,主要有主进程和渲染进程组成。

一个最小的electron程序单元由三个文件组成,一个html文件,一个renderer.js文件,一个main.js文件。html文件用来定义electron应用程序的界面,main.js文件用来定义启动程序的入口,renderer.js用来对html界面进行渲染,当然如果是静态界面不需要交互的话,renderer.js文件也可以省略。

index.html

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <body>
        <h1>第一个electron应用</h1>
        <input type="button" value="测试按钮"> </input>
    </body>
</html>

main.js

const {app, BrowserWindow, Notification, ipcMain} = require('electron')
//主进程引入app、BrowserWindow、Notification、ipcMain模块
let win
//创建窗口
app.on('ready', () => {
    win = new BrowserWindow({
        width: 300,
        height: 300,
        webPreferences: {
            nodeIntegration: true
        }
    })
    //加载页面
    win.loadFile('./index.html')
})

编写完对应的界面程序之后,就可以初始化项目了。在项目中执行下面的命令,对项目进行描述 :

npm init

输入对应的描述之后就会生成对应的包配置文件:

package.json

{
  "name": "test-electron",
  "version": "1.0.0",
  "description": "测试electron",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager . test-electron --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
  },
  "keywords": [
    "electron"
  ],
  "author": "yangfeifei",
  "license": "ISC",
  "devDependencies": {
    "electron": "^15.3.0"
  }
}

Electron 运行和打包

启动命令

//提前安装局部依赖
npm install

假设此时你的分支中没有任何lock文件，当你执行npm install, npm会根据你在package.json中对各种依赖的定义去安装这些依赖。安装完之后，会产生两个结果:

- node_modules: 所有依赖包

- npm-lock.json: lock 文件精确描述了 node_modules 目录中所列出的目录的物理树，这个文件相当于是node_module产生的物理树的快照。

如果你在package.json脚本配置了start参数可以使用npm start进行启动,

如果没有配置对应的参数可以使用electron . 在当前目录启动,启动结果如下图所示:

安装electron-packager打包工具

npm install electron-packager -g

通过package.json进行打包配置打包命令

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . test-electron --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
}
//配置需要的electron 版本
"devDependencies": {
    "electron": "^15.3.0"
  }

启动打包

npm install //先安装依赖
npm run packager

通过cmd命令行打包

electron-packager . AppName --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules --electron-version 5.0.0

参数说明

AppName:生成exe的名称

--platfrom=win32构建平台类型,还可以取:darwin,linux,mas,win32

--arch=x64决定使用x86还是x64还是两个架构都用

--icon=app.icon自定义应用的图标

--out=./out指定打包文件输出的位置

--asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在

--app-version=0.0.1:生成应用的版本号

--overwrite:覆盖原有的

--ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去

--electron-version 5.0.0：指定当前要构建的electron的版本号,需要和当前的版本一致,不一致会下载对应的包。

打包成功之后对应的文件会输出到out目录下:

主程序一百多兆还是很大的

完成一系列的流程之后,就可以进行Electron程序开发了。当然如果想开发优秀的Electron程序,深厚的前端技术功底(JavaScript、html、css)还是必须的。

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生