electron 的混合桌面之路入门安装

最近有计划去写桌面程序，所以呢，我打算写一篇博客来记录使用21世纪逼格最高的技术的入门文档。

electron 的混合桌面之路

首先假装很厉害的样子介绍一下Github 官方制作的Atom代码编辑器，这个编辑器是使用electron技术开发的号称21世纪最富有变化的可扩展的编辑器（A hackable text editor for the 21st Century）。

界面简单直观，代码高亮，智能提示补全的功能都还算强大贴心
它可拥有灰常多的插件，插件的编写也十分便利，javascript就可以为其写插件
最重要的是它让无数人看到了HTML/CSS/JS桌面程序的未来

electron 究竟是个啥？

一句话：这是个在node.js平台上运行的为了一些专门的功能而制作的浏览器
node.js: 一个编程专用的浏览器环境，可写javascript
electron：打包了一个特制的chrome浏览器和node.js ,然后我们加载网页就行了，嚯嚯哒

那么，怎么使用这个electron，牛的很的技术呢

主要有以下几个步骤：

下载并安装node.js
检查node.js和npm是否安装成功（npm就是node.js 的一个商店，专门提供各种小功能【各种模块】）
下载electron，注意：在线安装不行的话请出门右转选择离线安装
安装electron或者直接使用
编写第一个应用

1.下载并安装node.js

node.js官网：https://nodejs.org/en/ 建议下载 4.x的版本，这个版本已经实现对ES6不错的支持了

2.检查node.js和npm是否安装成功

命令行：node -v
命令行：npm -v

3.下载electron

electron官网：http://electron.atom.io/ PS.应该是，我觉得
GitHub 坐标：https://github.com/electron/electron api 官方文档才是解决问题的王道
中文翻译官方文档：https://github.com/electron/electron/tree/master/docs-translations/zh-CN
3. npm 在线下载

 - 命令行:npm install electron -g (加g 全局安装，自动添加到环境变量)- 命令行:cd your-app-path - 命令行:electron .\ （应用跑起来）

4. 离线下载

->到各家镜像网站摸一个electron下来对应平台摸搞错了，很尴尬的
宝宝镜像：https://npm.taobao.org/mirrors/electron/
GitHub：https://github.com/electron/electron/releases
csdn 下载频道：地址忘了，自己找，我才懒得翻历史记录呢

4.安装electron或者直接使用

如果上面的步骤没有出现错误提示，那么直接使用即可，: D

命令行：electron .\ (你编写的应用的那个文件夹下执行)
离线安装的同学，请戳开electron.exe 把那个文件夹甩进去

5.编写第一个应用

随便弄个文件夹，新建一个文件：package.json
打开package.json，写入如下内容
```
{"name": "你弄啥","version": "0.0.1","main": "main.js"
}
```
JSON格式
- name -> 你的应用名字
- version -> 版本号
- main: ->程序的主逻辑文件，node.js的写法
编写main.js，写入内容如下

var electron  = require('electron');
//寻求node.js的一个模块 electron ，并生成对象electron
//PS.早期版本的electron用的是app模块和browser-window模块
var {app} = electron;
//{app} 是一个electron对象，控制整个应用，管理所有
var browserWindow = electron.BrowserWindow;
//browserWindow 对象被创造成一个electron的浏览器窗口对象
var mainWindow;//表示主窗口
function createWindow() {mainWindow = new browserWindow({height:600,width:800});//打开一个浏览器窗口，800×600mainWindow.loadURL('file://' + __dirname + '/app.html');//打开当前目录的app.html
}app.on('ready',createWindow);
//{app}订阅了一个ready事件,
//这个事件会在整个应用启动过程完成后发生，此时会自动调用createWindow函数做一些事情了

剩下的事情就是如何编写页面了，看官方文档吧，骚年！
我感觉优化的好的的话，以后Photoshop都可以用electron写！
当然C/C++的功底是必须的，哈哈！
PS. 现在可以用ES6写electron了，兼容性问题不大！
electron 参考工具链：http://electron.atom.io/community/
LOL全新客户端也要用electron（准确的说的是直接编译的CEF）