之前有个需求,说是可能会用到 electron,于是稍微了解了一下,顺便做个记录。对于初学者而言,我最关心的往往不是这个框架的内核,而是我多久能打出 HelloWord,能不能满足业务需求,我投入的时间与我收获的东西等不等值(当然这一点毋庸置疑是不等值的????)?虽然对 electron 什么也不懂,没关系,上来就是萌新三连先百度一哈看看。
&01. 啥是 electron?
感谢 seo 优化逻辑,百度第一行这串字
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
就很好的解释了啥是 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
你可以用 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 就到这了。
以后有时间的话可以用这个做个小程序玩玩。
参考链接
安装 | Electron
Electron | API- 目录
简介 -electron-vue
electron 两种打包
electron 入门心得
electron 学习历程
electron+webpack2+ 多入口配置
electron 去边框 & 可拖动
electron 打开新窗口
:::