前端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 相关文章推荐
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
js实现无缝滚动特效
Dec 20 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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
操作Oracle的php类
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
python快速排序代码实例
2013/11/21 Python
python中dir函数用法分析
2015/04/17 Python
python如何查看系统网络流量的信息
2016/09/12 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python pycharm的安装及其使用
2019/10/11 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
函授本科个人自我鉴定
2014/03/25 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
学习十八大演讲稿
2014/09/15 职场文书
电工实训报告总结
2014/11/05 职场文书
初中信息技术教学计划
2015/01/22 职场文书
运动会100米广播稿
2015/08/19 职场文书