Electron的第一个程序Hello World！

xiaohai 2021-05-11 12:23:54 共4910人围观 标签： Electron 
简介学习任何语言的第一个程序都是“Hello World！”，这里我们也遵循下，开启第一程序，Hello World！

前面我们介绍过Electron创建项目的三种方式，这里我们主要依照第一种方式创建了一个项目。下面我们就开始对index.html和main.js文件进行编写：

1、index.html文件

显然这就是一个html文件，用来显示的，所以这个页面我们只需要写上HTML内容，里面包含“Hello World！”即可，内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
</head>
<body>
    <div style='text-align:center;margin-top:159px;'>
    Hello World!
    </div>
</body>
</html>
2、main.js文件

main.js是Electron的主进程文件，这个文件非常关键，需要理解每一行代码表示的意义。

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

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

//创建窗口引用
var BrowserWindow = electron.BrowserWindow

//声明要打开的主窗口
var mainWindow = null
app.on('ready',()=>{
    //设置打开的窗口大小
    mainWindow = new BrowserWindow({width:800,height:400})

    //加载那个页面，这就是欠骂的index.html默认页面
    mainWindow.loadFile('index.html')

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})
3、运行项目
electron .

效果如下：
图片alt

以上我们就是实现了第一个程序“Hello World！”。

相同类型文章

热门标签

每日一句

    养生以不伤为本，积伤至尽则早亡。

    ——葛洪

今日排行

  • Git保存和清除用户名、密码

    在使用Git的过程中，不想每次都输入用户名和密码去拉取代码，所以就需要保存这些信息，那么既然有保存了，就必须有清除功能。

  • Flutter桌面应用实现只启动一次（单实例）

    很多时候我们只希望我们的应用只能启动一次，本文主要介绍下Flutter的windows桌面端如何实现只启动一次的方法。

  • OpenCV-Python边缘检测：Sobel、Scharr、Laplacian算子和Canny算子

    图像梯度计算的是图像变化的速度。对于图像的边缘部分，其灰度值变化较大，梯度值也较大；相反，对于图像中比较平滑的部分，其灰度值变化较小，相应的梯度值也较小。图像梯度计算需要求导数，但是图像梯度一般通过计算像素值的差来得到梯度的近似值（近似导数值）。本节主要介绍Sobel算子、Scharr算子、Laplacian算子和Canny算子的使用.

  • 有向图(Digraph)

    有向图根无向图的最大区别在于有向图是具有方向的，所以在实现上也会有很大的不同。

  • 安装Strapi出现错误certificate has expired

    安装strapi出现错误：error Error: certificate has expired，TypeError: Cannot read properties of undefined (reading 'addBreadcrumb')

点击排行

友情链接