A004_初识Electron

之前有个需求,说是可能会用到electron,于是稍微了解了一下,顺便做个记录。 对于初学者而言,我最关心的往往不是这个框架的内核,而是我多久能打出HelloWord,能不能满足业务需求,我投入的时间与我收获的东西等不等值(当然这一点毋庸置疑是不等值的😭)? 虽然对electron什么也不懂,没关系,上来就是萌新三连先百度一哈看看。

&01.啥是electron?

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

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

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

桌面应用就是针对于pc端的各种系统(win/mac/linux)的应用程序。就好像开发移动端的小程序一样,用前端语言模拟开发Android/ios应用,electron能用前端语言开发pc端的应用。

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

啥是electron?

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

&02.为啥用electron?

贴一下之前整理的几点笔记:

简要

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

框架特性

  • 开源
  • 客户端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
1
2
3
4
5
6
7

你可以用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"
1
2
3
4
5
6
7
8
9

起步

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
1
2
3
4
5
6
7
8
9
10
11

开发 在/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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

End,因为对electron的业务需优先级不高,所以这个需求也先搁置下来了。我也没做更深入的研究,初识electron就到这了。

以后有时间的话可以用这个做个小程序玩玩。