Electron：初体验

最新推荐文章于 2024-08-02 21:33:58 发布

Cynhard85

最新推荐文章于 2024-08-02 21:33:58 发布

阅读量1.7k

点赞数 1

分类专栏： Electron 文章标签： Electron node.js 入门环境搭建打包

本文链接：https://blog.csdn.net/u011304970/article/details/78365235

版权

Electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装

安装 Node.js

下载 Node.js，本例下载的版本是 node-v6.11.5-x64.msi
安装 Node.js
- 双击运行 [node-v6.11.5-x64.msi]：
- 点击 [Next]：
- 勾选 [I accept the terms in the License Agreement]，点击 [Next]：
- 选择合适的安装路径后，点击 [Next]：
- 点击 [Next]：
- 点击 [Install] 开始安装：
- 安装完成：
- 点击 [Finish] 退出安装程序。
验证安装
- 检测系统的环境变量里是否包含了 Node.js 的安装目录，以及 JavaScript 的包管理工具 [npm] 的安装目录。打开命令行，输入 path：
```
> path
PATH=...
C:\Program Files\nodejs\;
...
C:\Users\LiuXinyang\AppData\Roaming\npm
```
- 验证 Node.js 安装，在命令行中输入node -v:
```
> node -v
v6.11.5
```
- 验证 npm 安装，在命令行中输入 npm -v:
```
> npm -v
3.10.10
```

安装 Electron

切换 npm 的源为淘宝的 cnpm 源：

> npm config set registry https://registry.npm.taobao.org/
> npm config set electron_mirror http://npm.taobao.org/mirrors/electron/

安装 Electron，安装好后会在 [npm目录]\node_modules 目录下找到 electron 目录。
```
> npm install -g electron
```
验证安装：
```
> electron -v
v1.7.9
```
安装 Electron 打包工具，安装好后会在 [npm目录]\node_modules 目录下找到 electron-packager 目录。
```
> npm install -g electron-packager
```

主进程与渲染进程

由于 Electron 是基于 Chrome 的，因此也沿用了 Chrome 的多进程方式，其中包括两个进程，一个是主进程，一个是渲染进程。主进程用来创建窗口，显示Web页面，管理其他进程。而渲染进程专门用来渲染页面。
由于在Web页面里调用本地GUI是不允许的，因此如果想要在Web页面里进行GUI操作，必须通过 IPC 通知主进程来完成。

第一个 Electron 应用

新建如下目录结构：

[myapp]
    |- package.json      -- 用来配置 App
    |- main.js           -- 用来创建窗口以及处理GUI事件，运行在主进程
    |- index.html        -- 用来展现GUI，运行在渲染进程

打开 package.json，编写如下内容：

$\underline{package.json}$

{
    "name"      : "helloworld",
    "version"   : "0.0.1",
    "main"      : "main.js"
}

main.js 如下（来自 https://segmentfault.com/a/1190000005363765）：

$\underline{main.js}$

const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;

// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;

function createWindow() {
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 并且装载应用的index.html页面
  win.loadURL(`file://${__dirname}/index.html`);

  // 打开开发工具页面
  win.webContents.openDevTools();

  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
}

// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);

// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
  // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});

// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。

index.html 内容如下（来自官网）：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

运行

打开命令行，切换到 [myapp] 目录下，输入 electron .：

> electron .

运行结果如下：

这里写图片描述

打包

打开命令行，切换到 [myapp] 目录，执行如下命令。注意 electron-version 要与实际使用的版本保持一致。

> electron-packager . helloworld --platform=win32 --arch=x64 --electron-version=1.7.9

打包完成后，会在当前目录下生成 helloworld-win32-x64子目录，该目录下放置了运行时需要的一切

Cynhard85

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Electron：初体验

安装安装 Node.js下载 Node.js，本例下载的版本是 node-v6.11.5-x64.msi安装 Node.js 双击运行 [node-v6.11.5-x64.msi]：点击 [Next]：勾选 [I accept the terms in the License Agreement]，点击 [Next]：选择合适的安装路径后，点击 [Next]：点击 [Next]：点击
复制链接

扫一扫

专栏目录