快速了解Electron
了解Electron桌面端开发
🚀🚀首发:碰磕Study，分享自己的学习日志
🌧🌧💧小雨
✊✊学无止境
📅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
})
})
- 初始化项目(npm init --yes)会生成package.json
- 运行
- electron .
这样就实现了第一个Electron程序了~😁😁😁
