精华 Electron简介
发布于 3 年前 作者 CarlosRen 32270 次浏览 来自 分享

Electron

introduction

1.1 Electron是什么?

引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS

1.2 诞生

技术背景:

JavaScript近几年的全领域发展,个人理解JavaScript是思想对java的前进,从compile once,run everywhere转变为code once,run everywhere,由于JavaScript本身的是一门解释性的脚本语言,这让它逐渐的成为全宇宙使用最广泛的语言,没有之一。

JavaScript只是JavaScript,在浏览器中,它操作DOM和BOM,在服务器端它操作FileSystem,HTTP,所以在任何环境,他都可以执行,即使是在几M的内存环境,这点对物联网来说很重要。

调用需求:

传统的PC软件开发成本太高,和网络的兴起,让传统的开发逐渐被在线系统吊打,高成本必然逐渐的走下坡路,这是符合经济上发展的趋势,但是由于性能的问题,不管是VR还是直播,需要采集视频,音频,网卡信息,而这些模块大多数还是C、C++来获取

传统局限: 在浏览器里,Web页面通常运行在一个沙盒环境里,它不能访问本地的资源。 比如在Web页面里,调用本地GUI是不允许的,因为在Web页面里管理本地GUI资源是非常危险的而且非常容易导致资源泄露。如果你想在Web页面进行GUI操作,该Web页面的渲染进程必须通过和主进程通信来请求主进程处理这些操作。

1.3 Electron的组成

1.软件成分: Electron: 1.2.6 Node: 6.1.0 Chromium: 51.0.2704.106 V8: 5.1.281.65 (各方面都足够新,ES和TS都可以撸代码)

2.工具支持:(官方提供) 功能上支持: Automatic updates Native menus & notifications App crash reporting Debugging & profiling Windows installers

写代码&部署: Electron Packager — Package your apps
Electron Builder — Deploy your apps Spectron — Test your apps Devtron — Debug your apps Electron Prebuilt — Install Electron
Menubar — Create menubar apps

3.萌新的学习材料: 官网提供一个比较全面的DEMO,包括常规的系统级别操作,通信,截图,调用PDF等例子 API支持多语言,已经翻译好,个别翻译会让读者懵逼 API中有不少例子,但是不是很全,个人觉得是用的人比较少,有可能会有填坑的情况

4.成熟产品: 官网上列举了很多,个人觉得做的比较好的是:VSC和白鹭的IDE (由于白鹭的IDE主要作者是我师哥,之前跟他学习了一下,整个下午都是在卧槽!!的状态)

quick start

2.1 搭建开发环境

1.官网是有个一个quick start的例子的,我推荐先下载demo点点看看,传送门

2.下载官方的quick start的例子:

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

但是如果有小伙伴没翻墙,被拦在的寡妇网内,npm install失败了,那就用下面这个办法吧 (换了源也不好使的话)

根据系统去淘宝的镜像上下载最新的Electron包,传送门

我是windows,解压之后可以点击electron.exe就可以看到提示

To run your app with Electron, execute the following command in your Console (or Terminal):
C:\Users\carlos\Desktop\electron\electron.exe path-to-your-app

把工程的文件夹拖进来,或者执行cmd命令就可以看到效果了,我是觉得这里可以加到环境变量里,但是没完成功,留个小坑以后填

注意,Electron的Console.log()是输出到控制台的,所以当你concole一个东西看不到的时候,试试CMD启动

现在

  • api √
  • demo √
  • quick-start √
  • run environment√
  • Hello world √

恭喜你已经入坑了

First Electron

如果你是一个好学的同学,那你应该自己琢磨quick-start,如果你是懒癌晚期,那就继续听我逼逼

3.1 请建立以下目录

your-app
- main.js
- index.html
- package.json

3.2 说明

package.json 的格式与Node的模块格式是一致的,可以引入依赖

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js"
}

这里要注意的是,现在的Electron已经不指定main.js做为入口了,在package.json中可以设置启动入口

main 就是你应用的启动脚本,该脚本将运行在主进程中,请保证你拖进Electron的文件夹下能找到这个文件

//引入electron
const electron = require('electron');
//app控制整个Electron的声明周期
const app =electron.app;
//创建一个本地的窗口
const BrowserWindow = electron.BrowserWindow
//保持一个全局的窗口对象,可以不显示,如果没有这个对象,窗口点击关闭的时候,js对象会被gc干掉
let mainWindow;

function createWindow(){
    mainWindow = new BrowserWindow({
        width: 800, 
        height: 600
    })
    //加载静态资源
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    mainWindow.on("closed",function(){
        mainWindow = null
    })
}

//生命周期的函数定义
//这里好好看api http://electron.atom.io/docs/api/app/
app.on("ready",createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

index.html做为静态资源被加载,可以引用一些mvvm,比如一会儿我会引入vue,也可以引入three.js

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Hello world</h1>

	</body>
</html>

3.3.启动

拖拽文件夹到electron.exe中,就可以看到下面的效果

electron1.jpg

3.4.搞点事

可以尝试一下,在package.json中添加依赖,或者在index.html中

mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    frame: false
})

API

4.1 MENU & 设置快捷键

引入menu有两种方法,写在HTMl里,或者写在main.js这样的文件里 我个人喜欢后者,因为HTML说不定会别的地方会用,上来就报错不太好 推荐阅读menu和menuiteam的官方API和例子 http://electron.atom.io/docs/api/menu/ http://electron.atom.io/docs/api/menu-item/

先看代码

//引入menu
let Menu = electron.Menu;
//引入menuIteam
let MenuItem = electron.MenuItem
//创建一个menuIteam
const menuIteam_first = new MenuItem({
	label:"Electron",
	submenu: [
		{
        	//需要通过cmd来启动
			label:"show sth in cmd",
			click(){
				console.log("clickLabel")
			}
		},
		{
        	//创建一个新的窗口
			label:"new window",
			accelerator:"CmdOrCtrl+N",
			role:"",
			click(){
				let newwindow = new BrowserWindow({
					width: 400, 
      				height: 300,
					resizable:false
				})
				newwindow.loadURL('file://' + __dirname + '/source/electron1.jpg');
				newwindow.on("closed",function(){
					newwindow = null
				})
			}
		},
		{
        	//可以看到一个选中的选项
			label: 'checked', 
			type: 'checkbox', 
			checked: true
		},
		{
        	//所有menuIteam的label都可以有submenu
			label: 'Gender', 
			submenu:[
				{
					label:"male",
					type:"radio",
					checked:true
				},
				{
					label:"female",
					type:"radio",
					checked:false
				},
				{
					label:"computer",
					type:"radio",
					checked:true
				}
			]
		},

		{
        	//只写role可以调用一些默认的设置,比如这个是全屏
			role: 'togglefullscreen'
		},
		{
        	//accelerator是定义快捷键,click可以按自己需要写
			label: 'Developer Tools',
			accelerator: process.platform === 'darwin' ? 'CmdOrCtrl+I' : 'CmdOrCtrl+I',
			click(item, focusedWindow) {
			if (focusedWindow)
				focusedWindow.webContents.toggleDevTools();
			}
		},
		{	
        	//可以调用role默认的同时重写一些需要的内容
			label:"GOODBYE",
			role:"quit",
			accelerator:"CmdOrCtrl+Q"
		}
	]
});

解释一下: 创建menu很简单三步就能说清楚 1、创建一个menu对象,定义好label的叫什么,往里面塞menuIteam 2、定义你的menuIteam,可以用role简化,也可以不写role,自己写click()函数 3、挂在到你的窗口上

注意,窗口的宽和高是整个视窗的,间距边框和工具栏才是html的宽和高,要是不想麻烦,give up这部分,用html写好然后调用系统的js接口吧

4.2 最小化图标

QQ平时是可以最小化到右下角的,用Electron来实现很容易 但是请确认你已经读懂了Menu部分

还是推荐先看API http://electron.atom.io/docs/api/tray

然后看代码:

//引入Tray
let Tray = electron.Tray;
let tray = null;

function createWindow(){
	mainWindow = new BrowserWindow({
		width: 800, 
		height: 600
	})
	//加载静态资源
	mainWindow.loadURL('file://' + __dirname + '/index.html');

	let image = nativeImage.createFromPath('/source/electron1.jpg');

	tray = new Tray(image);

	const contextMenu = Menu.buildFromTemplate([
		
		{
			label:"show",
			click(){
				mainWindow.show()
			}
		},
		{
			label:"Exit",
			role:"quit"
		}
	]);
	// tray.setToolTip('This is my application.')
	tray.setContextMenu(contextMenu)

	mainWindow.on("closed",function(){
		mainWindow = null
	})

}

创建一个右下角小图标很简单,两步即可 1、声明一个全局的tray对象,然后在你创建主窗口的初始化函数中,给它一个默认图标 2、创建一个menu,这个步骤跟刚才一样,记得绑定到tray上

注意一点:tray的图片需要nativeImage格式,具体什么是nativeImage看这里,如果你的图标type Error了,那么可以使用electron提供的一个转换函数把i的图片转换一下

const nativeImage = electron.nativeImage;

4.3 ipcMain

ipcMain是用来让mainWindow和创建的window们传递数据

//main.js
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});

<script>
    const {ipcRenderer} = require('electron');

    console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); 

    ipcRenderer.on('asynchronous-reply', (event, arg) => {
        console.log(arg); // prints "pong"
    });

    ipcRenderer.send('asynchronous-message', 'ping');
</script>

electron2.jpg

解释一下: 1.在主窗口中定义ipcMain,注册一些同步or异步事件来处理收到的事件 2.在需要发消息的窗口,发送消息 3.如果是异步的,在发送消息的窗口,定义接收信息事件

4.4 桌面捕获

占位,困

End

就使用结果来看,视频,音频等流媒体的获取我还在研究,其他的模块Electron的表现还是相当不错的,至少我想到的桌面开发需求还是都有的。即使没有,咱们还有node嘛,多走一层就是了。

需求场景我觉得还是蛮多的,比如ERP,CMS都这种通过网站打开的在线办公系统比较依赖网站,用这个封装一下,可以免去很多初级用户(交互定义上的)的使用风险

强交互的场景还是比较需要桌面版的,比如Tower、钉钉这样的都有需求

我建议程序员们现在可以上手玩,自己做一个集成软件,比如我接下来会将监控&管理工程文件,md的一些文档的预览,发周报的脚本,爬虫等等集成到一起,做一个统一入口

欢迎各位指正&交流

杜绝无脑黑

推荐阅读 官网的一篇demo的介绍

22 回复

之前用 Electron 制作的一个分享文件的应用: https://github.com/psychokinesis-dev/free-share 很简单,代码量只有几百行

@Covertness 搞过外接设备吗?

我用electron 帮学妹写她的作业

@Covertness 摄像头,麦克风

@CarlosRen 真巧,这两天正打算做个,这是设计方案: https://github.com/psychokinesis-dev/rfcs/blob/master/live-stream.md 估计周末弄个demo出来

好几个版本,pdb那个迅雷挂了一晚上都没下完

  • electron-v1.2.7-darwin-x64.zip
  • electron-v1.2.7-win32-x64-pdb.zip
  • electron-v1.2.7-win32-x64-symbols.zip

helloword 多少M?

不错啊

来自酷炫的 CNodeMD

ck

来自酷炫的 CNodeMD

之前在公司用 Electron 写过Mac和Windows应用 后来无聊写过一个豆瓣FM https://github.com/xwartz/PupaFM

@yakczh

打包之后估计接近40M吧

<div><p><!-- react-text: 2727 -->electron 最牛逼的作品首选vs code,虽然对electron进行了改进<!-- /react-text --></p></div>

@Covertness @CarlosRen 用node-pre-gyp编译二进制模块的时候,windows平台坑不少

@dfsq1311 windows 下主要基于微软自家的 VS 平台,编译差异确实比较大,很多包含C/C++的包都不支持,还好桌面程序一般不会有太高的性能要求,尽量用js的库吧

@dfsq1311 我们客户端同事在搞各种dll的库,工位对面已经疯了几个了,建议尽量避免使用需要gyp的,非要使用不可,也尽量使用大公司维护的

我发现 windows 里 electron 不能访问 qq.com mac 可以.

有知道什么原因的吗?

回到顶部