![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
electron
文章平均质量分 70
CreatorRay
这个作者很懒,什么都没留下…
展开
-
使用Web前端技术开发桌面应用---Electron剪贴板事件的使用
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。在开发中我们经常会遇到给用户一个激活码,然后让用户复制粘贴的情况,这时候就需要用到clipboard模块,也就是我们的剪贴板模块。复制激活码功能实现现在要作一个激活码,然后旁边放一个按钮,点击按钮就可以复制这个激活码,你可以把激活码复制到任何地方。先新建一个页面index8.html,然后在里边先写相关的html代码。再里边放入一个文字的激活码,然后放入一个按钮。<!DOCTYPE html>.原创 2021-03-02 22:17:40 · 548 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron注册全局快捷键
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。全局快捷键模块就是globalShortcut,意思就是我们打开软件以后,按键盘上的快捷键,就可以实现用快捷键实现特定的功能,相当于用键盘快捷键触发某些事件。注册快捷键globalShortcut是主进程中的模块,而且注册的都是全局的快捷键,所以你尽量写在main.js中。打开main.js,然后先引入globalShortcut,代码如下:var globalShortcut = electron.g.原创 2021-03-02 08:44:42 · 763 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron 底部通知消息的制作
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。对话框通过三小节的学习,小伙伴们已经掌握的非常好了,接下来学习一下消息通知。Electron的消息通知是通过H5的window.Notification来实现的。window.Notification的属性参数title: 通知的标题,可以显示在通知栏上option: 消息通知的各种属性配置,以对象的形式进行配置如果想详细的学习,可以直接看H5的NotificationAPI进行学习。点击按钮提示.原创 2021-03-01 14:49:53 · 837 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron 断网提醒功能制作
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。桌面客户端的程序都必备的一个功能是判断网络状态,这个其实可以用window.addEventListener来进行时间监听。相关事件其实这个是JavaScript的一种方式进行监听网络状态,监听的事件分别是online和offline。online : 如果链接上网络,就会触发该事件。offline : 如果突然断网了,就会触发该事件。案例演示我们现在要做的就是当断网和重新链接到网络时,都给用户.原创 2021-02-28 14:05:23 · 966 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron 消息对话框的操作
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。打开文件对话框和保存文件对话框我们都学习过了,这节学习一下最为普通的消息对话框dialog.showMessageBox(),它的属性还是比较多的,所以我们先来看一下他的相关属性。showMessageBox相关属性它有太多的属性,这里我们也只挑一些常用的属性来讲解,如果你在工作中具体使用,可以先到官网查询相关的API后,再根据需求具体使用。type :String类型,可以选,图标样式,有none、i.原创 2021-02-27 13:34:42 · 697 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron 保存对话框的操作
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。有了上期的基础,再学习保存对话框dialog.showSaveDialog()就容易很多,因为他们大部分的API都是相同的,只有部分不一样,所以如果你已经掌握好了上期的内容,这期就变的非常容易了。这期我们作一个保存按钮,保存后能把固定的内容保存到文件中。制作一个保存按钮先在index5.html中,编写一个按钮:<button id="saveBtn">保存文件</button>.原创 2021-02-25 20:26:07 · 674 阅读 · 1 评论 -
使用Web前端技术开发桌面应用---Electron 选择文件对话框
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。这期博客开始我们讲解Electron下的对话框操作,对话框一般会有选择文件对话框,保存文件对话框和确认对话框。这节我们先来学习文件选择对话框的相关操作。对话框相关API讲解我们先来看一下打开对话框的相关API,打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开,它有两个参数,一个是设置基本属性,另一个是回调函数,如果是异步可以使用then来实现。title : Strin.原创 2021-02-25 17:46:56 · 939 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron中Window.open的子窗口和父窗口间的通信
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。上期博客在最后,学习了用window.open打开了子窗口,这期学习一下父子窗口如何通信,通信在任何框架中都是重要的环节。window.opener.postMessage 子窗口向父窗口传递消息window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口,如果未指定来源则发送给*,即所有窗口。message : 传递的消息,是Strin.原创 2021-02-24 15:26:00 · 1319 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。上期内容我们学了如何在浏览器中打开网页,这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中,这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类,所以只能在主进程中使用。在主线程中用BrowserView嵌入网页打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。 var BrowserVie.原创 2021-02-23 19:25:09 · 3797 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron中通过链接打开浏览器
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。在渲染进程中默认加入一个<a>标签,进行跳转默认是直接在窗口中打开,而不是在浏览器中打开的,如果我们想在默认浏览器中打开,要如何操作那?这节课讲一下如何使用electron shell在浏览器中打开链接。默认案例演示我们先来看一下,在electron 中默认打开一个链接是什么样的,在项目根目录,新建一个index3.html文件,编写一个<a>标签,代码如下:<!DOCTYP.原创 2021-02-22 17:17:24 · 2178 阅读 · 1 评论 -
使用Web前端技术开发桌面应用---Electron 制作右键菜单
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。上个博客讲解了如何设置顶部菜单,我们也作了一个菜单的小案例,但是没有讲解如何绑定快捷键。这节我们会进行讲解,并且讲述一下如何实现右键功能。菜单快捷键绑定绑定快捷键的属性是accelerator属性,比如我们新打开一个窗口,我们就的代码可以写成这样。accelerator: `ctrl+n`全部代码如下:const {Menu, BrowserWindow} = require('electron').原创 2021-02-21 16:14:49 · 707 阅读 · 2 评论 -
使用Web前端技术开发桌面应用---Electron 创建菜单和基本使用
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。每一个桌面应用都会有一个窗口,这个视频就学习一下在Electron中使用Menu来完成菜单的创建。话不多说,直接动手操作。编写菜单模板在Electron中编写菜单,需要先建立一个模板,这个目标很类似我们JSON或者类的数组。我们打开项目,在项目的根目录下新建一个文件夹menu,然后新建一个menu.js文件,然后编写如下代码。const { Menu } = require('electron')v.原创 2021-02-20 14:55:22 · 507 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron Remote模块的使用
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。当我们知道了Electron有主进程和渲染进程后,我们还要知道一件事,就是Electron的API方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时,可以使用Electron Remote解决在渲染和主进程间的通讯。这节我们就实现一个通过Web中的按钮打开新窗口。渲染进程中打开新窗口那我们话不多说,直接按照上节课的程序进行改写,在项目根目录下,新建一个demo2.原创 2021-02-19 19:25:12 · 883 阅读 · 3 评论 -
使用Web前端技术开发桌面应用---Electron读取文件内容并展示
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。Electron的运行流程读取package.json的中的入口文件,这里我们是main.jsmain.js 主进程中创建渲染进程读取应用页面的布局和样式使用IPC在主进程执行任务并获取信息也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题.Electron的主进程和渲染进程我们可以理解package.json中定义的入口.原创 2021-02-18 20:32:36 · 1481 阅读 · 2 评论 -
使用Web前端技术开发桌面应用---Electron第一个Hello World程序
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。目前已经搭建好了Electron的开发环境,那这篇文章就写一个Electron最简单的Hello World,这也是每个学习开写的第一个程序。当然也有下伙伴说把Electron安装到项目中太麻烦了,可不可以安装到全局变量,那答案是肯定的。全局安装Electronnpm install -g electron这个如果安装失败,你可以多安装两遍,你也可以使用cnpm来进行安装。安装后确实可以使用起来方便一点.原创 2021-02-17 17:31:22 · 521 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron开发环境的搭建
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。Windows安装Node.js如果你是前端,安装Node应该是信手拈来,非常熟悉了,但是为了防止有小伙伴还不会安装这个,我简单的介绍一下.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。什么事情驱动、非阻塞式I/O,适合高并发应用使用。Windows下安装也是非常简单,直接到官网去下载。官网地址:https://nodejs.org/zh-cn/然后点.原创 2021-02-16 13:16:49 · 528 阅读 · 0 评论 -
使用Web前端技术开发桌面应用---Electron简介
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。Electron是什么?你只要记住下面这两句话就可以对Electron有个基本了解:Electron 是由 Github开发的开源框架它允许开发者使用Web技术构建跨平台的桌面应用Electron = Chromium + Node.js + Native APIChromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。Node.原创 2021-02-15 20:43:58 · 1428 阅读 · 0 评论