Nodejs Web developer 初学 Electron 的一些疑惑
Nodejs Web developer 初学 Electron 的一些疑惑
各位 V 友好。一直在做 Web 开发,但是始终想尝试做一点桌面端的应用。Web 端比较熟的是 Spring+Angular。目前了解下来感觉 Electron 最适合自己。 昨天在本地跑了下最简单的那个例子,产生不少疑问,希望占用大家一点时间来解答:
- 桌面端需要分前后端(类似 Spring REST API+ Angular MVC )吗,如果分的话也是用 API 交互?如果不分的话,就是一套 MVC 分层来搞定嘛?
- 似乎很多小的 Electron 应用只有一个窗口标题栏,下面就是网页窗口了,菜单导航啥的都是 HTML 绘制。但是像 Visual Studio Code 有很多系统原生的菜单交互。两种实践主要区别有哪些呢?
- 想用 Web 端的 angular+material 来开发,但是符合桌面端的 UI 控件好像不太全。大家有什么组合推荐吗?
- 桌面端轻量级的数据库该如何选择呢?完全不了解。
- 项目的路径结构有好的实践规范嘛?
- 官方文档感觉有点凌乱,没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐? 谢谢!
和原生交互是用 node 调用的
做 electron 开发应该要先学 js 和 node (以及他的 API )的吧。
还有 electron 开发的桌面端并没有那么轻量。
electron 生成应用的时候特别烧,而且只是做了一个很简单的测试应用,编译出来的文件很大很大。不知道是不是用 Mac 的原因。楼主如果也遇到类似问题,得到解决希望分享一下。谢谢!
不是 通病
- 看情况。本身 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,上面的都是我编的
- 这个要看个人喜好以及具体项目要求了,可以在 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的一个框架,用于构建跨平台的桌面应用程序。以下是一些常见的疑惑及解答,希望能帮到你。
-
如何创建一个基本的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
中,你可以编写你的前端代码。 -
如何打包Electron应用?
你可以使用
electron-packager
或electron-builder
来打包你的应用。以下是一个使用electron-packager
的例子:npm install electron-packager --save-dev electron-packager . my-electron-app --platform=win32 --arch=x64
这会在当前目录下生成一个名为
my-electron-app
的Windows 64位可执行文件。
希望这些信息能帮到你!如果有更具体的问题,欢迎继续提问。