Web developer 初学 Electron 的一些疑惑

This topic created in 2989 days ago, the information mentioned may be changed or developed.

各位 V 友好。一直在做 Web 开发，但是始终想尝试做一点桌面端的应用。Web 端比较熟的是 Spring+Angular。目前了解下来感觉 Electron 最适合自己。昨天在本地跑了下最简单的那个例子，产生不少疑问，希望占用大家一点时间来解答：

桌面端需要分前后端（类似 Spring REST API+ Angular MVC ）吗，如果分的话也是用 API 交互？如果不分的话，就是一套 MVC 分层来搞定嘛？
似乎很多小的 Electron 应用只有一个窗口标题栏，下面就是网页窗口了，菜单导航啥的都是 HTML 绘制。但是像 Visual Studio Code 有很多系统原生的菜单交互。两种实践主要区别有哪些呢？
想用 Web 端的 angular+material 来开发，但是符合桌面端的 UI 控件好像不太全。大家有什么组合推荐吗？
桌面端轻量级的数据库该如何选择呢？完全不了解。
项目的路径结构有好的实践规范嘛？
官方文档感觉有点凌乱，没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐？谢谢!

Supplement 1 · Apr 6, 2018

PS 1
感谢大家的回复，这两天自己又翻了一些资料。总结一下目前的进展

1. main 进程和 render 进程之间就类似前后端的关系？但是似乎也可以把 main 架空，在 render 端用 remote （？）来调用
4. 数据持久化似乎可以选择 sqllite，leveldb，pouchdb （后端也是 leveldb ？）。
5. github 上 star 比较多的一个种子项目 https://github.com/maximegris/angular-electron，打算用这个慢慢上手做

15 replies • 2018-04-13 23:31:03 +08:00

whypool

Apr 5, 2018

和原生交互是用 node 调用的

fengyj

Apr 5, 2018

做 electron 开发应该要先学 js 和 node （以及他的 API ）的吧。
还有 electron 开发的桌面端并没有那么轻量。

flowfire

Apr 5, 2018

https://electronjs.org/docs/api/menu
https://electronjs.org/docs/api/menu-item
文档是个好东西

Hanggi

Apr 5, 2018

electron 生成应用的时候特别烧，而且只是做了一个很简单的测试应用，编译出来的文件很大很大。不知道是不是用 Mac 的原因。楼主如果也遇到类似问题，得到解决希望分享一下。谢谢！

loginv2

Apr 5, 2018

@Hanggi 不是通病

hronro

Apr 5, 2018

1. 看情况。本身 Electron 就分 main 和 renderer，具体要不要分成两部分要看你具体的项目。
2. 自定义的菜单栏可以做的很好看，可以满足更多变态的需求，不过 accessibility 的细节需要你完全自己去实现，这个会非常非常麻烦。而如果系统的菜单栏的话，操作系统已经帮你处理好这些东西了。
4. sqllite 了解一下

Hanggi

Apr 5, 2018

@loginv2 没有什么解决方案吗？是不是 nw 会好点？

loading

Apr 5, 2018 via iPhone

要同时打包 node 和 webkit(图形界面)，要体积小是很难了。
就算把 node 和 webkit 重新并起来，体积也不小。

gnaggnoyil

Apr 5, 2018

@Hanggi node 和 webkit 本身体积就不小,换 nw.js 也不会缓解多少.上了 electron 的贼船还想不付出相应的代价,哪里有这种好事.想减小体积就上正统的 GUI 开发工具.

Akarin

Apr 5, 2018

web 模拟桌面端 UI 的话，可以看一下这个 [demo]( http://reactdesktop.js.org/demo/)
另外，觉得 Electron 体积大的话，Electron 的作者有另外一个[项目]( https://github.com/yue/muban)，还在 V 站发了[帖子]( https://v2ex.xtra.eu.org/t/432968)

duan602728596

Apr 5, 2018 via iPhone

1、Electron 可以运行 js 和 node，所以可以前后端代码混写，刚开始可能会不习惯
2、区别就是你的应用使用起来给人觉得更像是原生应用了，而不是浏览网站的感觉
3、ui 控件基本上都是适合 web 的，适合桌面端的还真见过，不过你可以魔改下样式
4、不知道你要存什么，如果是存一些简单的数据的话，IndexedDB 了解一下
5、没有...
6、我没用过 Electron ……，我只用过 nwjs，上面的都是我编的

Rocka

Apr 5, 2018

1. 这个要看个人喜好以及具体项目要求了，可以在 BrowserWindow 里面写 JS 操作一切，也可以用类似传统前后端分离的方式然后 API 交互，这时候就需要一个 Express 或者其他的 Web 框架。也可以用 Electron 里面的 IPC，不需要占用端口，而且效率要比本地 HTTP API 高一些。
2. 自绘控件当然要随心所欲一些，但你的控件只能局限于窗口内部，没法像原生菜单那样可以扩展到窗口外面，而且原生菜单与系统集成好，观感与操作手感比较统一。
3. Ant.Design for Angular https://github.com/NG-ZORRO/ng-zorro-antd 其实我没用过，真的，我连 Angular 都没用过（捂脸）
4. 一般都会选 SQLite 吧，然后在 Electron 的 main 进程进行操作然后这个我也没用过 ... 都是直接存成 JSON 文件（捂脸）
5. 如果是按照前后端分离的方式，大概

assets/ # 静态资源文件
script/ # Webpack 配置文件，编译打包等脚本
src/ # 代码
main/ # main 进程
renderer/ # renderer 进程
dist/ # 打包出来的东西

6. 上面都是我编的，看看就行 ... 先上手一把梭，不会就查文档 ...

plqws

Apr 6, 2018

项目目录结构啊、构建工具啊，可以试试： https://github.com/maximegris/angular-electron

不管是 react 还是 vue 也都有对应的一键项目模板

Tompes

Apr 6, 2018

可以这么理解 main 是 node 也就是后台.
其他的是都是前端和浏览器里一样通过 IPC 传递数据.
当然想 http 也行，不过比较麻烦，参见: https://github.com/frankhale/electron-with-express

hoyixi

Apr 13, 2018

@Hanggi #4

本质是里面裹了个浏览器 Chromium 内核，你说体积大不大，哈哈