当前位置: 首页 > news >正文

一、Electron 环境初步搭建

新建一个文件夹,然后进行 npm init -y 进行初始化,然后我们在进行 npm i electron --save-dev   , 此时我们按照官网的教程进行一个初步的搭建,

  • 1.在 package.json 文件进行修改
{"name": "electron-ui","version": "1.0.0","description": "electron app!","main": "main.js","author": "He Ming","license": "ISC","scripts": {"start": "electron ."},"devDependencies": {"electron": "^30.1.0"}
}
  • 新建 main.js  文件

在 main.js 文件中我们需要进行初步搭建 

  •  引入 electron 
const { app, BrowserWindow } = require('electron')
  • 创建启动执行之后的窗口

在创建启动执行窗口我们需要进行搭建,

whenReady:返回的是一个 Promise 我们在then里面进行窗口实例创建 

loadFile : 窗口加载页面

on: 监听窗口关闭事件

     生命周期事件

app.whenReady().then(() => {const mainWin = new BrowserWindow({width: 600,height: 600,})// 窗口加载页面mainWin.loadFile('index.html')// 监听窗口mainWin.on('closed', () => {// mainWin = null})
})
  • 监听所有窗口都关闭

此次监听窗口关闭的是所有的窗口关闭事件,

// 监听所有窗口都关闭
app.on('window-all-closed', () => {// macOS 下,当关闭所有窗口时,应用不会退出if (process.platform !== 'darwin') {// 调用退出事件app.quit()}
})

完整代码 

  •  mian.js
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})
  •   preload.js
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}
})
  • 新建 index.html  文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面应用</title>
</head><body><h1>桌面级应用</h1>
</body></html>

http://www.lryc.cn/news/365809.html

相关文章:

  • ffmpeg编码器编码元数据的过程以及编码前后的差异
  • AB测试学习(附有相关代码)
  • 用idea将java文件打成jar包
  • Ansible——group模块
  • Sql注入-报错注入
  • pyqt 回车触发两次editingFinished的解决办法
  • 爬取股票数据python
  • 每日新闻掌握【2024年6月4日 星期二】
  • 智谱AI 发布最新开源模型GLM-4-9B,通用能力超Llama-3-8B,多模态版本比肩GPT-4V
  • 从写简历到谈薪资的最全教程
  • Vue3 响应式API:高级函数(二)
  • 『大模型笔记』什么是提示词注入(Prompt Injection)攻击?
  • SD-WAN与IPSec的对比
  • Ceph入门到精通-ceph经典盘符飘逸问题处理步骤
  • 【CV算法工程师必看】作为一个图像算法工程师,需要会什么,要学哪些技术栈?
  • 【造化弄人:计算机系大学生真的象当年的高速公路收费员一样吗?】
  • 民主测评要做些什么?
  • JimuReport 积木报表 v1.7.5 版本发布,免费的低代码报表
  • Ubuntu安装Protobuf
  • 揭秘Lazada API:掌握数据驱动的电商帝国,轻松实现销售飞跃
  • ThinkPHP发邮件配置教程?群发功能安全吗?
  • 编译和安装OpenMediaVault(OMV)NAS
  • Java【问题 07】SSH不同版本使用jsch问题处理(7.4升级9.7及欧拉原生8.8)
  • k8s和deepflow部署与测试
  • matlab使用教程(92)—流线图、流带图和流管图
  • 全网最全!场外个股期权的询价下单流程的详细解析
  • linux 如何解压 zip
  • 【ubuntu】增加samba服务和文件夹
  • vue3中作用域插槽
  • Vuforia AR篇(六)— Mid Air 半空识别