Electron学习（1）快速入门

一、环境搭建

1.1、安装 node.js

首先Electron是依赖node.js的，如果你的机器上还没有 Node.js 和 npm ，请安装它们，在此不做赘述。推荐使用淘宝镜像安装

1.2、全局安装 electron

请使用淘宝镜像安装，不然有可能安装失败

cnpm install  electron -g

如果你的机子和我一样是Mac的话则需要加上sudo命令,也就是需要管理员权限，输好密码就可以开始等他安装了。

sudo cnpm install electron -g

全局安装之后，就可以进入项目所在目录，然后通过“electron .”启动应用。

二、Hello Electron

我们现在就先写一个hello world项目
我们先看下一个 Electron 项目的基本框架组成。

2.1、项目框架

参看官方的 demo ，一个 Electron 应用的目录结构大体如下：

your-app/
├── package.json
├── main.js
└── index.html

- package.json
package.json 的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

- main.js
main.js 应该用于创建窗口和处理系统事件,Electron 的主进程将用它来启动并创建桌面应用。

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path');
const url = require('url');

let mainWindow
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭

function createWindow(){
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width:800,height:600});
  // 加载应用的 index.html。
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname,'index.html'),
    protocol:'file',
    slashes:true
  }))
  // 打开开发者工具。
  mainWindow.webContents.openDevTools()
  //监听 window 的关闭，关闭时这个事件会被触发。
  mainWindow.on('closed',function(){
    mainWindow = null;
  })
}

// 监听Electron的初始化，之后执行函数创建浏览器窗口。
app.on('ready',createWindow)

// 监听当全部窗口关闭时退出，调用执行函数。
app.on('window-all-closed',function(){
  if(process.platform!=='darwin'){
    app.quit()
  }
})

app 模块：会控制应用的生命周期，可以使用app监听各种状态比如：ready、quit等等

BrowserWindow 模块：为你创建窗口。

win 对象：是你应用的主窗口，被声明成 null ，否则当 JavaScript 垃圾回收掉这个对象时，窗口会被关闭。

- index.html
这个文件就是我们的视图层，需要展示的页面UI。

  
  
  
  


  
hello world 

2.2、运行项目

使用命令行进入项目所在目录,执行electron . 就可以弹窗我们的hello world应用

cd desktop/your-app
electron .

运行结果如下

image.png

至此，一个简单的Electron应用就完成了。