本文将通过hello word案例，来记录学习electron的过程。
注:我的环境是 macOS Sierra,不涉及windows平台,请确保已安装node.js

electron 简介

electron是一款可以使用JavaScript,HTML,CSS来构建跨平台app的开源框架。

electron 官方入门demo

如果你想尝试一下electron,那么使用electron-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

如果你以为这样就成功了，那你好天真啊，但是事情不可能如此简单...

错误一

卡住了ing...

解决过程

运行到node install.js卡住了，长时间没有反应，该怎么办呢？我们应该找找原因。

• 首先执行rm -rf node_modules,将node_modules文件夹删除
• 执行npm install -verbose，在安装依赖过程中显示的信息将更为详细
  
  详细信息

现在知道原因了，因为网速太慢了!!! (我当前有使用VPN，如果网速快，也很快就可以安装完依赖；但是VPN速度不稳定，这个放在最下面讲...)
大家知道由于某些原因，网络是被墙掉的，而electron的源地址是在国外，所以建议使用淘宝镜像。

• 执行npm install -g cnpm --registry=https://registry.npm.taobao.org ,安装cnpm工具
• 执行cnpm install，要记得先删除node_modules文件夹

淘宝镜像

• 最后执行npm start,app将自行启动
  我的执行结果如下，

命令窗口

启动成功ing

这里可能会有一个小问题

如果出现如下错误提示，表明找不到electron命令，只要全局安装electron即可，命令npm install electron -g

找不到electron命令ing

项目结构分析

electron项目主要由3部分组成：

• main.js
• index.html
• package.json

package.json

其中main.js的名称不是固定的，你可以任意定义，但是千万记得在package.json中写相同的名字，否则无法启动app。

  "main": "main.js"   

如果main字段没有声明，则会优先加载index.js

main.js

main.js用于创建窗口和处理系统事件。

// 引用electron依赖
const electron = require('electron')
// Module to control application life.  创建应用实例
const app = electron.app
// Module to create native browser window.      引用原生浏览器窗口，用于创建和控制浏览器窗口
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
// 保存一个对于window对象的全局引用，如果你不这样做，当JavaScript对象被垃圾回收，window对象将关闭。
let mainWindow

function createWindow () {
  // Create the browser window.  创建浏览器窗口，并设置宽高 
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.    加载应用的index.html
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.   打开开发者工具  
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.      当窗口被关闭时，触发这个事件
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows     
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.

    // 取消引用window对象，如果你的应用支持多窗口的话，通常
    //  会把多个window对象存放在一个数组里面，与此同时，你应该删除相应的元素。
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.

// electron会在初始化后，准备创建浏览器窗口时调用这个函数，
// 部分API在 ready事件出发后才能使用
app.on('ready', createWindow)

// Quit when all windows are closed.   当所有窗口关闭时推出  
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.

  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

该文件是需要展示的内容。

自己写hello word

在了解了以上内容之后，相信大家对electron已经有了一些了解，下面我们来动手写一个hello word.

新建项目

# 新建文件夹  
mkdir hello_electron  
# 项目初始化  
npm init  

配置package.json

在package.json中添加main字段，用于指定electron app的入口文件

"main": 'index.js'

添加script命令 ,用于启动electron app

"scripts": {
    "start": "electron ."
  },

安装electron

# 进入项目根目录
cd hello_electron
#安装electron
npm install electron --save 
# 网络有问题的同学请使用淘宝镜像
cnpm install electron --save

建立index.html

和普通的html一样，我们写个简单的标签

<h1>hello world</h1>

建立index.js

先写一个简化版的例子。

// 引入electron模块  
const electron = require('electron');

// 用来控制应用的生命周期  
const app = electron.app;

// 用来创建浏览器窗口  
const BrowserWindow = electron.BrowserWindow;

// 创建一个全局变量，名字任意，相当于普通网页的window对象  
let mainWindow;

// 创建浏览器窗口函数
function createWindow() {
   // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width:500,
    height:800
  })
//加载项目目录下的index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 当窗口被关闭时调用
mainWindow.on('closed', function () {
  // 取消引用window对象，如果你的应用支持多窗口的话，通常
  //  会把多个window对象存放在一个数组里面，与此同时，你应该删除相应的元素。
   mainWindow = null
 })
}
// 当应用触发 ready 事件后，创建浏览器窗口
app.on('ready',function(){
 createWindow();
})

此时，执行npm start,将会打开hellow_electron。

到这里，已经算是小功告成了；但是你会发现当关闭app后，直接退出了，dock栏里面的electron图标也不见了。想要再次打开，还要去命令行跑一次。

因为现在的index.js是最简易的，只是创建了一个窗口。现在添加如下代码

 // 当点击关闭时，在dock中保留electron
  app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
// 点击dock中的electron图标的时候，再次创建窗口
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

再次运行，你会发现当关闭窗口时，dock中还保留着electron的icon,并且点击可以再次打开。

打包

• 安装electron-package

npm install electron-packager --save-dev

• 添加scrip命令 ,用于打包electron app。

  这里只配置的平台为darwin，即OSX系统；arch为x64。

"scripts": {
    "start": "electron ."，
    "build": "electron-packager .  hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
  },

electron-packager命令格式

electron-packager 项目目录 app名称 --platform=平台 --arch=架构 --ignore=要忽略的目录或文件

• arch
  ia32 ， x64 ， armv7l ， all

• plateform
  linux ， win32 ， darwin ， mas ， all

  OS X (also known as darwin)
  Mac App Store (also known as mas)

执行命令npm run build,将得到如下结果

安装过程中会下载相关的平台依赖，所以请耐心等待...

npm run build

项目文件目录

helle_electron就是打包后生成的electron app。
这里有个不起眼的问题，hello_electron-darwin-x64这个文件夹无法使用鼠标删除，每次移到废纸篓之前都会让输入用户密码，但是输完密码又不会移到废纸篓。可使用命令rm -rf hello_electron-darwin-x64进行强制删除，如果提示文件件不是空目录，就先删掉文件夹里面的文件。

压缩源码

虽然生成app了，但是源码仍然是暴露的，当用户打开app的包内容，进入目录hellow_electron/Contents/Resources/app，将看到源代码文件。

显示包内容

源代码

为避免源代码泄露，可对源码进行压缩。

• 安装electron-asar

npm install electron-asar --save-dev

• 添加scrip命令 ,用于压缩源代码。

"scripts": {
    "start": "electron ."，
    "build": "electron-packager .  hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
    "package":"asar pack hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app.asar"
  },

asar 命令格式

asar pack <dir> <output>

执行npm run package将得到app.asar文件，此时可将app文件删除。

asar文件

参考

• electron 中文文档
• electron-packager
• 打包electron应用 - 金丝猴的博客
• electron-packager API
• electron-asar

如果喜欢，请点个赞^_