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 .就可以打开窗口了。

Electron编写一个Hello World程序

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

「点点赞赏,手留余香」

0

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

微信微信 支付宝支付宝

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

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

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们