初识Electron

时间 2019-11-15

标签 electron 繁體版

原文原文链接

以前有个需求，说是可能会用到electron，因而稍微了解了一下，顺便作个记录。
对于初学者而言，我最关心的每每不是这个框架的内核，而是我多久能打出HelloWord，能不能知足业务需求，我投入的时间与我收获的东西等不等值（固然这一点毋庸置疑是不等值的😭）？
虽然对electron什么也不懂，不要紧，上来就是萌新三连先百度一哈看看。css

&01.啥是electron？

感谢seo优化逻辑，百度第一行这串字html

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

就很好的解释了啥是electron。什么？你还不懂？好吧，我也不懂但我看着解释一哈。前端

桌面应用就是针对于pc端的各类系统（win/mac/linux）的应用程序。就好像开发移动端的小程序同样，用前端语言模拟开发Android/ios应用，electron能用前端语言开发pc端的应用。vue

electron做为一种为前端开发者（或说是js/html/css语言的使用者）所开发的一种能用前端语言生成桌面应用的框架。
你只须要要和往常同样编写你的前端代码，诸如布局样式，页面交互，数据处理，请求响应等等。而当你编写完成，下达了打包的命令后，electron会帮你生成对应的桌面应用。
也就是说，若是没什么细节的配置要求，你只管写你的前端代码，怎么生成桌面应用就是一句命令的事。linux

啥是electron？webpack

electron是个框架，给它个命令，它能生成桌面应用，Over.ios

&02.为啥用electron？

贴一下以前整理的几点笔记：git

简要web

Electron 跨系统开发框架
Electron 经过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为 Mac ，Windows 和 Linux 系统下的应用来实现这一目的。同时也支持跨平台开发，诸如移动端APP,小程序,H5等，但适应性不及原生的跨平台开发框架(Weex,DCloud...)

框架特性vue-router

开源
客户端vs浏览器端（安全性，用户体验，本地工具...）
适应多系统的运行环境
适应系统下原生的通信联动（系统提示/任务栏常驻/崩溃监控/开机自启...）
我的信息、操做日志的本地化数据库存储
适配部分 chrome 的 crx 扩展插件
打包文件大(几十兆，至少包含一个浏览器程序大小)，吃内存 ## 开发 ##
在 /src/renderer/ 渲染进程内进行 vue 项目开发;vue配套的工具插件(axios,vuex,router...)照常使用
一个主进程与多个渲染进程模拟多页面/多弹窗的情景
Electron 版本发布至关频繁
Electron 不支持 Web Worker 多进程，使用 background process & 缓存机制
不一样系统间存在部分api差别
自动更新 autoUpdater win&mac , 不支持Linux
NeDB 嵌入式持久数据库 & 浏览器端缓存机制
使用fs操做系统文件

为啥用electron？

不须要额外的编写，把原来写好的前端代码搬到electron对应渲染目录下便可，快速构建一个桌面应用，还能同时适配（并不是百分百适配）三个操做系统，是网页服务端向PC应用端过渡的一个不错方案，Over.

&03.怎么用electron？

emm...那我要怎么用呢？若是仅仅是知道了啥是electron，那想真正玩起来仍是蛮麻烦的，你可能还会遇到很多问题，仍是要看很多博客文章，固然这都是正常的。

打开官网，快速浏览下网站，你会发现官网有一个快速入门的demo。

我下过来看了一哈，感受就真的是一个入门demo，没啥特殊的。反却是怎么把入门demo跑起来倒花了我点时间，由于electron的下载可能须要外网资源，因此会遇到安装失败的状况，解决办法就是使用cnpm淘宝镜像源。

//npm安装electron要从国外下载一个45MB左右的zip包，
//特别的慢（8KB...），因此咱们能够采用下面的这条安装命令。
//条安装命令会从淘宝的镜像站下载这个zip包，速度很快。 
$ npm install electron -g --registry=http://registry.npm.taobao.org
// 固然你也可使用cnpm来全局安装electron 
$ npm install cnpm -g --registry=http://registry.npm.taobao.org 
$ cnpm install electron -g

你能够用electron白手起家，跟着demo本身边学边造一个工程出来；也能够在demo的基础上改改接着开发；或者呢找找看有没有脚手架之类的。

由于我以前是学习的vue，因此看到 vue-cli + electron 的关键字后就感到特别亲切。

主要依赖&版本

"electron": "^2.0.6", // latest 4.0.3| beta 5.0.0 | nightly 6.0.0, 
"vue": "^2.5.16",
"vue-cli": "^2.9.6",
"vue-electron": "^1.0.6", 
"vue-router": "^3.0.1", 
"vuex": "^3.0.1", 
"vuex-electron": "^1.0.0", 
"iview": "^3.2.2", 
"axios": "^0.18.0"

起步

P.S. vue-cli 为 2.0 版本

# 安装 vue-cli 和 脚手架样板代码 
# 此模板依赖的 electron 默认为"^2.0.6"，需求高版本的可自行更改
npm install -g vue-cli vue init simulatedgreg/electron-vue my-project 
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# pack electron application
npm run pack

开发
在/src/renderer/ 目录下进行 vue 项目开发
打包结果会在build文件夹（仍是dist来着具体我忘了）生成几个exe安装程序。
把exe文件复制到桌面，安装并打开便可。

怎么用electron？

使用vue-cli脚手架傻瓜式建立一个项目出来，并在/src/renderer/ 目录下进行 vue 项目开发,
开发以前先看看Electron|API里有没有贴合业务需求的，有就尽可能拿来用，没有再本身写,Over.

&04.EX-electron结语

即便咱们什么都不写，一个空的electron工程打包完也有20mb左右的大小，我猜这是其内部浏览器的大小。

咱们甚至能够说electron就是一个内部封装了一整个chrome的工程。它之因此能适配端系统，就是由于在三个系统上使用的都是同一个chrome浏览器的内核。

咱们的electron开发视图也都是在这个内置的浏览器中显示，而不是咱们经常使用的外部真实的浏览器，并且在这个内部浏览器中你也能使用开发者模式进行调试，使用chrome的大部分功能，同时又多了许多与操做系统交互的api。

至关于原本写的项目须要作不一样浏览器适配，如今用electron就能够只写chrome的适配（不用IE！！！）。

而后原来是 直接在不定浏览器中访问的方式改为在一个提供且仅提供chrome浏览器功能的程序中访问业务。

固然，作窗口分辨率适配仍是要的。你能够用它快速地搭建本身的桌面小应用。

最后，咱们的需求是既要网页应用也可能要桌面应用，和上级沟通了一哈，选择了下面的第三种方案A。

方案C
├─── vue本地开发=>vue生产发版=>网页应用
│   ├── vue迭代版本 ↑
│   ├── vue外套electron ↓
└─── electron生产发版=>桌面应用
** 一次迭代更新vue&electron，两个都要从新发版静态文件。

方案B
├─── vue本地开发=>vue生产发版=>网页应用=>close
│   ├── vue迭代版本 ↑ 
│   ├── vue总体搬迁electron ↓
│   ├── electron内部开发 ↓
└─── electron生产发版=>桌面应用=>桌面&网页应用
** 一次迭代更新electron，须要时间搬迁原工程。

方案A
├─── vue本地开发=>vue生产发版=>网页应用
│   └───vue迭代版本 ↑ 
└─── electron 近空项目生产发版=>桌面应用
**[打开程序后仅提供vue网页工程的网址访问，相似electron打开一个百度页面的程序窗口]
** 一次迭代更新vue，Over.

End，由于对electron的业务需优先级不高，因此这个需求也先搁置下来了。我也没作更深刻的研究，初识electron就到这了。

之后有时间的话能够用这个作个小程序玩玩。

参考连接

:::