Electron01--简介和超级详细的安装过程

最近在开发一个项目组内部用的接口自动化测试工具，考虑到生产环境无法连接外网，而且这个工具最好是不需要部署到额外的服务器，即装即用的。所以搜索了一下有什么可以方便快捷开发跨平台桌面应用程序的办法，发现了Electron这个强大的开源库。最近还在学习，遇到了一些坑，所以决定把学习到的内容和遇到的坑及其解决办法记录下来。

 

1.Electron简介

Electron是由Github开发，使用HTML，CSS，JS来构建跨平台桌面应用程序的一个开源库。

Electron通过Chromium和Node.js合并到同一个运行时环境中，可打包成Mac、Windows、Linux下的客户端应用。

 

2. Electron学习相关网站

Electron官网：https://electronjs.org

Electron官方API文档：http://electronjs.org/docs/api

ElectronGithub地址：https://github.com/electron/electron

Electron中文教程：https://www.w3cschool.cn/electronmanual/p9al1qkx.html

 

3.Electron环境搭建

3.1 下载安装nodejs

下载地址：https://nodejs.org/en/download/，安装默认安装即可

3.2 下载Electron相关依赖

新建一个工程目录文件夹，打开cmd，进入工程目录（我的工程目录是E:\学习\code\Electron）

cd E:\学习\code\Electron
E:

输入指令初始化工程：

npm init -y

回车后会返回如下指令：

Wrote to E:\学习\code\Electron\package.json:

{
  "name": "Electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 此时，工程文件夹下会自动生成一个package.json文件

创建一个index.js文件，可以直接在工程目录右键创建也可以在cmd用如下指令：

type null>index.js

安装electron依赖

npm install electron --save-dev

 注意，这里可能会遇到一个坑，就是一直卡在node install.js这里不动。原因很简单，就是访问的electron源被墙了，需要添加国内镜像。修改npmrc（我的文件路径是C:\Program Files\nodejs\node_modules\npm\npmrc，实在找不到的同学可以安装一个everything之类的文件搜索工具。搜索一下关键词“node_modules\npm\npmrc”），添加以下语句：

registry=https://registry.npm.taobao.org
electron_mirror="https://npm.taobao.org/mirrors/electron/"

这一步解决之后，又遇到了第二个坑：

我试着解压提示中的压缩包，发现压缩包损坏了。所以我估计淘宝镜像上最新版本的electron包有问题，于是换一个版本下载，安装成功了。

npm install electron@^6.0.1 -g

但是从上面的输出语句看，它安装到了C盘下，所以我们把electron这个文件夹拷到我们工程目录的node_modules下即可。

接下来安装electron-packager（用于打包）

npm install electron-packager --save-dev 

安装完成后，工程目录如下：

 

4. 编写测试程序

废了老半天，终于把环境搭建好了，激动地搓手手，开始写代码。

打开package.json文件，在"test": "echo \"Error: no test specified\" && exit 1"下面添加一行"start": "electron ."

{
  "name": "Electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." //这行是新加的
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^7.1.2"
  }
}

然后打开index.js写入口测试程序

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

let win = null;
app.on('ready', () => {
    win = new BrowserWindow({
        width: 800, height: 600
    });
    win.loadURL("https://www.baidu.com")
})

在cmd命令行运行

npm start

弹出我们熟悉得不能再熟悉的百度首页，一瞬间为自己的成功感动得热泪盈眶o(╥﹏╥)o