如何创建一个简易的Electron桌面程序

 

1、安装程序运行环境

在使用 Electron 进行开发之前，您需要安装 Node.js。建议使用最新的LTS版本。 Node.js 的安装过程就不过多赘述了，只需安装提示安装完即可。

要检查 Node.js 是否正确安装，请在您的终端输入以下命令：

node -v
npm -v

这两个命令输出了 Node.js 和 npm 的版本信息时即表示环境安装成功了。

2、创建工程目录

新建名为 demo 的文件夹。

进入 demo 文件夹，打开命令窗口，输入 npm init -y 快速创建 package.json 文件。

执行 npm init -y 命令，在 demo 目录下自动生成 package.json 文件。

3、切换 npm 源

因为众所周知的原因，我们需要切换 npm 的当前源为cnpm。

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

或者选择另外一个镜像地址

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

查看 npm 的当前源

# 查看当前设置的源
npm config get registry

4、完善项目工程

用 vscode 编辑器打开 demo 文件夹，现在只有 package.json 一个文件，其自动生成的内容如下：

第一步：安装 Electron 的开发依赖。

执行 cnpm install electron -D 命令即可安装最新版的 electron。

第二步：创建入口文件 main.js。

因为任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

执行期间，Electron 将依据应用中 package.json 配置下 main 字段中配置的值查找此文件，所以我们创建 main.js 文件，并修改 package.json 配置文件中的入口文件名为 main.js。即将 "main" 对应的 "index.js" 改成 "main.js"：

{
  ...
  //"main": "index.js",
  "main": "main.js",
  ...
}

第三步：编辑入口文件。

运行程序就会创建一个宽高位 1200 * 800 的窗口。

// main.js

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

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  // 创建浏览器窗口。
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
  })
  
  // 加载 index.html
  mainWindow.loadFile('index.html')
})

第四步：创建页面。

在 main.js 文件中，可能你已经注意到了这行代码： mainWindow.loadFile('index.html') 。

在 Electron 中，各个窗口显示的内容可以是本地 HTML 文件，也可以是一个远程 url。这里我们采用本地 HTML 的方式，在工程的根目录下创建一个名为 index.html 的文件。

第五步：运行程序。

在 package.json 配置文件中的 "scripts" 加一个命令。

执行 npm run start 命令。

大功告成！！！至此，你已经成功创建并启动了一个 Electron 程序。