electron环境搭建和使用

最新推荐文章于 2024-04-23 13:55:08 发布

小周sir的码农

最新推荐文章于 2024-04-23 13:55:08 发布

阅读量302

点赞数 1

分类专栏： Electron

本文链接：https://blog.csdn.net/Govern66/article/details/104305236

版权

Electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Electron 是由 Github开发的开源框架
它允许开发者使用Web技术构建跨平台的桌面应用
Electron = Chromium + Node.js + Native API

首先要先去安装node环境

+ 官网地址：https://nodejs.org/zh-cn/

接下来开始安装Electron

 cnpm install -g electron

这里已经要使用cnpm安装，如果想用npm安装会特别慢，除非翻墙

初始化一个项目

在你的桌面新建一个文件

创建一个html文件

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    你好
</body>

</html>

创建一个js文件

const electron = require('electron') //引入electron模块
var app = electron.app //创建electron引用
var BrowserWindow = electron.BrowserWindow; //创建窗口引用

var mainWindow = null; //声明要打开的主窗口
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 900,
        height: 900
    }) //设置窗口的大小
    mainWindow.loadFile('index.html'); //要加载的文件

    //监听关闭事件，在把主窗口设置位null

    mainWindow.on('closed', () => {
        mainWindow = null;
    })
})

写完后直接使用npm init --yes来初始化package.json文件

运行项目

直接在控制台输入

	electron .

就可以打开了
在这里插入图片描述
已经就是electron环境搭建和使用

小周sir的码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron环境搭建和使用

Electron 是由 Github开发的开源框架它允许开发者使用Web技术构建跨平台的桌面应用Electron = Chromium + Node.js + Native API首先要先去安装node环境+ 官网地址：https://nodejs.org/zh-cn/接下来开始安装Electron cnpm install -g electron这里已经要使用cnpm安装，...
复制链接

扫一扫