electron whenReady 和 onReady

2024-11-02

从零开始学Electron笔记（七）

在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 globalShortcut,意思就是我们打开软件以后,按键盘上的快捷键,就可以实现用快捷键实现特定的功能,相当于用键盘快捷键触发某些事件. globalShortcut 官方地址:https://www.electronjs.org/docs/api/global-shortcut globalShortcu

打造你的第一个 Electron 应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 注意: 获取该示例的代码仓库: 立即下载并运行.

Electron 初识-搭建一个简易桌面应用

Electron 快速入门简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是绑定了 GUI 库的 JavaScript.相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 应用的入口在 Electron 中,入口是一个 J

从零开始学Electron笔记（一）

前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue3.0开发的心路历程并放话今年发布,Deno v1.0 的发布,扬言要干掉Node,摸了摸日渐稀疏的头发,表示真心学不动了,但摸了摸干瘪但口袋表示扶我起来我还能学! 接下来我们要说到但是一个可以开发桌面级应用的框架Electron. 先简单介绍一下Electron,它是由GitHub团队开发,目前在

从零开始学Electron笔记（二）

在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www.cnblogs.com/weijiutao/p/13195306.html 上一章我们简单写了一个demo并跑了起来,我们会发现它和我们电脑上的其他程序软件一样有自带的菜单,如下图: 本人使用的是Mac,菜单在吸顶栏上,Windows电脑的话会跟随程序,一般的电脑程序都会有这样的菜单存在,方便我们

从零开始学Electron笔记（五）

在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打开Chrome浏览器来打开此链接,那我们该如何实现呢? 先来看一下上一章之后我们的目录结构: 为了实现上面的需求,我们可以按照之前我们写前端代码一样写一个 a 标签来进行页面的跳转: <!DOCTYPE html> <html lang="en"> <head

electron开发 - 打印流程(仅支持6.0.0版本以上)

Electron打印标签打印标签打印一般有两种方式: 驱动打印,与普通打印机一样通过驱动方式打印. 通过指令打印,不同厂家的的打印机指令集不一样,可查看厂家提供的手册. electron 打印方式直接调用打印机打印打印到pdf 打印流程本机安装打印机驱动配置打印机名称调用打印前判断打印机是否可用打印打印机返回状态参考 status为0时表示打印机可用调用方式通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对

Electron入门指北

最近几年最火的桌面化技术,无疑是Qt+和Electron. 两者都有跨平台桌面化技术,并不局限于Windows系统.前者因嵌入式而诞生,在演变过程中,逐步完善了生态以及工具链.后者则是依托于Node.Js和CCM(Chromium Content Module),支持Node.js和Node.js原生以及自主封装的Electron API. 因为项目考虑跨平台的技术选型,研究过长达一年的Electron,并且做了很多尝试,所以想与诸君分享Electron的技术心得. Electron的特点 El

Electron安装打包指南

当前环境Debian Linux-Deepin 安装Node 直接下载命令下载下载 wget https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz 解压,解压后在当前盘多了个文件夹node-v14.15.1-linux-x64.(可自行改名) sudo tar -zxvf node-v14.15.1-linux-x64.tar.gz 建立软链接 sudo ln -s /盘路径/node-v14.15.1-linux-x

npm 安装 electron 失败的解决方案

npm 安装 electron 失败的解决方案 shit GFW npm 安装 electron 失败解决方案 https://www.npmjs.com/package/nrm $ nrm ls $ nrm use cnpm $ npm i electron # 还原 $ nrm use npm demo "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @created 2020

Electron快速入门之事件

const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) //webcontents win.webContents.on("did-finish

Electron快速入门

node -v npm -v 安装node环境 my-electron-app/ ├── package.json ├── main.js └── index.html 为您的项目创建一个文件夹并安装 Electron: mkdir my-electron-app && cd my-electron-app npm init -y npm i --save-dev electron main.js代码: const { app, BrowserWindow } = require('ele

使用 electron 和 electron-forge 加载本地磁盘资源 img 的问题

最近在学习使用 electron 进行桌面开发一款图片压缩的软件.遇到了加载本地磁盘文件的问题.记录一下其解决方案. 使用 electron 加载本地磁盘文件第一种方法设置webPreferences.webSecurity值为false 使用这个方法就是设置Chromium的启动安全参数,允许访问本地资源文件.由于Chromium是不允许在远程地址访问本地资源.只有本地资源访问本地资源,那么问题来了,使用 electron 启动的项目怎么设置访问本地路径资源呢? 代码配置如下 // mai

Electron结合React和TypeScript进行开发

目录结合React+TypeScript进行Electron开发 1. electron基本简介为什么选择electron? 2. 快速上手 2.1 安装React(template为ts) 2.2 快速配置React 2.3 安装electron 2.4 配置main.js.preload.js和package.json文件 2.5 运行electron项目 2.6 打包项目 3. 自动刷新页面 4. 主进程和渲染进程 5.定义原生菜单.顶部菜单 5.1 自定义菜单 5.2 给菜单定义点击

Electron学习（三）之简单交互操作

写在前面最近一直在做批量测试工具的开发,打包的exe,执行也是一个黑乎乎的dos窗口,真的丑死了,总感觉没个界面,体验不好,所以就想尝试写桌面应用程序. 在技术选型时,Java窗体实现使用JavaFx.Swing,感觉都不太理想,为什么呢? 写好后,都是通过 Application.launch 启动,仅能运行一次,不能多次调用(硬伤呀!). 作为一个测试仔,没办法只好找开发了. 于是,我又去找强哥(之前北京同事),强哥给我推荐了electron,我一查,才发现真的太秀了,太好看了吧,结果我就

electron 起步

electron 起步为什么要学 Electron,因为公司需要调试 electron 的应用. Electron 是 node 和 chromium 的结合体,可以使用 JavaScript,HTML 和 CSS 等 Web 技术创建桌面应用程序,支持 Mac.Window 和 Linux 三个平台. electron 的成功案例有许多,比如大名鼎鼎的 vscode. hello-world 官网有个快速启动的应用程序,我们将其下载到本地运行看一下. # Clone this reposit

基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】

1.概述开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预加载(preload.js)和进程间通信(ipc)的方式来完成. 2.窗口最大化一些应用在实际情况中,希望启动的时候就以窗口最大化的方式呈现,BrowserWindow对象提供了窗口最大化的方法:win.maximize(),具体如下所示: const win = new BrowserWindo

electron 基础

electron 基础前文我们快速的用了一下 electron.本篇将进一步介绍其基础知识点,例如:生命周期.主进程和渲染进程通信.contextBridge.预加载(禁用node集成).优雅的显示窗口.父子窗口.存储并恢复 electron 窗口..右键上下文信息.右键菜单.菜单与主进程通信.选中文本执行 js 代码.托盘.nativeImage.截屏等等. Tip:为图方便,继续之前的环境进行操作. 第一个程序下面这段代码会打开一个原生窗口,窗口里面会加载 spug 的一个系统: //

如何开发Vite3插件构建Electron开发环境

新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1等奖:<深入浅出Electron>+<Electron实战> 2等奖:<深入浅出Electron> 3等奖:<Electron实战> 抽奖活动是掘金组织的,仅限近几日加入微信群的新成员(目前人还不多),我负责抽奖.邮寄,11月20日开始抽奖.凡参与抽奖的读者都有

Electron使用与学习--(页面间的通信)

目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow //主进程 const ipc = require('electron').ipcMain; app.on('ready',function(){ var mainWindow = new BrowserWindow({ width: 800

electron whenReady 和 onReady

热门专题