Electron构件自己的第一个应用HelloWorld!(二)

最新推荐文章于 2022-12-15 12:10:51 发布

单片佬

最新推荐文章于 2022-12-15 12:10:51 发布

阅读量357

点赞数

分类专栏： electron

本文链接：https://blog.csdn.net/qq_27627195/article/details/99760081

版权

electron 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Electron构建自己的第一个应用HelloWorld!

参考官方文档

参考官方文档：构建自己的第一个应用。
可下载官方例子并试运行（需要预先安装Git）如下：

# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start

手动搭建第一个最简单的项目。

推荐安装 VS Code (https://code.visualstudio.com/)。后续教程也只用vsCode，可按自己喜欢安装对应的编辑器。

1、新建一个文件夹（文件夹的路径均不能有中文）。

进入到对应的文件夹中。

2、新建一个`index.html` 与一个 `main.js`文件。

在这里插入图片描述

3、在index.html中写入对应HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    Hello World!
	</br>
	Flying.
</body>
</html>

4、在main.js中写入对应JS代码。

//引入electron中app与BrowserWindow模块
const {app,BrowserWindow} = require('electron');

//nodejs中的path模块
const path = require('path');


//保存对应用窗口的引用
var mainWindow=null;

//监听app启动信号
app.on('ready',function(){
    
    //创建BrowserWindow的实例 赋值给mainWindow打开窗口   
    //软件默认打开的宽度高度 {width:400,height:400}
    mainWindow=new BrowserWindow({width:800,height:600}); 

    // mainWindow.loadFile('index.html');   /*把index.html加载到窗口里面*/
	
	//比较规范
    mainWindow.loadURL(path.join('file:',__dirname,'index.html'));

	//监听窗口关闭事件清除窗口资源
    mainWindow.on('closed',()=>{
        mainWindow=null;
    })    
})

5、打开终端并进入到对应的目录中

可直接在资源管理器当前的路径下直接输入cmd并回车。

6、利用cnpm生成package.json

1.在终端中输入cnpm init。
2. 配置选项可自行选择输入，最后输入yes即可。
在这里插入图片描述

7、运行程序

在终端中输入electron .可看到对应效果如下：

单片佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron构件自己的第一个应用HelloWorld!(二)

Electron构建自己的第一个应用HelloWorld!参考官方文档手动搭建第一个最简单的项目。1、新建一个文件夹（文件夹的路径均不能有中文）。2、新建一个``index.html`` 与一个 ``main.js``文件。3、在index.html中写入对应HTML代码。4、在main.js中写入对应JS代码。5、打开终端并进入到对应的目录中6、利用cnpm生成package.json7、运行...
复制链接

扫一扫