h5免费建站,建一个公司网站多少钱?,有经验的江苏网站建设,开发网站年度工作总结及明年工作计划本文章主要为该视频的学习笔记#xff0c;如果侵权会速删。
Electron 01 课程介绍_哔哩哔哩_bilibiliElectron 01 课程介绍, 视频播放量 3046、弹幕量 0、点赞数 75、投硬币枚数 43、收藏人数 179、转发人数 2, 视频作者 极客丶张德龙, 作者简介 当你的能力还不足以撑起自己的… 本文章主要为该视频的学习笔记如果侵权会速删。
Electron 01 课程介绍_哔哩哔哩_bilibiliElectron 01 课程介绍, 视频播放量 3046、弹幕量 0、点赞数 75、投硬币枚数 43、收藏人数 179、转发人数 2, 视频作者 极客丶张德龙, 作者简介 当你的能力还不足以撑起自己的野心时你就需要静下心来好好学习。【内卷俱乐部339585580】相关视频Electron 02 开发环境Electron 05 进程通信Electron 04 进程模型Electron 08 Tray 托盘Electron 13 多窗口MUI 01 课程介绍Electron 09 Notification 通知Electron 11 dialog 对话框Electron 12 online 在线状态Electron 06 Dark Modehttps://www.bilibili.com/video/BV1if421f7fz/?spm_id_from333.1007.top_right_bar_window_history.content.click 一、入门
1.简介
1简介
Electron是一个使用 HTML、CSS 和JavaScript 构建跨平台桌面应用程序的框架 前端技术Electron 嵌入了 Chromium 和 Node.js使Web 开发人员能够创建桌面应用程序。跨平台Electron应用程序与 macOS、Windows 和Linux 兼容可在所有支持的架构的三个平台上运行。开源Electron 是一个开源项目由 OpenJS 基金会和一个活跃的贡献者社区维护。 2Electron 功能
负责处理困难的部分让桌面开发变得简单因此可以专注于应用程序的核心 3Electron 生态
选择集成您最喜欢的前端生态系统库和框架或者使用定制的 HTML代码开辟自己的道路Electron Packager、Electron Builder、Electron Forge、 Electron Fiddle. 4Electron 案例
VisualStudio Code、Postman、ApiFox、HyperMongoDB Compass、Another Redis Desktop ManagerMicrosoft Teams、GitHub Desktop、FigmaQONT、WhatsApp、Skype支付宝小程序IDE、迅雷下载、有道笔记 学习条件 ★掌握: HTML、CSS、JavaScript ☆ 了解: Node.js 基本语法 ☆熟悉: 客户端软件基本使用及交互方式 2.开发环境
Node.js nvm
查看本机已装版本列表:nvmlist查看当前可用版本列表:nvmlist available安装指定版本:nvminstall版本切换指定版本:nvm use版本卸载指定版本:nvm uninstall版本 3.上手案例 Hello Electron
1Quick Start
克隆仓库:git clone https://github.com/electron/electron-quick-start 进入项目:cd electron-quick-start 安装依赖:npminstall 启动应用:npm run start 2 Electron Forge
npm 方式
npm init electron-app namenpx create-electron-app namenpm run start
yarn 方式
yarn create electron-app nameyarn start 3初始项目: ·npm init ·yarn init
安装依赖: ·npm install electron --save-dev ·yarn add electron --dev
创建页面:index.html程序入口:main.js启动应用:npmrun start 二、 API接口
1进程模型
·进程模型
主进程 Main Process渲染进程 Renderer Process
·预加载脚本
preload
·上下文隔离
contextlsolationcontextBridge 1. 进程模型
·主进程 Main Process
特点: 程序入口、唯一职责: 负责控制、协调、Node.js API事件: 创建窗口、设置菜单、注册快捷键等系统级销毁: 应用结束 ·渲染进程 Renderer Process
特点: 与 BrowserWindow打开窗口 对应、彼此隔离职责: 渲染页面无权访问 Node.jS API事件: 窗口的显示、隐藏等销毁: 窗口销毁 2. 预加载脚本
预加载(preload)脚本包含了那些执行于渲染器进程中且先于网页内容开始加载的代码这些脚本虽运行于渲染器的环境中却因能访问 Node.js API 而拥有了更多的权限。 3.上下文隔离
染进程中的代码通常运行在自己的环境中并且不能直主进程可以启动并管理多个渲染进程渲接访问主进程的环境。开启上下文隔离后渲染进程无法直接访问 Electron APl或 Node.js 功能(但可以通过进程间特定的任务)通信(IPC)向主进程发送消息请求执行特定的任务。关闭上下文隔离会使渲染进程获得更高的权限可以直接访问主进程的 API这为开发带来了便利但也带来了安全风险:如果恶意代码成功运行在渲染进程中将能够执行任意 Node.js 操作包括访问文件系统、运行任意命令等 。 Electron 提供 contextBridge 模块可以用来安全地从独立运行、上下文隔离的预加载脚本中暴露 API给正在运行的渲染进程。 2进程通信
1进程通信
渲染进程--主进程(单向通信)渲染进程-主进程(双向通信)
2演示案例
修改窗口标题自定义窗口、无边框、可拖动最小化、最大化、还原、关闭
3相关知识
IPC 进程通信BrowserWindow APl、dialog API 1.单向通信
ipcRenderer.send(channel,args) - 进程发送注意ipcRenderer为主进程的API无法在页面即渲染进程中直接使用所以需要contextBridge进行暴露ipcMain.on(channel,(event, args){}) - 进程监听 ·BrowserWindow API
最小化: win.minimize()最大化: win.maximize()还原: win.unmaximize()关闭: win.close()
·无边框
frame: false
·可拖动CSS
-webkit-app-region:drag-webkit-app-region:no-drag, 2.双向通信 以上的方法不建议 ipcRenderer.invoke(channel,...args)ipcMain.handle(channel,listener) 3Dark Mode
1nativeTheme API
themeSourceshouldUseDarkColors
2CSS 媒体查询
media(prefers-color-scheme:dark){}media(prefers-color-scheme:light){}
