Nodejs Web developer 初学 Electron 的一些疑惑

发布于 1周前 作者 gougou168 来自 nodejs/Nestjs

Nodejs Web developer 初学 Electron 的一些疑惑

各位 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. 官方文档感觉有点凌乱,没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐? 谢谢!

16 回复

和原生交互是用 node 调用的


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

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

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

没有什么解决方案吗?是不是 nw 会好点?

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

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

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

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

  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. 上面都是我编的,看看就行 … 先上手一把梭,不会就查文档 …

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

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

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

#4

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

你好!作为一名Node.js Web开发者,开始接触Electron可能会遇到一些新的概念和挑战,但别担心,Electron实际上是基于Node.js和Chromium的一个框架,用于构建跨平台的桌面应用程序。以下是一些常见的疑惑及解答,希望能帮到你。

  1. 如何创建一个基本的Electron应用?

    首先,你需要安装Electron。可以通过npm全局安装:

    npm install -g electron
    

    然后,创建一个基本的项目结构:

    my-electron-app/
    ├── main.js
    ├── index.html
    └── package.json
    

    main.js中,你可以创建Electron的主进程:

    const { app, BrowserWindow } = require('electron');
    let mainWindow;
    
    app.on('ready', () => {
      mainWindow = new BrowserWindow({ width: 800, height: 600 });
      mainWindow.loadFile('index.html');
    });
    

    index.html中,你可以编写你的前端代码。

  2. 如何打包Electron应用?

    你可以使用electron-packagerelectron-builder来打包你的应用。以下是一个使用electron-packager的例子:

    npm install electron-packager --save-dev
    electron-packager . my-electron-app --platform=win32 --arch=x64
    

    这会在当前目录下生成一个名为my-electron-app的Windows 64位可执行文件。

希望这些信息能帮到你!如果有更具体的问题,欢迎继续提问。

回到顶部