Electron笔记

一个能让你用Web技术开发桌面应用的开源项目.这里做一个笔记(非正式文章): 官网地址:http://electron.atom.io/ API相关 Electron提供的主进程接口.渲染进程接口.共用接口等. Process(进程):继承NodeJS的process模块,增加属性和方法.事件. Chrome 命令行开关 :Chrome相关的配置. <webview> Tag :单独的进程中运行(与iframe相比),并增强很多地方,比iframe好用. window.open相关接口. 主进…

从零开始学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的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https://www.electronjs.org/docs/api/remote remote 模块为渲染进程(web页面)和主进程通信(IPC)提供了一种简单方法. 在Electron中, GUI 相关的模块 (如 dialog.menu 等) 仅在主进程中可用, 在渲染进程中不可用. 为了在渲染进程…

从零开始学Electron笔记（四）

在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所用到的代码编辑器都有右键菜单,可以方便我们的日常操作,接下来我们就来看一下用Electron如何实现右键菜单,接上一章的目录: 接下来我们要在idnex.html 中使用右键菜单,右键菜单其实和我们之前所说过的顶部菜单栏其实是差不多的,所以我就引用了一下在介绍菜单栏时的一些代码并进行了改进,如下:…

从零开始学Electron笔记（五）

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

从零开始学Electron笔记（六）

在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是说了一下对话框dialog的,就是在讲Menu菜单栏的时候,下面我们再来系统的看一下 dialog 的使用. dialog 官方地址:https://www.electronjs.org/docs/api/dialog 现在我们要实现一个功能,就是点击一个按钮,然后弹出一个对话框,类似于删除操作的二…

从零开始学Electron笔记（七）

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

Boostnote 为程序员的开源式记事本

以前使用win10的时候,有个edairy可以使用,并且效果非常好,现在ubuntu上使用的时候,才找个这样的程序员实在太难了,找了好久,才找到一个使用比较顺手的,这里就做个备忘了,顺便做个推荐,实在不错的为程序员量身定做的记事本. 这篇是(https://itsfoss.com/boostnote-linux-review/)的翻译文章 Boostnote是为专注于程序员开发的一种新开源式记事本. 在Linux,Windows,MacOS可以使用. 建于Electron,可离线执行. 专为程序…

Electron入门Demo之桌面应用计算器笔记（二）

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14307996.html 在之前总结了一篇自学笔记,通过之前学习到的方法和知识,完成了一个较为简单的桌面应用程序,Electron 实现桌面计算器,并打包成 .exe 可执行文件和可安装包文件简要绘制一下该Demo的主要功能: 简短描述一下所用到的基础知识: 初始化应用,创建窗口,加载内容设置菜单文件,main.js 引入菜单文件渲染进程创建子窗口渲染进程与主进程之间通讯执…

electron 学习笔记

一.快速搭建一个electron 项目结构 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start 二.关于<webview> 标签的使用 <webview> 标签可以把一个第三方页面嵌入到你的应用中,在一个最简单的 webview…

Electron学习笔记（一）

Electron是使用Javascript.HTML5技术构建跨平台桌面应用的技术,是目前非常活跃的一项技术,其中比较有名气的应用有微软的VS Code. 创建一个Electron应用的方式有很多,Github上面有很多做好的模版,只需要下载继续开发即可,也有一些项目创建工具(脚手架),可以直接创建新的Electron项目. 1.开发环境 Electron的基本开发环境是nodejs,首先到官网下载nodejs,我选择了LTS版本,当前版本是v6.9.5. 下载安装之后,可在命令行执行node…

electron入门笔记（三）- 引入bootstrap

源码:https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时,会报错,原因是:electron 的 Renderer 端因为注入了 Node 环境,存在全局函数 require,导致jquery 内部环境判断出现问题. 1.解决方法1: 再引入jQuery和bootstrap之前插入如下代码: <script> delete window.require; delete window.exports; delet…

Electron入门笔记（二）-快速建立hello world

官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-start,发现很简单一.安装Electron 1.全局安装在自己想安装的盘下打开命令窗口,输入命令:npm install -g electron进行全局安装 2.局部安装输入npm install electron进行局部安装二.克隆下载electron-quick-start 在自己安装el…

Electron入门笔记（一）-自己快速搭建一个app demo

Electron学习-快速搭建app demo 作者: 狐狸家的鱼 Github: 八至一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装. 2.然后cmd进入命令窗口,输入npm -v查看node当前版本, 二.创建文件并初始化 1.在自己喜欢的盘里新建项目文件,我是 E:\Electron\resources\app,在此文件目录app下打开命令窗口,按住shift ,右击空白处,选择在此处打开powershell命令窗口 2.在命令窗…

Electron小白入门自学笔记（一）

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html 一.从Hello Electron开始创建一个空的文件夹,并创建入口 main.js 文件,index.html内容文件, 安装electron npm init -y:初始化配置文件 package.json npm i electron main.js 文件引入模块,创建应用创建窗口加载内容打开调试工具(可选) 关闭窗口及应用监听执行文件直…

Electron开发笔记—electron-builder打包流程

该文章说明基于win平台下,mac及linux没有实验关于electron-builder打包可以有两种方案: 1. 打包成文件夹及绿色免安装: electron-builder --dir(依赖winCodeSign) 2.打包成exe的安装包 electron-builder (依赖winCodeSign和nsis) electron-builder有一些依赖包如 [winCodeSign].[nsis]:在***的情况下,直接执行命令就会自动处理相关依赖,但天朝基本不***,所以会出现包…

台北Unity开发者研讨会笔记

本文转自:http://ndark.wordpress.com/2013/05/12/20130511-台北unity开发者研讨会-笔记/ (墙外) 说明本文单纯只是笔记,若有笔误敬请见谅. 相关参考连结你必须知道的Unity引擎知识 Unity Asia Bootcamp 台北场– 线上观看 Unity 今日首次在台举办亚洲开发者研讨会– 巴哈姆特 Unity着色器系统介绍(幻灯片) Unity 开发者论坛-台北场(Unity ASIA BOOTCAMP TOUR TAIPEI )研讨会…

nodejs爬虫笔记(五)---利用nightmare模拟点击下一页

目标以腾讯滚动新闻为例,利用nightmare模拟点击下一页,爬取所有页面的信息.首先得感谢node社区godghdai的帮助,开始接触不太熟悉nightmare,感觉很高大上,自己写代码的时候问题也很多,多亏大神的指点. 一.选择模拟的原因腾讯滚动新闻,是每六十秒更新一次,而且有下一页.要是直接获取页面的话得一页一页的获取,不太方便,又想到了找数据接口,然后通过请求得到数据,结果腾讯新闻的数据接口是加密的,这种想法又泡汤了.因而想到笔记(四)中模拟加载更多的模块,看利用nightmare这…

electron入坑指南

electron入坑指南简介 electron 实际集成chrome浏览器和node环境, 运行你写的网页 app 基本目录结构 index.html 名称可以不是index, 这个文件与普通网页的区别是它之中要引用<script 'renderer.js'> 类似这样 main.js 必须为这个名称, 用于创建窗口和主线程的操作, 能访问node模块 renderer.js 渲染进程, 能访问被打包的node模块和浏览器 electron-vue 一开始什么都不会, 所以用这个脚手架快速弄…

Electron: 从零开始写一个记事本app

Electron介绍简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Electron开发一个完整但简单的小应用:记事本,来体验一下这个神器的开发过程.本文犹如Hello World一样的存在,是个入门级笔记,但如果你之前从未接触过Electron,而又对它有兴趣,某想信这会是一篇值得一看的入门教程. PS:这篇文章是基于Windows的开发过程,未对macOS.Linux…

electron 大体结构

1.Electron支持的平台: OS XWindowsLinux 2.一个标准的electron app包含的结构: Windows 或是 Linux中:electron/resources/app|_package.json|_main.js|_index.html 3.electron程序打包: 一般使用asar来进行打包,electron中一般包含两种API:Node.js和Chromium提供的Web APINode API如fs.readFile 4.使用Native Node模块…

Angular+Electron+VSCode的桌面应用

Angular+Electron+VSCode的桌面应用转自:http://blog.csdn.net/yr7942793/article/details/50986696 第一部分 Electron开发入门笔记 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是 io.js 运行时的衍生,专注于桌面应用而不是 web 服务端.Electron 丰富的原生 API 使我们能够在页面中直接…

关于Markdown的一些学习笔记

**关于Markdown的一些学习笔记** 一直利用markdown进行博客的文档编写,一方面是因为不需要特别注重排版,另一方面是十分的方便.最近突发奇想的认为,如果能运用到平时的作业或课程中,会不会也是极大的提高效率的一大方式呢? Markdown装成pdf格式在网上查了相关的资料,总结起来有: 1.Markdown编辑器自带的转换pdf功能此功能比较方便,且能确保格式正确:但是目前这个功能一般都是付费使用的. 2.转换成html格式后,再利用浏览器的另存为pdf生成pdf,但这种方法生成…

第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战

本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框促进主进程和渲染器进程之间的通信将功能从主进程暴露给渲染器进程使用Electron的remote模块从主进程导入功能到渲染器进程使用webContents模块将信息从主进程发送到呈现器进程,并使用ipcRenderer模块为来自主进程的消息设置监听器在前一章中,我们为第一个Electron项目打下了基础,这是一个笔记应用程序,它从左窗格中取出Markdown,并在右窗格中将其呈现为HTML.我们设置了主进程…

Pencil 基于Electron的GUI原型工具之菜单再探

为什么要重试呢? 主要是觉得Pencil这个工具还是比较有价值.就像Linus对Linux下分发版的态度"让用户有选择"一样,在现在这个Sass服务.Web服务化越来越普遍越便利的时代,这样一款定位于桌面式的开源软件,就是给用户的一种选择. 诚然,好的服务.核心的服务我们需要付费.愿意付费,但同样一个服务对于不同的人其重要性是不同的,比如我的设定里印象笔记.迅雷下载.Jetbrains的IDE.京东.书籍阅读等是需要付费的,因为这是我自己的核心诉求,笔记多端同步.经常要下载国外各种软件…

electron 创建托盘应用

electron客户端开发

如何新建一个 Electron 项目? electron快速入门笔记: https://www.jianshu.com/p/f134878af30f 然后自己新建一个 Electron 项目,在项目中输出 Hello World! Electron 的背景信息搭建完这个 Electron 项目后,相信大家对 Electron 已经有了初步的认知,接下来我们可以查看文档来获取 Electron 更多的背景信息: https://electronjs.org/docs/tutorial/about…

electron打造桌面应用

Electron 将网页打包成桌面应用(web页面生成exe) http://m.blog.csdn.net/u014563989/article/details/75045052 Electron学习笔记Part3-利用Electron builder应用打包EXE http://blog.csdn.net/dj513dj/article/details/55253560 手把手教你把前端代码打包成msi和exe文件 http://yohnz.win/2016/10/11/%E6%89%8B%…

个人项目WC.exe Node.js+electron实现

前言实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序,模仿已有wc.exe 的功能,并加以扩充,给出某程序设计语言源文件的字符数.单词数和行数. 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能要求: 程序处理用户需求的…

【Electron笔记】的更多相关文章