Electron构建桌面应用程序,服务于项目的自主学习记录(持续更新...

无所畏惧地面对未知,并将其视为成长的机会

  • 大纲
    • 官网
    • 快速入门
      • 1.安装node.js -- 这里推荐用nvm管理
      • 2.脚手架创建
      • 3.electron 包安装到应用的开发依赖
      • 4.创建主进程(main.js)并启动项目
        • 1.创建页面
        • 2.配置main.js
        • 3.启动项目 -- 效果
    • 进阶 -- 基于项目场景功能使用
      • 场景一:web交互打开文件系统
      • 场景二:区分开发和生产环境处理开发者工具
      • 持续更新...

大纲

官网

中文官网:https://www.electronjs.org/zh

快速入门

1.安装node.js – 这里推荐用nvm管理

一.nvm安装node方式以及可能出现问题的解决方案
1.window下安装并使用nvm
2.nvm安装及安装后node不能使用
3.node.js安装后在命令行输入“node -v ” 查看版本提示:‘node‘ 不是内部或外部命令,也不是可运行的程序的解决方法
4.检查node/npm是否正确安装 node -v && npm -v

2.脚手架创建

mkdir my-electron-app && cd my-electron-app
npm init

//npm init 后 package.json
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js",  //!!!main代表主进程文件,需要根据配置的新建主进程文件名(这里init会存在为index.js情况,手动改为main.js)"author": "Jane Doe","license": "MIT"
}

3.electron 包安装到应用的开发依赖

npm install --save-dev electron//package.json 修改
{"scripts": {"start": "electron ."}
}//首次启动 
//此时main.js主进程未创建,Electron应用在启动时找不到指定的入口文件,在package.json配置的main
npm start

main.js未创建启动错误

4.创建主进程(main.js)并启动项目

1.创建页面
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1></body>
</html>
2.配置main.js

新建main.js文件 此时 npm start 不会抛出异常

const { app, BrowserWindow } = require('electron')
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,show: false, //ready-to-show 解决闪烁autoHideMenuBar: true, // 隐藏顶部file menubackgroundColor: '#fff', //对于一个复杂的应用,ready-to-show 可能发出的太晚,会让应用感觉缓慢。 在这种情况下,建议立刻显示窗口,并使用接近应用程序背景的 backgroundColor})//优雅地显示窗口 -- 解决窗口闪烁问题win.once('ready-to-show', () => {win.show()win.webContents.openDevTools({ mode: 'detach' }) //开发者工具})win.loadFile('index.html') // 加载项目使用loadURLwin.maximize() //窗口最大化
}//在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件
app.whenReady().then(() => {createWindow()// 处理 macOS 特有的行为,提供一致的用户体验app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})//关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

加载嵌入项目

3.启动项目 – 效果

在这里插入图片描述

进阶 – 基于项目场景功能使用

场景一:web交互打开文件系统

// main.js 
const { app, BrowserWindow,dialog,ipcMain } = require('electron') 
// ipcMain 从主进程到渲染进程的异步通信
// dialog 显示用于打开和保存文件、警报等的!!本机系统!!对话框
const path = require('path')
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,show: false,backgroundColor: '#fff',autoHideMenuBar: true,webPreferences: {// 网页功能设置preload: path.join(__dirname, 'preload.js')// 在页面运行其他脚本之前预先加载指定的脚本}})win.once('ready-to-show', () => {win.show()win.webContents.openDevTools({ mode: 'detach' })})win.loadFile('index.html')//ipcMain,用于在主进程中处理渲染进程(即前端页面)发送的异步消息。具体来说,这个方法的作用是监听名为 dialog:openProject 的事件(preload.js发送),并在事件触发时执行指定的回调函数。ipcMain.handle('dialog:openProject', async () => {const { canceled, filePaths } = await dialog.showOpenDialog(win, {properties: ['openFile'],filters: [{ name: 'Project Files', extensions: ['db'] },]})if (canceled) {return} else {return filePaths[0]}})
}
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
// contextBridge 和 ipcRenderer 结合使用的主要目的是在 Electron 应用程序中实现安全的进程间通信(Inter-Process Communication, IPC)。
// contextBridge 用于在渲染进程和主进程之间安全地传递数据和函数
// ipcRenderer 用于在渲染进程中与主进程进行通信
const {contextBridge, ipcRenderer} = require('electron')
//exposeInMainWorld(key,api) -- 将api注入到window,web通过window.myAPI.selectProject于主进程通信
contextBridge.exposeInMainWorld('myAPI', {selectProject: () => ipcRenderer.invoke('dialog:openProject'), 
})

场景二:区分开发和生产环境处理开发者工具

win.once('ready-to-show', () => {win.show()if (!app.isPackaged) {console.log(`[main] open dev tools`)mainWindow.webContents.openDevTools({ mode: 'detach' })}
}

持续更新…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/55737.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java8新特性, 函数式编程及Stream流用法大全

用了多少年的java8了&#xff0c;Lambda表达式和stream流也经常用&#xff0c;但是也仅限于某些用法比较熟练&#xff0c;看见了 Function、Consumer 等函数式接口还是一脸懵逼&#xff0c;现在来全面总结一下java8这些新特性&#xff0c;也为自己后续查找做个备忘。如果你只是…

【C++】模板(初识):函数模板、类模板

本篇主要介绍C中的模板初阶的一些知识。模板分为函数模板和类模板&#xff0c;我们一个一个来看。 1.函数模板 1.1函数模板概念 函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实际的参数类型产生函数特定版本。…

Golang

Golang&#xff0c;通常被称为Go&#xff0c;是由Google开发的一种开源编程语言。它最早由Robert Griesemer、Rob Pike和Ken Thompson在2007年设计并于2009年发布。Golang的设计目标是提高编写简单、高效和并发程序的能力&#xff0c;因此非常适合用于构建高并发的网络服务、分…

滚雪球学MySQL[4.4讲]:数据库的性能调优详解

全文目录&#xff1a; 前言1. 数据库性能调优的重要性2. 数据库性能调优策略2.1 索引优化2.1.1 创建合适的索引示例&#xff1a;创建单列索引和联合索引 2.1.2 避免过度索引2.1.3 使用覆盖索引示例&#xff1a;覆盖索引 2.2 查询优化2.2.1 使用EXPLAIN分析查询示例&#xff1a;…

C++:图的最短路径问题

一、简介 在非网图中&#xff0c;最短路径是指两顶点之间经历的边数最少的路径。在网图中&#xff0c;最短路径是指两顶点之间经历的边上权值之和最少的路径。 路径上的第一个顶点称为源点&#xff0c;最后一个顶点称为终点。 最短路径问题是图的一个比较典型的应用问题。例如&…

QT 通过鼠标事件实现图片的拖动和缩放

通过鼠标拖动来移动图片&#xff0c;并使用鼠标滚轮来缩放图片。 1、实现步骤&#xff1a; 1、移动图片&#xff1a; 使用QPoint记录图片的偏移量&#xff0c;当鼠标拖动时更新这个偏移量&#xff0c;在paintEvent()中根据偏移量绘制图片。2、缩放图片&#xff1a; 使用滚轮…

人工智能平台 PAI-DSW内置通义灵码实操

人工智能平台 PAI&#xff08;Platform for AI&#xff0c;原机器学习平台PAI&#xff09;是 AI Native 的大模型与 AIGC 工程平台&#xff0c;提供包含数据集管理、算力管理、模型工具链、模型开发、模型训练、模型部署、AI资产管理在内的功能模块&#xff0c;内置100种大模型…

02_23 种设计模式之《抽象工厂模式》

文章目录 一、抽象工厂模式抽象工厂模式的结构应用场景 示例代码&#xff08;C&#xff09;注意事项 一、抽象工厂模式 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;隶属于设计模式中的创建型模式&#xff0c;用于产品族的构建。抽象工厂是指当有多个抽象角…

JVS·智能BI数据可视化图表:普通列表与分组列表配置全解析

使用场景 在可视化配置中&#xff0c;很多场景中需要图形和详细信息的融合展示&#xff0c;那么在图表中可以新增普通列表与分组列表的配置。如下图所示&#xff1a; 配置说明 1、新增组件&#xff1a;配置入口如下图所示&#xff0c;新增组件时&#xff0c;选择普通列表与分…

前端vue-配置请求拦截器

1.配置拦截器&#xff0c;记得20行的导出 2.响应拦截器&#xff0c;记得28行的导出 3.拦截器不止可以拦截&#xff0c;还可以添加内容

Custom C++ and CUDA Extensions - PyTorch

0. Abstract 经历了一波 pybind11 和 CUDA 编程 的学习, 接下来看一看 PyTorch 官方给的 C/CUDA 扩展的教程. 发现极其简单, 就是直接用 setuptools 导出 PyTorch C 版代码的 Python 接口就可以了. 所以, 本博客包含以下内容: LibTorch 初步;C Extension 例子; 1. LibTorch …

【分布式微服务云原生】探索Dubbo:接口定义语言的多样性与选择

目录 探索Dubbo&#xff1a;接口定义语言的多样性与选择引言Dubbo的接口定义语言&#xff08;IDL&#xff09;1. Java接口2. XML配置3. 注解4. Protobuf IDL 流程图&#xff1a;Dubbo服务定义流程表格&#xff1a;Dubbo IDL方式比较结论呼吁行动Excel表格&#xff1a;Dubbo IDL…

合并村庄生活废水处理设备工艺流程

诸城市鑫淼环保小编带大家了解一下合并村庄生活废水处理设备工艺流程 设备的构造 该填料采用优质PVC材料制成&#xff0c;是一种新型的折波填料&#xff0c;间距为30mm&#xff0c;比表面积超过400m/m&#xff0c;具有不易堵塞的特点&#xff0c;表面波纹设计便于膜的附着。 该…

CSS3--美若天仙!?

免责声明&#xff1a;本文仅做分享~ 目录 CSS引入方式 选择器 盒子尺寸和背景色 文字控制属性 单行文字 垂直居中 字体族 font复合属性 文本对齐方式 文本修饰线 color 文字颜色 ----- 复合选择器 伪类选择器 超链接伪类 CSS特性 继承性 层叠性 优先级 Emmet …

H、Happy Number(2024牛客国庆集训派对day7)

题目链接&#xff1a; H-Happy Number_2024牛客国庆集训派对day7 (nowcoder.com) 题目描述&#xff1a; 翻译为中文&#xff1a; 数据范围&#xff1a; 输入样例&#xff1a; 680 输出样例&#xff1a; 326623 分析: 本来以为是dfs&#xff0c;但是看到数据范围1e9, 联想到是…

通信工程学习:什么是三网融合

三网融合 三网融合&#xff0c;又称“三网合一”&#xff0c;是指电信网、广播电视网、互联网在高层业务应用上的深度融合。这一概念在近年来随着信息技术的快速发展而逐渐受到重视&#xff0c;并成为推动信息化社会建设的重要力量。以下是对三网融合的详细解释&#xff1a; 一…

go基础面试题汇总第一弹

init函数是什么时候执行的? init的函数的作用是什么&#xff1f; 通常作为程序执行前包的初始化&#xff0c;例如mysql redis 等中间件的初始化 init函数的执行顺序是怎样的&#xff1f; 分不同情况来回答&#xff1a; 在同一个go文件里面如果有多个init方法&#xff0c;它们…

扩展、包含、泛化-系统架构师(七十七)

1&#xff08;&#xff09;是系统分析阶段结束后得到的工作产品&#xff0c;&#xff08;&#xff09;是系统测试阶段完成后的工作产品。 问题1 A系统设计规格说明 B系统方案建议书 C系统规格说明 D单元测试数据 问题2 A验收测试计划 B测试标准 C系统测试计划 D操作手…

git fetch 和 git pull 的区别

git fetch 和 git pull 的区别 git fetch 功能&#xff1a;git fetch 用于从远程仓库获取最新的代码和提交信息&#xff0c;并将其保存到本地仓库的相应远程跟踪分支中&#xff0c;不会自动合并或修改当前的工作目录或当前分支。 合并&#xff1a;此命令不会自动合并获取的更新…

社团活动助手系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;活动分类管理&#xff0c;用户管理&#xff0c;社团活动管理&#xff0c;报名信息管理&#xff0c;签到登记管理&#xff0c;投票项目管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首…