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

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

electron 的混合桌面之路

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

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

electron 究竟是个啥？

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

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

主要有以下几个步骤：

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

1.下载并安装node.js

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

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

1. 命令行：node -v
2. 命令行：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

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

5.编写第一个应用

1. 随便弄个文件夹，新建一个文件：package.json

2. 打开package.json，写入如下内容

   {    "name": "你弄啥",    "version": "0.0.1",    "main": "main.js"}

   JSON格式

   • name -> 你的应用名字
   • version -> 版本号
   • main: ->程序的主逻辑文件，node.js的写法

3. 编写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×600    mainWindow.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）