系列文章

二、如何使用Electron

2.1 搭建开发环境

要想使用Electron，首先，需要有Node.js。安装Node.js的方法有很多。最容易想到的办法就是去其官网：https://nodejs.org/en/ 直接下载对应平台的安装包。其实，我们有更好的选择，那就是使用nvm来安装Node.js。为什么不直接安装Node.js呢？那是因为Node.js的版本非常多，而且更新频繁。如果直接使用官方的安装包安装，经常需要升级不说，多个版本之前切换会比较麻烦。nvm就是针对这种情况而设计的一个工具，其全称就是node version manager，非常直白，就是node.js的版本管理工具。有了它，妈妈再也不担心我在node.js的各个版本中的灵活走位了。不仅可以使用多个稳定版本做开发，同时还能用最新版本来学习和实验。

2.1.1 nvm的使用

在Linux和MacOS下，可以使用下面的命令，安装nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

如果是Windows，可以使用https://github.com/coreybutler/nvm-windows/releases提供的安装程序。下载安装完成nvm后，要想愉快的使用，最好设置一下国内的镜像源。

Linux和MacOS下可以使用命令：

export node_mirror=http://npmmirror.com/mirrors/node/

Windows下需要设置环境变量，具体方法使用搜索引擎搜一下即可，临时使用，也可以在命令行中使用下面的命令。

set node_mirror=http://npmmirror.com/mirrors/node/

接下来使用下面的命令即可安装最新版本的node.js了。

nvm install

如果安装指定版本的node.js，可以使用命令

nvm install 16.13.0

如果你安装了多个判断，可以使用下面的命令查询：

nvm ls

image-20240602022857737

如果想切换node.js版本，可以使用下面的命令

node use 16.13.0

如果想查询当前有哪些可以安装的node.js版本，可以使用下面的命令：

nvm ls-remote

如果想卸载某个版本node.js，也很简单，一个命令即可：

nvm uninstall 16.13.0

如果某个版本的node.js用的比较多，可以讲其设置为默认版本：

nvm alias default v16.13.0

2.1.2 npm的使用

npm是Node.js自带的包管理工具。在Node.js中，存在上百万个软件包，正是这些包的存在，才大大提高了我们编写软件的效率。

安装某个包可以使用命令，

npm install 包名称

npm会自动从仓库中下载并安装对应的软件包，同时还会安装依赖的软件包。

当然，和nvm一样，为了愉快的使用npm，设置镜像源也是必不可少的步骤。国内的镜像源比较多，常用的有：

使用下面的命令，即可让镜像源生效：

npm config set registry https://registry.npmmirror.com/

如果只是想临时使用，也可以：

npm install 包名称 --registry https://registry.npmmirror.com/

如果想指定包的版本可以使用命令：

npm install 包名称@包版本

通常，我们并不是直接使用npm来安装某个包。因为大多数情况下，包都是安装在本地的某个项目的目录里面的。所以，往往会有一个名为package.json的文件来记录当前项目安装了哪些包。为了创建package.json文件，我们需要在项目的根目录执行命令：

npm init

在执行过程中，会询问名称、版本号、描述等等各种信息。你可以输入，也可以简单的直接按回车使用默认值。这些值都可以在package.json文件中修改。当然，可以用一个简化的命令

npm init --yes

跳过这些询问，如下。

image-20240602030201944

有些包，想当成命令行使用。那就需要，将这个包安装成全局包。例如vue-cli。执行一下命令即可：

npm install -g @vue/cli

如你所见，多了一个-g命令。这样安装到包是安装到全局，而不是项目本地目录。可以作为全局命令来使用。

卸载某个包也容易，只需要使用uninstall命令即可。

npm uninstall 包名称
npm uninstall -g 包名称

同样的带有-g参数的是针对全局包的命令。

更新某个包，可以使用update命令。

npm update 包名称
npm update -g 包名称

在 package.json 文件所在的目录中，无论是install还是update，都可以省略包名称，达到批量安装或更新包。

2.1.3 安装Electron

有了上面的基础，安装electron就容易。首先，我们需要知道的是，electron是一个本地包，不是全局的。不同的项目可以使用不同版本的electron。所以，我们需要依次执行下面的命令：

# 创建项目目录
mkdir demo
# 进入项目目录
cd demo
# 创建package.json文件
npm init --yes
# 安装electron
npm install electron --save-dev

这儿，我们遇到一个新的npm参数—--save-dev，这个参数的用途是，把这个包安装成开发依赖包。换句话说，我们这儿要安装的包仅仅在开发过程中需要。

如果你想安装指定版本的electron，可以在安装时带上版本号。例如:

npm install electron@17.3.1 --save-dev

需要注意的是，安装electron的耗时可能会比较久。因为安装electron的过程中还是安装几十个依赖的包。

到这一步，electron就已经安装好了。通过package.json可以可以看到安装的版本：

image-20240602032341284

2.2 Electron版本的helloworld

在上一节中，我们已经安装好了Electron。但是，还不能运行起来。因为我们还没有写代码。为了让electron运行起来，我们至少需要写两个文件，一个是index.js，这是electron程序的入口脚本。另一个是index.html，也就是electron程序的界面部分。这两个文件的内容都比较简单，分别如下：
index.js的内容如下：

// index.js
const { app, BrowserWindow } = require("electron");

app.whenReady().then(()=>{
    const win = new BrowserWindow()
    win.loadFile("./index.html")
})

代码比较简单。首先，从electron包中，导出app和BrowserWindow这两个类。其中，app用于控制应用程序的事件生命周期。BrowserWindow用来创建并控制浏览器窗口。

然后，就是当程序初始化安装后，创建一个窗口。

最后，在这个窗口中加载index.html这个网页。

index.html的内容如下：

<!DOCTYPE html>
<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        hello world!
    </body>
</html>

这个文件是最简单的静态网页，就不做说明了。

为了运行起来，我们还需要在package.json的scripts中新增一个start命令。

package.json的完整内容如下：

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./index.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": "",
  "devDependencies": {
    "electron": "^30.0.9"
  }
}

接来下，就可以执行下面的命令，让这个最简单的electron程序运行起来了：

npm run start

不出意外的话，你将会看到下面的窗口：

image-20240602034242581

这个窗口就是我们写的electron的helloworld程序了，是不是很简单呢。当然，这个程序非常简单，也没有任何意义。但是，它让我们了解了如何从零创建一个Electron程序。接下来，我们会一步一步地探讨，如果使用Electron构建一个功能完善的应用程序。

系列文章