你知道的electron

electron简介

其实这篇文章是我很久之前写的一篇分享,不过没发表出来。最近太忙,没时间写,又不想违背了自己立下的一个月一篇学习笔记的想法,所以,炒炒冷饭咯~

如果你能够写一个网页应用,那么你就能写出一个本地应用,而可以帮助你实现这件事的框架之一就是electron。electron是一个利用web技术(javascript,html,css)来创建本地应用的框架。Electron 框架的前身是 Atom Shell,它是基于node.js 和 Chromium 开源项目,并用于在 Atom 编辑器中。Electron 是开源的,由 GitHub 维护,有一个活跃的社区。

以下操作都是确保你已经安装好了node.js的前提下进行的。

安装electron

在做所有事情之前,我们先修改一下electron的镜像,因为墙的原因,使用淘宝源会比较顺利一些。

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

使用npm安装

# 全局安装electron
npm install electron -g

# 只在项目里边安装electron
# npm install electron --save-dev

查看当前安装好的electron版本。

electron -v

当然,建议是使用electron官网提供的electron-quick-start,electron-quick-start是一个非常简单的electron应用,我们可以在它的基础上开发我们自己的应用。

下载electron-quick-start

# 克隆quick start远程库
$ git clone https://github.com/electron/electron-quick-start

# 进入库
$ cd electron-quick-start

# 安装依赖以及运行
$ npm install && npm start

electron-quick-start文件结构

下面我们来看看electron-quick-start的文件结构,并简单的介绍一下一些重要且必须的文件的用处,以便大家更轻松的开发。

-- node_modules/
-- .gitignore
-- index.html
-- LICENSE.md
-- main.js
-- package.json
-- README.md

node_modules

node_modules是用来存放我们需要的node依赖的插件包。

package.json

npm命令运行时会读取当前目录的package.json文件和解释这个文件。在这个文件里边可以定义项目的名称,版本,描述,以及npm命令等等(比如说刚才运行的npm start)。
其中要特别注意的是main对应的内容,这里应该填写的是electron入口的js文件(如main.js)。

"main": "main.js",

main.js

electron程序的入口文件,我们在这个文件里边使用electron创建窗口,打开调试器等等。

var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  mainWindow.webContents.openDevTools();

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

主要我们要修改的是ready之后的配置函数。

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

上边的代码,我们创建了一个宽为800,高度为600的窗口。事实上,我们还可以配置这个窗口的更多内容,详细的可以去查看BrowserWindow文档。下面我只讲一些比较常用的属性:

width

整型,窗口的默认宽度。默认为800。

height

整型,窗口的默认高度。默认为600。

minWidth

整型,窗口的最小宽度。默认为0。

minHeight

整型,窗口的最小高度。默认为0。

resizable

布尔值,false时,窗口不可拉伸,默认为true

title

字符串,窗口的标题。默认为Electron

然后遗憾的是,一些在其他平台能够实现的配置,在ubuntu上却并不能实现,例如icon等等。

创建好窗口之后,接着加载应用的入口页面文件index.html

mainWindow.loadUrl('file://' + __dirname + '/index.html');

下面这段代码,为我们打开了调试器,当我们完成开发时,不再需要调试器了,就可以选择注释或者删除该段代码。

mainWindow.webContents.openDevTools();

index.html

接下来就是在这个文件里使用html、css、JavaScript来编写本地应用了。不过需要注意的是:

my-app-title

如果html里边设置了title标签,electron窗口设置的title就会被覆盖掉。

启动应用

npm start 

or

electron .

打包应用

最后,为了写好的应用能够方便的给更多人使用,我们需要将项目打包好(package)。下边是两种常见的打包的方法:

使用electron-packager进行打包

安装electron-packager:

# 只在项目里安装
npm install electron-packager --save-dev

# 全局安装
npm install electron-packager -g

使用electron-packager:

electron-packager   --platform= --arch= [optional flags...]
  • dir: 需要打包的文件夹
  • appname: APP名称
  • platform: 平台(linux)
  • arch: 操作系统的位数(x86/x86_64)
    • --out: 打包后输出的文件位置
    • --version: 应用版本
    • --icon: 应用icon(ubuntu下无效)

gulp打包

安装electron-packager依赖

npm install electron-packager --save-dev

编写gulp task

var electronPackager = require('electron-packager');

gulp.task('package', function() {
  var options = {
    // 打包设置
  };

  electronPackager(options);
});

options的内容如下:

{
  dir: 'my-app',
  out: 'out',
  version: '1.0.0',
  platform: 'Linux',
  arch: 'x86_64'
}

你可能感兴趣的:(你知道的electron)