Electron
文章平均质量分 53
Electron 是由 Github 开发的一个跨平台的桌面应用开发框架,可以让我们用的前端技术开发桌面上面可以安装的软件,大名鼎鼎的VS Code编辑器就是用它发的。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
Electron项目打包
1. electron-packager模块打包1. 安装模块npm install electron-packager --save-dev2. 配置打包命令electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>参数说明:sourcedir:项目所在....原创 2021-05-05 22:15:14 · 2648 阅读 · 0 评论 -
Electron-Vue中操作本地数据库NeDB
NeDB是使用Node.js实现的一个NoSQL嵌入式数据库操作模块,可以充当内存数据库,也可以用来实现本地存储,甚至可以在浏览器中使用。查询方式比较灵活,支持使用正则、比较运算符、逻辑运算符、索引以及JSON深度查询等。NeDB嵌入到了应用程序进程中,消除了与客户机服务器配置相关的开销,在运行时,也只需要较少的内存开销,使用精简代码编写,速度更快。其API是MongoDB的一个子集,可以通过这些接口轻松管理应用程序数据,而不依靠原始的文档文件。具有简单、轻量、速度快等特点,由于嵌入式数据库存储总数原创 2021-05-01 22:23:39 · 3698 阅读 · 0 评论 -
Electron中自定义窗口导航条
1. 隐藏顶部菜单调用BrowserWindow模块创建主窗口以后设置菜单为空即可。mainWindow.setMenu(null); 如果是Mac系统,上面的设置可能会不生效,需要利用app模块做以下操作。app.dock.hide();2. 实现导航条可拖拽在自定义的导航条容器外层添加CSS样式设置。.my-header { width: 100%; height: 30px; line-height: 30px; background.原创 2021-05-01 19:39:24 · 3873 阅读 · 1 评论 -
Electron-Vue的基本使用
Electron-Vue 是个可以让我们使用 Vue 来开发 Electron 桌面程序的框架,单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。1. 环境搭建上面的项目在初始化时一定要安装Electron,另外安装依赖时也可以 npm install 来安装。在创建项目的过程中会有一系列的配置,比较烦锁,可以参考如下配置。2. 项目运行官方推荐用yarn来管理包,但是如果没有安装yarn时,也可以执行 npm run dev 来运行项目,下图为项目运行成功后的…….原创 2021-04-30 00:49:28 · 20132 阅读 · 17 评论 -
Electron中使用clipboard模块实现复制粘贴功能
软件开发中复制粘贴是一种比较常见的功能,如复制微信号引导用户粘贴去搜索关注,还有常见的复制图片进行粘贴。Electron中的clipboard模块就是用来实现这些功能的,该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等,以下是代码实现。主进程文件main.js代码如下:// main.jsconst { app, BrowserWindow } = require("electron");const path = require("path");const createWi原创 2021-04-26 00:10:21 · 4725 阅读 · 2 评论 -
Electron中globalShortcut模块注册全局快捷键
Electron中使用globalShortcut模块来注册全局快捷键,以实现类似于微信和QQ按快捷键调用剪切窗口的功能。快捷键在应用程序加载完成后进行注册,在应用程序退出之前取消注册快捷键,以下是代码实现:主进程文件main.js代码:// main.jsconst { app, BrowserWindow } = require("electron");const path = require("path");const createWindow = () => {原创 2021-04-25 23:45:50 · 1610 阅读 · 0 评论 -
Electron中的消息通知
Electron中的消息通知是基于H5的Notification来实现的,比较常见的使用场景是用于监听网络变化然后进行消息提示。1. 消息提示var option = { title: '温馨提示', body: '不要天天坐在电脑前,要注意休息!'};var myNotification = new window.Notification(option.title, option);// 给提示添加点击事件myNotification.onclick = function原创 2021-04-25 20:50:50 · 5867 阅读 · 0 评论 -
Electron中使用tray模块实现系统拖盘
Electron中的tray模块主要用来实现桌面软件特有的拖盘功能,包括创建拖盘图标、拖盘悬停提示、拖盘右键菜单、拖盘消息提示等等。1. 创建拖盘var { Menu, Tray, BrowserWindow, app } = require('electron');var path = require('path');// 创建拖盘var iconTray = new Tray(path.join(__dirname,'../static/love.png'));2. 鼠标悬停拖盘原创 2021-04-25 18:20:48 · 3602 阅读 · 9 评论 -
Electron实现一个简易的编辑器
众所周知,大名鼎鼎的VS Code编辑器是用Electron写出来的,近日因为工作需要,对Electron进行了复习和实践,写了一个简单的编辑器。编器主要实现了这些功能:应用菜单、右键菜单、新建、打开、保存、打印、退出以及打开HTML文档时代码高亮显示,以下是是代码实现,相关注释都已写好给大家做参考。主进程文件index.js代码如下:// index.jsconst { app, BrowserWindow } = require('electron');const path = req原创 2021-04-25 11:55:49 · 2813 阅读 · 0 评论 -
Electron 中的常用对话框
1. 错误提示框remote.dialog.showErrorBox("错误","数据输入错误")2. 消息提示框(异步)remote.dialog.showMessageBox({ type:"info", buttons:["确认","取消"], title:"关于我们", message:` 这是一个神有奇的软件, 当你打开的时候, 你会发现你离不开它了, 因为你关不掉了, 哈哈哈... `}).then原创 2021-04-20 13:23:42 · 2648 阅读 · 0 评论 -
Electron中通过shell模块打开链接地址
1. 在外部浏览器中打开外部链接var {shell}=require('electron')shell.openExternal('https://github.com');2. 在内部iframe中打开外部链接Electron5.x 之后官方不建议使用 webview 标签,可以使用 iframe 替代 webview,代码如下:<iframe id="myWebview" name="myWebview" style="width:100%;height:400px.原创 2021-04-19 22:12:23 · 2870 阅读 · 2 评论 -
Electron 中渲染进程与渲染进程之间的通信详解
Electron中渲染进程与渲染进程之间的通信主要有两种方式,一种是通过本地存储来实现,另外一种就是借助主进程进行传递消息。1. 渲染进程之间通过本地存储进行通信渲染进程index传递消息。// index.jswindow.onload = () => { var button = document.getElementById("button"); button.onclick=()=>{ // 传递消息给另外一个渲染进程 lo原创 2021-04-18 20:37:55 · 2898 阅读 · 4 评论 -
Electron 中主进程与渲染进程之间的通信详解
Electron 主进程和渲染进程的通信主要用到两个模块:ipcMain 和 ipcRenderer。ipcMain:当在主进程中使用时,它处理从渲染器进程发送出来的异步和同步信息,也可以从主进程向渲染进程发送消息。ipcRenderer: 使用它提供的一些方法从渲染进程发送同步或异步的消息到主进程,也可以接收主进程回复的消息。1. 渲染进程给主进程发送异步消息渲染进程给主进程发送异步消息:// ipcRenderer.jsconst {ipcRenderer} =require("原创 2021-04-18 00:21:43 · 2167 阅读 · 0 评论 -
Electron 中使用menu模块创建菜单
1. 模块简介Electron 中 Menu 模块可以用来创建原生菜单,它可用作应用菜单和上下文菜单,此模块是一个主进程的模块,可以通过 remote 模块在渲染进程调用。2. 菜单实现首先是mian.js文件的代码如下:const { app, BrowserWindow } = require("electron");const path = require("path");const createWindow = () => { // 创建窗口 c.原创 2021-04-16 23:09:17 · 3199 阅读 · 0 评论 -
Eelectron 中的remote模块
1. 模块分类在Electron中的模块有些只能在主进程中使用、有些只能在渲染进程中使用、只有一小部分模块在主进程和渲染进程中都可以使用,主要分类如下:2. remote模块Electron 中与 GUI 相关的模块只存在于主进程,而不在渲染进程中 ,为了能从渲染进程中使用它们,需要给主进程发送进程间消息。remote 模块提供了一种在渲染进程和主进程之间进行进程间通讯的简便途径,使用 remote 模块,可以调用主进程对象的方法,而无需显式地发送进程间消息,这类似于 Java 的 R.原创 2021-04-15 23:27:55 · 6156 阅读 · 2 评论 -
Electron的运行流程、主进程与渲染流程
1. 运行流程1. 确定应用程序的起点;2. 启动应用程序并创建一个渲染进程;3. 为应用程序布局和添加样式;4. 使用IPC在主进程中执行任务并从主进程中获取信息;2. 主进程与渲染流程package.json 中定义的入口被称为主进程,在主进程中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程。一个 Electron 应用只有一个主进程,但是可以有多个渲染进程, 每个 Electron 中的 web 页面运行在它自己的渲染进程中。主进程使用 ..原创 2021-04-14 23:51:12 · 2407 阅读 · 0 评论 -
Electron项目创建的三种方法
1. 克隆仓库,快速启动1. 克隆项目git clone https://github.com/electron/electron-quick-start2. 进入这个项目下cd electron-quick-start3. 安装依赖npm install4. 运行项目npm start打开快速启动的项目,主要有以下几个文件:(1). index.html ,渲染进程;(2). render.js,渲染进程,在index.html中引用;(3). ma原创 2021-04-14 00:14:19 · 7367 阅读 · 1 评论 -
Electron跨平台开发框架介绍
1. Electron框架简介Electron 是由 Github 开发的一个跨平台的桌面应用开发框架,可以让我们用前端技术开发桌面上面可以安装的软件。目前用Electron开发的成熟软件有很多,鼎鼎大名的VS Code编辑器就是用Electron开发的。打开Electron的官网,可以看到下面这些软件也是Electron开发的。Github地址:https://github.com/electron/electronElectron官网:https://www.electronjs.o原创 2021-04-11 23:21:09 · 6334 阅读 · 6 评论