1. 控制应用视窗大小 构建桌面应用时,我们要考虑我们的应用程序需要如何让用户来使用,那么我们需要提供一个视窗,那么该视窗可以最大化展示,也可以最小化展示,当然我们也希望可以全屏运行. 在electron中,我们可以配置我们的视窗的尺寸大小.首先还是来看下我们的demo的项目结构如下: |---- electron-demo | |--- node_modules # 依赖包 | |--- index.html # html文件 | |--- main.js # 入口文件 | |--- pack

XCEL 是由凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选. XCEL 基于 Electron 和 Vue 2.0 进行开发,充分利用 Electron 多进程任务处理等功能,使其拥有高性能.跨平台(windows 7+.Mac 和 Linux)的特性. 落地页:https://xcel.aotu.io/ ✨✨✨ 项目地址:https://github.com/o2team/xcel ✨✨✨ 项目背景 用户研究的定量研究和轻量级数据处

1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var template = [ { label: '关闭', click: function () { win.close();console.log("关闭")}, // submenu: [ // { // label: 'Undo', // accelerator: 'CmdOrCtrl+Z'

github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限) windows配置cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 因为npm的默认仓库在国外,下载很慢,国内淘宝搞了个CNPM,每10分钟同步一次,完全够用了 当然也可以使用yarn下载 npm insta

原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面应用仍然有充分利用硬件的优势. 今天,我们可以通过我们熟悉的 HTML.JS 和 Node.js 来创建桌面应用,打包成一个可执行文件,并且发布在 Windows, OS X 和 Linux 上. 有两个受欢迎的开源项目,能够帮助我们实现这个目的.一个是几个月前我们讨论到的 NW.js,另一个是今天

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

第一步: 要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件: package.json,node工程最基本的要求,类似于Java的pom.xml main.js 创建窗口,工作在electron的主进程 index.html 页面,工作在electron的渲染进程 但由于我们要使用antd, antd基于react,它是一个react工程,所以我们从最简单的react工程 create-react-app开始,为什么不用ant

概述 What is Electron? Electron是一个使用JavaScript.HTML和CSS构建跨平台桌面应用程序的框架. 您可以将Electron与纯JavaScript或您选择的JavaScript框架一起使用: React Angular Vue 构建一个简单的Electron应用程序 要创建基本的Electron应用程序,请按照下列步骤操作: git clone https://github.com/electron/electron-quick-start cd elec

这个文件浏览器应用可以具备以下两种功能噢- This file browser application can have the following two functions. 一:用户浏览文件夹和查找文件 First: Users browse folders and find files 二:用户可以使用默认的应用程序打开文件 2: Users can use default applications to open files 接下来我们开始进行开发吧- Next, let's star

公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实现了一个PC版本.   遇到了客服那边提过来的需求,当有新消息过来的时候,如果聊天窗口最小化了,需要有提醒,系统托盘也要像QQ一样有新消息过来的提醒与闪烁.   查了一个资料,两个功能都实现了.     先看任务栏的提醒样式如何实现 const path = require('path'); con

2019年2月20日,星期三 几个月前,我们已经开始与Electron进行实验.在工作概念验证之后,我们的目标是为Delphi开发人员尽可能多地包装Electron API.但当然不仅仅是可以使用的Electron API,您可以轻松地传输已有的代码,使其成为桌面应用程序!我们已经在之前的博文中给出了一个小小的预告片.现在,我们想借此机会对即将推出的新TMS Web电子申请支持提供更多见解. IDE集成 您可能已经熟悉创建TMS Web应用程序或渐进式Web应用程序.程序是相同的,创建新的Ele

初学electron 接触了两周的electron,感觉还不错,以后pc端基本上可以用electron加壳写pc端应用了,可以用nodejs的模块,也可以用es6.7,还可以直接操作系统文件.基本上可以完成大多数pc应用了. 就是安装慢成狗了....用镜也卡! 快速开始 Electron通过为运行时提供丰富的本机(操作系统)API,可以使用纯JavaScript创建桌面应用程序.您可以将其看作是Node.js运行时的一种变体,它专注于桌面应用程序而不是Web服务器. 这并不意味着Electron

最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得. 一.如何使用electron把基本的开发环境给跑起来? 我是这么处理的,electron官方提供了一个名为“electron-quick-start”的示例项目,地址为:https://github.com/electron/electron-quick-start 然后把相关资源给弄下来,如果你是下载Zip包解压的,则资源默认

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6154 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意. 最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得. 一.如何使用electron把基本的开发环境给跑起来? 我是这么处理的,electron官方提供了一个名为“electron

本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程生成渲染进程 利用Electron限制宽松的优点构建通常在浏览器无法构建的功能 使用Electron的内置模块来回避一些常见的问题 在第一章中,我们从高的层次上,讨论了什么是Electron.说到底这本书叫做<Electron实战>,对吧?在本章中,我们通过从头开始设置和构建一个简单的应用程序来管

在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项目文件打包成一个程序,和移动端得混合应用有点类似.当然实现起来肯定没有说得这么简单得. 那么怎么做呢? 首先,你电脑上面要有git 和 node ,git可以不要,不过最好安装了,Node必须要. 第二步  使用git clone  https://github.com/electron/elect

在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接  .现在我们需要在之前的基础上来继续完成余下的功能,我们之前的只完成了界面和显示文件夹或文件.那么这篇文章我们需要完成如下功能: 1. 如果它是一个文件夹,我们可以对该文件夹进行双击,然后打开该文件夹.2. 当前文件夹就是刚刚我们双击的那个文件夹.3. 如果它内部有子文件夹的时候,我们也可以双击,然后重复第一步的操作步骤. 那么在

最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑. Electron是什么呢? Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端. 这不意味着 Electron 是某个

Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Terminal. 3万多星的命令行窗口,慌了! 其他 本章主要内容 理解Electron是什么 学习Electron基于什么技术 了解使用Electron和传统Web应用程序有什么不同 构建Electron应用

一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. 1.克隆官方demo:git clone https://github.com/electron/electron-quick-start 2.cd electron-quick-start->npm insta

制作从头开始 最后会将写好的组件放到一起的!之前写了好几天的纯css 有点累 本章中将使用sass 如果代码太长 会分两个或多个章节写代码中会有详细的注释 以便于大家阅读and理解界面可能会有部分偏差 比较是仿制的 官方界面尺寸 默认宽度: 280px (大约 我之前拉伸过 被记录了 所以没法准确的测量)默认高度: 652px (也是大约值)最小高度: 528px最小宽度: 280px最大高度: 1041px (可能不太准确 有可能是根据分辨率来显示的)最大宽度: 605px顶部头像区域高度: