02. Electron编写一个Hello World程序

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197121.html

全局安装 Electron
新建 index.html 文件
新建 main.js 文件
创建 package.json 文件

在第 01 节中我们已经搭建好了 Electron 的开发环境，接下来就写一个 Electron 最简单的Hello World程序，这也是每个开发者学习的第一个程序。有的下伙伴说把 Electron 安装到项目中太麻烦了，可不可以安装到全局变量，那答案是肯定的。

全局安装 Electron

npm install -g electron

如果安装失败，你可以多安装两遍，也可以使用 cnpm 来进行安装。

新建 index.html 文件

新建一个文件夹，比如叫ElectronDemo01.

在项目的根目录中新建一个index.html文件，然后编写如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    Hello World
</body>
</html>

新建 main.js 文件

在根目录下新建一个main.js文件，这个就是 Electron 的主进程文件。代码如下：

var electron = require('electron'); // 引入 electron 模块

var app = electron.app; // 创建 electron 引用

var BrowserWindow = electron.BrowserWindow; // 控制窗口引用

var mainWindow = null; // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({width:500,height:500}); // 设置打开的窗口大小
    mainWindow.loadFile('index.html'); // 加载 HTML 页面
    // 监听关闭事件，把主窗口设置为 null
    mainWindow.on('closed', () => {
        mainWindow = null;
    })
})

创建 package.json 文件

写完后直接使用npm init --yes（–yes 表示默认安装什么东西都是同意）来初始化package.json文件，文件生成后如下：

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

讲到这里，可能有的小伙伴要问了，为什么要后生成 package.json 文件呢？假如我们先生成 package.json 文件，那么”main”里面的文件就是默认的 index.js 文件。如果我们的本地有一个 main.js 文件，后生成就会让 main.js 作为我们的 main。

接下来你就可以打开终端，在终端里输入electron .就可以打开窗口了。

本文内容就先到这里，希望小伙伴们可以练习一下，跟着写一个Hello World的程序出来吧。

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/