Web developer 初学 Electron 的一些疑惑

2018-04-05 13:37:06 +08:00
 ne6rd

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

  1. 桌面端需要分前后端(类似 Spring REST API+ Angular MVC )吗,如果分的话也是用 API 交互?如果不分的话,就是一套 MVC 分层来搞定嘛?
  2. 似乎很多小的 Electron 应用只有一个窗口标题栏,下面就是网页窗口了,菜单导航啥的都是 HTML 绘制。但是像 Visual Studio Code 有很多系统原生的菜单交互。两种实践主要区别有哪些呢?
  3. 想用 Web 端的 angular+material 来开发,但是符合桌面端的 UI 控件好像不太全。大家有什么组合推荐吗?
  4. 桌面端轻量级的数据库该如何选择呢?完全不了解。
  5. 项目的路径结构有好的实践规范嘛?
  6. 官方文档感觉有点凌乱,没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐? 谢谢!
9281 次点击
所在节点    Node.js
15 条回复
whypool
2018-04-05 13:42:05 +08:00
和原生交互是用 node 调用的
huiyifyj
2018-04-05 14:02:29 +08:00
做 electron 开发应该要先学 js 和 node (以及他的 API )的吧。
还有 electron 开发的桌面端并没有那么轻量。
flowfire
2018-04-05 14:40:52 +08:00
Hanggi
2018-04-05 15:13:24 +08:00
electron 生成应用的时候特别烧,而且只是做了一个很简单的测试应用,编译出来的文件很大很大。不知道是不是用 Mac 的原因。楼主如果也遇到类似问题,得到解决希望分享一下。谢谢!
loginv2
2018-04-05 15:36:14 +08:00
@Hanggi 不是 通病
hronro
2018-04-05 15:52:47 +08:00
1. 看情况。本身 Electron 就分 main 和 renderer,具体要不要分成两部分要看你具体的项目。
2. 自定义的菜单栏可以做的很好看,可以满足更多变态的需求,不过 accessibility 的细节需要你完全自己去实现,这个会非常非常麻烦。而如果系统的菜单栏的话,操作系统已经帮你处理好这些东西了。
4. sqllite 了解一下
Hanggi
2018-04-05 15:54:38 +08:00
@loginv2 没有什么解决方案吗?是不是 nw 会好点?
loading
2018-04-05 16:05:02 +08:00
要同时打包 node 和 webkit(图形界面),要体积小是很难了。
就算把 node 和 webkit 重新并起来,体积也不小。
gnaggnoyil
2018-04-05 17:03:52 +08:00
@Hanggi node 和 webkit 本身体积就不小,换 nw.js 也不会缓解多少.上了 electron 的贼船还想不付出相应的代价,哪里有这种好事.想减小体积就上正统的 GUI 开发工具.
Akarin
2018-04-05 17:11:10 +08:00
web 模拟桌面端 UI 的话,可以看一下这个 [demo]( http://reactdesktop.js.org/demo/)
另外, 觉得 Electron 体积大的话,Electron 的作者有另外一个[项目]( https://github.com/yue/muban),还在 V 站发了[帖子]( https://www.v2ex.com/t/432968)
duan602728596
2018-04-05 19:50:11 +08:00
1、Electron 可以运行 js 和 node,所以可以前后端代码混写,刚开始可能会不习惯
2、区别就是你的应用使用起来给人觉得更像是原生应用了,而不是浏览网站的感觉
3、ui 控件基本上都是适合 web 的,适合桌面端的还真见过,不过你可以魔改下样式
4、不知道你要存什么,如果是存一些简单的数据的话,IndexedDB 了解一下
5、没有...
6、我没用过 Electron ……,我只用过 nwjs,上面的都是我编的
Rocka
2018-04-05 22:35:40 +08:00
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
2018-04-06 12:26:36 +08:00
项目目录结构啊、构建工具啊,可以试试: https://github.com/maximegris/angular-electron

不管是 react 还是 vue 也都有对应的一键项目模板
Tompes
2018-04-06 13:01:57 +08:00
可以这么理解 main 是 node 也就是后台.
其他的是都是前端和浏览器里一样 通过 IPC 传递数据.
当然想 http 也行,不过比较麻烦,参见: https://github.com/frankhale/electron-with-express
hoyixi
2018-04-13 23:31:03 +08:00
@Hanggi #4

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/444469

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX