02. Electron编写一个Hello World程序

目录
文章目录隐藏
  1. 全局安装 Electron
  2. 新建 index.html 文件
  3. 新建 main.js 文件
  4. 创建 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 .就可以打开窗口了。

Electron 编写一个 Hello World 程序

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 02. Electron编写一个Hello World程序

发表回复