前端Electron新手入门教程详解

时间：2013.06.02 发布人：ymddns

已解决问题

谷歌ymddns用户在2013.06.02提交了关于“蛇蝎美人第一季前端Electron新手入门教程详解”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2023-10-30T19:17:03。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，真心佩服你,谢谢！

希望以下的回答，能够帮助你。

第1个回答

用户名：ebigking 时间：2013.06.03

Electron是什么

定义

Electron是一个能让你使用传统前端技术（Nodejs,J**ascript,h**TML,CSS）开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Li**x系统上运行的程序。

历史

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

接下来的名复美几年，Electron在不断的更新迭代，几乎每问答年都有一个重大的里程碑

2013年4月11日，Electron以AtomShell为名起步。2014年5月6日，Atom号我计交伤雷参氢以及AtomShell以MIT许可开源。2015年4月17日，AtomShell改名为齐祖式复整Electron。2016年5月11日，1.0版本发布。2016年5月20日，允许向Mac应用商店提交软件包。2016年8月2日，支持Windows商店。

在最新的稳定版本V3.x中，Electorn集成了Nodejsv10.2.0和内核为v认附防上数层要66.0.3359.181的Chromium

基于Electron实现的软件

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

底层实现

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

这样的架构让单独升级Chromium版本成为查以女可能。假设你的程序当路声图核亲价回前使用的是Electronv3.x的版本，这个版本的Electron所带的C史率画亲固尽助振乐见hromium是66版本。这时如果你用的某些特性必须要使用Chrom并室记较似粉依尽观ium69版本，除了整体升级Electron到指定最新版本外，你还可以单独的对Chromium版本进行升级。

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

为什么要用

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

公司要做个全新的日呼乐预APP，但是技术人员构成大部分都是前端开发公司原本就有在线的web应用，但是想包个壳写态存歌迫支鱼注能在桌面直接打开，同时增加一些与系统交互的功能

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

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

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

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

怎么用

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

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

mkdirhellowordnpminit

修改package.json文件，增加npmrunstart命令

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

通过npm安装Electron

npmielectron--s**e-dev

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

main.js

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

index.html

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>h**elloWorld!</title></head><body><h1>h**elloWorld!</h1></body></html>

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

npmrunstart

看看效果

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:利用Electron简单一个Markdown编辑器的方法Electron-vue开发的客户端支付收款工具的实现解决Vue+Electron下Vuex的Dispatch没有效果问题electron-vue利用webpack打包实现多页面的入口文件问题Electron如何调用本地模块的方法详解使用webpack+electron+reactJs开发windows桌面应用