前端Electron新手入门教程详解


Posted in Javascript onJune 21, 2019

Electron 是什么

定义

Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。

历史

2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell。

接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑

  • 2013年4月11日,Electron以Atom Shell为名起步。
  • 2014年5月6日,Atom以及Atom Shell以MIT许可证开源。
  • 2015年4月17日,Atom Shell改名为Electron。
  • 2016年5月11日,1.0版本发布。
  • 2016年5月20日,允许向Mac应用商店提交软件包。
  • 2016年8月2日,支持Windows商店。

在最新的稳定版本V3.x中,Electorn集成了Nodejs v10.2.0和内核为v66.0.3359.181的Chromium

基于Electron实现的软件

Electron现已被多个开源应用软件所使用,其中被广大程序员所熟知和使用的Atom和VsCode编辑器就是基于Electron实现的。尝试打开VsCode,点击帮助菜单中的切换开发人员工具,可以在界面上看到我们熟悉的Chrome devtool,如下图

前端Electron新手入门教程详解

底层实现

由于应用场景是在系统平台上开发应用,所以我们开发时需要有能调用原生系统api的能力。为了能让前端语言能跟底层可以交互,Electron集成了Nodejs+Chromium。Nodejs主要负责应用程序主线程逻辑控制、底层交互等功能,Chromium主要负责渲染线程窗口的业务逻辑。主要的架构如下图:

前端Electron新手入门教程详解

这样的架构让单独升级Chromium版本成为可能。假设你的程序当前使用的是Electron v3.x的版本,这个版本的Electron所带的Chromium是66版本。这时如果你用的某些特性必须要使用Chromium 69版本,除了整体升级Electron到指定最新版本外,你还可以单独的对Chromium版本进行升级。

但是一般情况我们不建议这么做,因为成功的升级需要你具备C和C++相关的知识,并且对Chromium的底层实现具有一定的了解。即使你成功升级了Chromium的版本,但是对于软件整体的稳定性是无法保证的。

为什么要用

以Windows平台为例,大部分人会首先想到使用QT(C++),WPF(C#) 等语言去开发应用。不可否认的是,这些已经是非常成熟的开发方案了。但是,我们来看下如下两种场景:

  • 公司要做个全新的APP,但是技术人员构成大部分都是前端开发
  • 公司原本就有在线的web应用,但是想包个壳能在桌面直接打开,同时增加一些与系统交互的功能

对于第一种场景,团队中开发人员对于C++和C#并不熟悉,虽然可以现学,但是整个项目的技术管理和项目管理就会变得不可控。

对于第二种场景,对于应用的业务逻辑要求并不多,只是套一个具有浏览器的运行环境,单独为此配置一个C++、C#开发人员划不来。

对于这两种情况,如果现有的前端开发人员能直接搞定,那就非常完美了。

Electron的诞生提供了这种可能性。它可以帮助前端开发者在不需要学习其他语言和技能的前提下,快速开发跨平台的桌面应用。

怎么用

在后面的章节中,我们会根据主要的知识点并辅以实际案例来具体讲解如何使用Electron进行开发。这里我们只简单的介绍下如何使用Electron写一个经典的Hello World。

首先,新建一个目录,初始化npm

mkdir helloword
npm init

修改package.json文件,增加npm run start命令

{
"name": "electron demo",
"version": "1.0.0",
"description": "",
"main": "main.js", //修改为main.js
"scripts": {
"start": "electron ." //增加start命令
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^3.0.10"
}
}

通过npm安装Electron

npm i electron --save-dev

在根目录创建main.js和index.html

main.js

const { app, BrowserWindow } = require('electron')
function createWindow () { 
// 创建浏览器窗口
win = new BrowserWindow({ width: 800, height: 600 })
// 然后加载应用的 index.html。
win.loadFile('index.html')
}
app.on('ready', createWindow)

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

到这里,我们所有的准备工作都完成了,接下来就是运行它!

npm run start

看看效果

前端Electron新手入门教程详解

关于Electron的简单介绍就到这里为止,想必大家已经对Electron有了一些初步的认识。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
js事件触发操作实例分析
Jun 21 #Javascript
微信小程序实现下拉刷新动画
Jun 21 #Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
You might like
PHP教程 变量定义
2009/10/23 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP内置加密函数详解
2016/11/20 PHP
ArrayList类(增强版)
2007/04/04 Javascript
再论Javascript的类继承
2011/03/05 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
微信小程序模板template简单用法示例
2018/12/04 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
推荐11个实用Python库
2015/01/23 Python
django_orm查询性能优化方法
2018/08/20 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python matlab库简单用法讲解
2020/12/31 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
什么是URL
2015/12/13 面试题
水务局局长岗位职责
2013/11/28 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
前台文员岗位职责
2015/02/04 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2016年母亲节寄语
2015/12/04 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
python中validators库的使用方法详解
2022/09/23 Python