码云 02. Electron编写一个Hello World程序
AI 概述
全局安装 Electron新建 index.html 文件新建 main.js 文件创建 package.json 文件
在第 01 节中我们已经搭建好了 Electron 的开发环境，接下来就写一个 Electron 最简单的Hello World程序，这也是每个开发者学习的第一个程序。有的下伙伴说把 Electron 安装到项目中太麻烦了，可不可以安装到全局变量，...
目录
在第 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的程序出来吧。
以上关于02. Electron编写一个Hello World程序的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 [email protected] 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 02. Electron编写一个Hello World程序
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 [email protected] 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 02. Electron编写一个Hello World程序
