关于 Electron

柔光的暖阳◎ 2022-11-05 03:13 97阅读 0赞

### 文章目录 ###

*   *  关于 Electron
     *   *  技术架构
         *  安装
         *   *  Node.js
             *  Electron.js
             *  构建完整工程系统
         *  输出

## 关于 Electron ##

关于 Electron 的介绍，可以参考它的官网 [Electron Website][] 。官网是中文的，讲的已经很详细了。

这里主要说一下它的工作形式：

它的主要作用是将桌面级应用的开发简单化，并且希望能做到像 Java 一样，能够无视系统的区别让开发专注于自己的事情。这里它承担了程序和操作系统的沟通，前端开发简单的归纳为网页开发，通过将 chrome 内核集成进来，实现最终的 UI 显示，涉及到系统层面的开发则是通过自己内置的核心包，提供 API。

不过它的局限性也是显而易见的，自己提供的 API 封装，功能层面很难做到面面俱到。所以如果涉及到过多的系统层面的调用就会很难受，不如使用原生的语言来的方便。好处也很明显，那就是对于前端的开发技术限制小了很多，可以自由发挥自己的能力。

### 技术架构 ###

如果你想要开始开发一个简单易用的桌面级应用，并且对于原生的开发语言没有足够的了解，那 Electron 就是你很不错的一个选择。前端的开发语言你可以自己选一个比较上手的，最后将 Electron 集成进去就行。

### 安装 ###

#### Node.js ####

首先得有 Nodejs 的环境

#### Electron.js ####

下载核心依赖包

#### 构建完整工程系统 ####

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

main.js 中存放主要的启动配置内容

index.html 是启动加载页，这个可以在 main.js 中进行配置，如果是其他语言开发的可以将入口文件进行替换

package.json 这个是 node 项目的包管理文件，相关配置可以查看 node 的相关资料了解

### 输出 ###

软件制作完成，最后需要做封包的操作，生成一个桌面应用程序的样子。

官方推荐的是 [Electron Forge][] 这个插件，通过它可以通过简单的命令操作输出不同版本的应用版本。

"scripts": { 
        "package:mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub' --extend-info=assets/mac/info.plist",
        "package:win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico",
        "package:linux": "electron-packager . --overwrite --platform=linux --arch=x64 --out=out"
      }

可以像这样集成在系统脚本中，方便使用。

具体的方法都是可以参考官方给出的模板应用 [electron-api-demos][] ，基本的用法都已经写在里面了。

[Electron Website]: http://electronjs.org
[Electron Forge]: https://www.electronforge.io/
[electron-api-demos]: https://github.com/electron/electron-api-demos/releases