前端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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
浅谈Python单向链表的实现
2015/12/24 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
贷款委托书范本
2014/04/08 职场文书
初二学习计划书范文
2014/04/27 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
毕业论文致谢词
2015/05/14 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android