Electron's hybrid desktop road entry installation

Recently there are plans to write desktop programs, so I plan to write a blog to document the introductory documents using the most advanced technology of the 21st century.

Electron's hybrid desktop road

First pretend to be very powerful and introduce the Atom code editor officially produced by Github. This editor is a hackable text editor for the 21st Century developed using electron technology and known as the most varied and extensible editor in the 21st century.

The interface is simple and intuitive, the code is highlighted, and the intelligent prompt completion functions are still powerful and intimate
It can have many plug-ins, and the writing of plug-ins is also very convenient, and javascript can write plug-ins for it
The most important thing is that it allows countless people to see the future of HTML/CSS/JS desktop programs

What exactly is electron?

In a word: this is a browser made for some special functions running on the node.js platform
node.js: a browser environment dedicated to programming, can write javascript
electron: packaged with a special chrome browser and node .js , then we can load the web page, oh oh da

So, how to use this electron?

There are mainly the following steps:

Download and install node.js
Check whether node.js and npm are installed successfully (npm is a store of node.js, which provides various small functions [various modules])
Download electron, note: If online installation doesn't work, please go out and turn right to select offline installation
Install electron or use it directly
Write your first app

1. Download and install node.js

Node.js official website: https://nodejs.org/en/ It is recommended to download the 4.x version, which has achieved good support for ES6

2. Check if node.js and npm are installed successfully

Command line: node -v
Command line: npm -v

3. Download 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"
}
```
- 1
- 2
- 3
- 4
- 5
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×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）