02. Electron编写一个Hello World程序
目录
在第 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程序
码云笔记 » 02. Electron编写一个Hello World程序