前端Electron新手入门教程详解
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,如下图
底层实现
由于应用场景是在系统平台上开发应用,所以我们开发时需要有能调用原生系统api的能力。为了能让前端语言能跟底层可以交互,electron集成了nodejs+chromium。nodejs主要负责应用程序主线程逻辑控制、底层交互等功能,chromium主要负责渲染线程窗口的业务逻辑。主要的架构如下图:
这样的架构让单独升级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有了一些初步的认识。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。