使用Electron开发PC客户端----入门篇

Posted 2023-03-20

参考技术A Electron ，使用 javascript, html 和 CSS 构建跨平台的桌面应用，利用 Web技术JavaScript、HTML 和 CSS 开发跨平台（Mac，Windows和Linux系统）桌面应用的开源框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron。

可以将 electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。

electron 内置了 Chromium 内核 和 Node，因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面，用 JavaScript 调用丰富的原生 API（如打开文件窗口、通知、图标等）。

如今Github上也出现了很多使用Electron开发的开源项目，给开发者学习和参考，也有很多优秀客户端使用Electron开发的，比如：

官网也提供了很多应用项目
Apps Built on Electron

需要安装以下工具：
1.node
2.electron

在命令行中输入以下命令，即可安装electron

等待安装完成之后，在命令行输入electron -v能够显示版本号代表安装成功。

执行以下命令就可以运行最简单的electron工程

package.json是Node.js项目的配置文件，index.html是桌面应用的界面页面，main.js是应用的启动入口文件。

package.json 跟常规 Node 程序一致，将 main.js 作为 程序的启动入口文件，基本内容如下：

注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

index.html 作为我们的程序界面

最后运行结果如下：