Electron桌面端开发(快速了解并编写第一个程序)

最新推荐文章于 2024-07-19 14:53:38 发布

碰磕

最新推荐文章于 2024-07-19 14:53:38 发布

阅读量1.1k

点赞数 1

分类专栏： Electron 文章标签： electron 前端 npm

本文链接：https://blog.csdn.net/m_xiaozhilei/article/details/125115304

版权

Electron 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

快速了解Electron

了解Electron桌面端开发

了解Electron桌面端开发

🚀🚀首发:CSDN碰磕，分享自己的学习日志

🌧🌧💧小雨

✊✊学无止境

📅2022/6/3
端午节快乐🤨

前言

Electron桌面端开发是通过web技术写UI
本人笔记推荐会nodejs的进行学习
本教程Electron版本为7.1.7（版本更新太快导致东西变更多，所以指定版本进行学习）

安装

这里我使用npm进行安装

# 开发环境安装
npm  install electron --save-dev

查看是否安装成功

npx electron -v

初始化项目

推荐编写完主js文件再进行初始化

npm init --yes

运行

electron .

📅编写第一个Electron程序

首先编写一个helloworld界面

<!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>第一次</title>
</head>
<body>
    <h1>第一次</h1>
</body>
</html>

编写项目入口(主进程)

var electron =require('electron')//导入

var app=electron.app;//引用app
var BrowserWindow=electron.BrowserWindow;//引用窗口
var mainWindow=null //声明要打开的窗口

app.on('ready',()=>{
    mainWindow=new BrowserWindow({width:300,height:300})//初始化主窗口
    mainWindow.loadFile('./helloworld.html')//加载网页在窗口上
    mainWindow.on('closed',()=>{ //监听关闭事件
        mainWindow=null
    })
})