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

这几天到年底了,公司也没啥事,闲着就到处瞅瞅.记得上一家公司的时候用 Electron+ng1 写过项目,只是那个时候项目框架都是别人搭的,自己只负责写功能,对Electron没啥认识. 这几天想着反正闲着也是闲着,就捡起来自己玩玩,顺便记录一下. 一.环境安装: 前端开发,现在不管是那个方向,都免不了使用NPM,所以node.js的安装是必须的,也是最基础的一步. 1.安装node.js,从官网 https://nodejs.org/en/  下载当前node.js LTS包(稳定版本),下载…

前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系统通用 npm install -g electron-builder 或 cnpm install -g electron-builder 第二步:打包 electron 项目…

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil…

在开发桌面端应用我们常常需要弹出一个提示窗体或者对话框,而提示窗体和对话框和普通窗体的区别是,在提示框出现时,其它窗体就被锁定了,必须要等到提示框被正确关闭时其它窗体才能“解锁”,这种类型的窗体叫做模态窗.在Electron中实现起来也非常的简单: ES5: var top = require('electron').remote.getCurrentWindow(); var child = new BrowserWindow({parent: top, modal: true, show:…

原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标准,当Window中存在require时,会启用模块引入的方式,导致报错 Uncaught ReferenceError: $ is not defined,本文研究了高低版本jQuery引入的正确方式. 1. 报错原因 Electron默认启用了Node.js的require模块,而jQuery等…

Electron是什么? 官网是这么描述的:Build cross platform desktop apps with JavaScript, HTML, and CSS 翻译一下:使用JavaScript,HTML以及CSS搭建跨平台桌面应用 诞生环境 一位博主这样开玩笑说: 可能主要是因为,猿类里的亚种--前端开发--又有了新的出路了吧,还没找工作的前端开发,又有了新的岗位可以去选择,已经在岗的前端也有了新一年的 KPI/OKR,刚起步的创业公司可以只拉一个前端就能开发跨平台的多个桌面客户…

electron 总结 前言 有一个web项目需要用客户端来包装一下 项目的主要业务都在服务器上 所以项目的大多数功能都用url 地址来访问: 客户端登陆界面在本地 打包客户端的本地登陆界面 做为登陆入口: electron 开发中 有一个概念需要理解 我暂且叫主进程吗 main, 这个进程的控制 在项目的 配置 package.json 的main 字段中定义: main.js 作为electron 控制的后端入口, 基本的主要控制都是在这个文件里面定义 eletron 控制系统 的接口很多也…

面试被问到electronic,就是之前了解electronic打包桌面应用.哎回来就好奇捣鼓捣鼓呗!为了快速的上手去除配置的繁琐过程,直接用了electron-vue脚手架了解了下 electron官网:https://electronjs.org electron-vue文档:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 1.创建一个electron-vue的项目   vue init simulatedgreg/ele…

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil…