electron入门学习

一、Electron介绍

Electron 提供了丰富的本地（操作系统）的API，是一个基于 Chromium 和 Node.js，使你能够使用 HTML、CSS和 JavaScript 来创建桌面应用程序，兼容 Mac、Windows 和 Linux。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。目前，Electron 已经创建了包括 VScode 和 Atom 在内的大量应用

二、学习前提(相关文档)

【2.1】学习前提

JavaScript：Electron是一个能够让你使用 JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识

webpack：最强构建工具，没有之一，了解webpack，你才能更好编写项目配置。

node： electron是搭载谷歌v8内核的高性能的node环境，所有node能用的东西，我们都能用

【2.2】官方文档

三、一个简单的demo

【3.1】准备工作

新建一个空文件夹用于创建项目，如下我在E盘创建了一个名为electron_demo的文件夹，使用终端进入文件夹，使用npm init 命令初始化一个package.json文件，设置入口文件为main.js

【3.2】安装electron

npm install electron --save-dev

【3.3】项目根目录新建main.js文件（入口文件）

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

【3.4】项目根目录新建index.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello Electron</h1>
</body>
</html>

【3.5】在package.json文件中配置electron命令

"scripts": {
    "start": "electron .",
}

【3.6】执行命令 npm run start 就可以运行了

【3.7】运行效果

我们在main.js文件中配置了默认打开开发者工具，运行效果如下

四、打包

到目前为止，生成了一个非常简单的demo，但是作为一个桌面应用程序，我们不应该通过运行命令来启动它，而是直接点击exe文件进行运行。因此用到了electron-packager插件

【4.1】安装electron-packager

npm install -g electron-packager

【4.2】在package.json文件中配置打包命令

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=10.1.3"
}

打包命令代码解释：

. 需要打包的应用目录（**. **代表当前目录）

**myFirstElectron **应用名称

**–win **打包平台（windows平台）

**--out ./dist **输出目录

**–arch=x64 **64位

**–app-version=0.0.1 **应用版本

**–electron-version=10.1.3 **electron版本

【4.3】执行打包命令 npm run pack

【4.4】在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行

五、electron项目和web项目的区别

electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把它看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的，而electron相当于node环境，我们可以在项目里使用所有的node api 。简单理解为给web项目套上一个node环境的壳。

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料